Printable View
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.
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?
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
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
GG, nothing like, I'm afraid.
To the audio control widget, you must add an ID:
"musicintro" can be renamed but what it is called is used in the link applied to the image:Code:<audio class="xar_meplayer" src="index_htm_files/pdintropagemono.mp3" id="musicintro" controls width = "100%" height="100%"/>
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.Code:javascript: document.getElementById("musicintro").play();
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:
This will replay the track , when Played.Code:javascript: document.getElementById("musicintro").stop();
This will restart the track.Code:javascript: document.getElementById("musicintro").pause();
Pick one or the other or none.
Attachment 122438
Acorn
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?
GG, open the file I supplied and examine each shape.Quote:
Originally Posted by GiddyupGilbert
I dragged the MP3 onto the page. Xara generates the Body Placeholder code automatically). You should not select Autoplay.
Open the Body Placeholder. In it is the code Xara produces. Into it, add the ID parameter. The quoted detail ("musicintro") is just a label.
I resized to 30x30px to just show the Play button.
I added an image (from your site).
Open its Web Properties and in its Link add the javascript: document.getElementById("musicintro").play();
The closing semi-colon is important.You can use the other links for Pause or Stop on other graphics, shapes or buttons as their Link.
Acorn
Me again..:'( I have absolutely no issue, when soft grouped, pressing the start button on the 30x30. And I've set the button up, a three file group, gone into WEB Properties and inserted that code, then soft grouped the two files and the two grouped files..the hand comes up on the button, but when clicked nothing happens. I still have to press the 30x30 to begin the audio. I've tried inserting the code with and without "javascript:" and it still doesn't change anything. Still lost, and terribly sorry that I don't seem to understand what all needs to be done.
I too am sorry.
I put all the code and objects into the demonstration file.
Why can you not view that and see what's there? JS - Controlling Audio.xar.
Acorn
I believe I have no problem viewing the Soft Grouped buttons, and the 30X30 will play every time, but the button under the 30X30 does not become part of the play process. The code control is in the Place Holder like you said it would be, and I've gone into Web properties and put the Javascript into the link for Web at the top. I then Soft group tthe two factions. From this point I will see the hand (supposedly allowing execution) when I put the cursor over the button, but when I click it nothing happend; but I can hit the 30X30 and the audio will come on. Those are the only two areas I know of to see that coding is included and in the right place. Is it possible the Javascript should be different? Maybe I should try putting in everything but "Javascript:." This really has me puzzled. I just hope I'm doing it the way you feel I should. I'm learning a lot here, but I'm a bit slow and I apologize.
GG, have you put the id into the <audio /> code? It won't link and work otherwise.Quote:
Originally Posted by GiddyupGilbert
Acorn
I'm not sure how to perform that?
Click on the player control widget that plays the audio.Quote:
Originally Posted by GiddyupGilbert
Go to the Web Properties > Placeholder > HTML code (body) and add id="musicintro" within the <Audio> tag with spaces either side as I showed previously. Save that.
For your button, add javascript: document.getElementById("musicintro").play();
You need all of the phrase above. Change "musicintro" to anything you like but it must appear in both the widget and the image or button.
Acorn
I'm enclosing the button. I believe I've done everything you've asked, but only the arrow part plays the audio, not the entire button. The only change is that the hand shows on the button like it would work if you clicked there. Maybe you can tell at the site: http://www.programmersdigest.com. Thanks again for all the info/input you've given me.
GG, the code for the control is wrong:
It should be:Code:<audio class="xr_noreset" src="index_htm_files/pdintropagemono.mp3" width="100%" height="100%" style="width: 100%; height: 100%;" id="xr_uid_1"> id="musicintro" id="musicintro"
</audio>
I have also removed the blue code, for tidiness.Code:<audio class="xr_noreset" src="index_htm_files/pdintropagemono.mp3" width="100%" height="100%" id="musicintro"></audio>
Acorn
Your patience is appreciated more than you know. I'm including screen shots on both parts of the button to show you what I've done. Thanks
Attachment 122476
GG, the image doesn't need the <audio> code at all (bottom left) - remove it totally.Quote:
Originally Posted by GiddyupGilbert
The audio control you dragged onto the canvas it the thing you add the ID to.
The audio control (top right) still has the wrong <audio> code.
The audio control (bottom right) does not need the link - remove it.
Please, please open the document I posted and examine that.
Acorn
=D> Acorn I want to THANK YOU! so very much for all the help given on this mind boggling effort. Believe me you are appreciated.
GG, come on! The burning question is have you won?Quote:
Originally Posted by GiddyupGilbert
Acorn
There are many things and points in Xara I've yet to learn, but will. Yes I've won. You are part of the winning.