Audio issues with MP3

**GiddyupGilbert** · 21 October 2018, 08:57 PM

Xara365X: I've recorded MP3s and imported into WEBpages with no issues in playback or anything, but I'm not nuts about about the playback bar and would like to change the icon without losing the audio. I've been given instructions at an earlier time, go in and change the icon. It changes alright, but I lose the music. my question is, can I change the music icon to something other than the the normal bar that imports into the page, and how? Any thoughts appreciated. Thanks.

**GiddyupGilbert** · 23 October 2018, 08:03 PM

Here I go again..been a couple of days and no answer. Maybe I shouldn't be using .mp3. Is there an audio format that you can apply a graphic for it and not lose the audio part?

**Acorn** · 23 October 2018, 10:03 PM

No should should have told you to change the icon as it is an embedded control.

One approach I advised a time back is here: https://www.talkgraphics.com/showthr...427#post590427.

Acorn

**GiddyupGilbert** · 25 October 2018, 03:12 PM

Acorn I've followed your instructions as best I thought I was understanding. I successfully, with what I think I understand, was able to create buttons that worked on the created three pages. The "Soft Group" does not make the entire button active, just the 30X30 I put in front. When I put the 30x30 in back and "Soft Group" the two files it turns into a big black square, so I presume the 30x30 should remain the file on top. This is what you'll see: www.programmersdigest.com

**Acorn** · 25 October 2018, 05:04 PM

GG, nothing like, I'm afraid.

To the audio control widget, you must add an ID:

Code:

<audio class="xar_meplayer" src="index_htm_files/pdintropagemono.mp3" id="musicintro" controls width = "100%" height="100%"/>

"musicintro" can be renamed but what it is called is used in the link applied to the image:

Code:

javascript: document.getElementById("musicintro").play();

If you place your 30x30px play control on top then a click on either it or the image will start the track; the Pause button appears and only it stops the track.

If you hide the play control under the image then nothing stops the track, unless you add another linked shape with a Stop or Pause function:

Code:

javascript: document.getElementById("musicintro").stop();

This will replay the track , when Played.

Code:

javascript: document.getElementById("musicintro").pause();

This will restart the track.
Pick one or the other or none.

JS - Controlling Audio.xar

Acorn

**GiddyupGilbert** · 26 October 2018, 04:22 AM

Acorn, sorry, I'm a bit thick, do I put the code in Placeholder HTML Code or Code Head?
("musicintro" can be renamed but what it is called is used in the link applied to the image

Link applied to music doesn't mean anything to me.
(javascript: document.getElementById("musicintro").pause() Where do I put this?