Printable View
I added an MP3 to a website. Client wanted a picture of a speaker (wants the look of Merriam Webster online dictionary) linked to the audio without seeing the audio ... so that, when that speaker is clicked, the audio plays. I thought I had done something similar a few years ago but I can't remember how and I can't seem to find anything in other post about this. I'm attaching a picture of what I have.
Attachment 119293
I'm looking for the same answer. HTML5 apparently now has support for audio, just now figured it out... you just drag an mp3 file into the window and a popup asks you if you want the site to autostart the sound when the page loads or if you want a small control bar for it for manual control. Problem I'm having is the control bar is visible... I don't want to see it. I want the brief sound to start when the page is loaded and that's it.. I don't need and don't want to see a control bar on the page. And, yes, I did check the box to have the sound auto start.
Also I would like to know is if there is a way to get sounds attached to buttons or other objects when they are pushed/clicked or moused over.. click sounds, etc.
If it's set to autoplay just place a rectangle matching your page background above it.Quote:
Problem I'm having is the control bar is visible... I don't want to see it. I want the brief sound to start when the page is loaded and that's it.. I don't need and don't want to see a control bar on the page.
yes there is.Quote:
Originally Posted by doane
Drop your MP3 onto your design canvas.
Decline AutoPlay.
Select the Audio Control bar and open its Placeholder body.
Remove the word controls and add an id. My example: <audio class="xar_meplayer" id="lorryreverse" src="index_htm_files/car.mp3" width = "100%" height="100%"/>
Resize the control to 30 x 30 px.
Keep it handy.
Now create a button or text link. here I am just going to describe a button with a click link.
In Link > Link to Web or Email address, put: javascript: document.getElementById("lorryreverse").play();
You can now do one of two things:
- Hide the control under the button and soft group both.
- Place the control to the right. I recommend this as when either it or the button is clicked, the Pause control is shown so a punter can quickly kill the raucous noise. Again, soft-group to keep things together.
Acorn
Wow, thanks for the quick replies.Quote:
Originally Posted by Acorn
EB: I had tried hiding it under another image, but didn't like not knowing where it is and then couldn't figure out how to bring back to the front
Acorn: Thanks so much, will try that out... maybe a dumb question, but what does "soft group" both mean? ...Just learning Webdesigner 15
Select two or more shapes and use Arrange > Apply Soft Group. This keeps the Shapes as their original image, widget, button, text, links or whatever across any number of layers and doesn't just munge them together flattening then out and ruining their original purpose. Soft-grouped items as selected as one, move as one but can be Ctrl+Selected to change any.Quote:
Originally Posted by doane
It is actually one of Xara's more clever utilities.
Acorn
You can find a good explanation in Help/Help Web Designer Premium and type "Soft groups".
OK, thanks everyone
Just figured out an easier and different way to do it using the HTML5 <audio> tag. Incidentally, mp3 audio is supported in all browsers, wav files in all but Windows Explorer, and ogg is supported in Chrome, Firefox and Opera only.
I drag a mp3 into the window and then I right click, Edit Widget --> Placeholder Tab open the HTML code body and edit the text as follows:
<audio autoplay><source src="index_htm_files/chalkb2b.mp3" type="audio/mpeg"></audio>
Now I can see the control in the window when I'm working, but when the page loads in a browser there is no control and the audio loads with the page.
Here was how the original Xara code looked for comparison:
When autostart is chosen when it's dropped into the page:
<audio class="xar_meplayer" src="index_htm_files/chalkb2b.mp3" controls autoplay width = "100%" height="100%"/>
And when NO autostart is chosen:
<audio class="xar_meplayer" src="index_htm_files/chalkb2b.mp3" controls width = "100%" height="100%"/>
I far as I can read the change you made without running it you have factored our the source MP3 and expanded the <AUDIO /> syntax into <AUDIO></AUDIO>. In doing so, you have removed the controls parameter as I suggested and a side-effect is the AUDIO placeholder not longer has a source parameter so is not rendered. This is fine for for AutoPlay but no otherwise unless you have followed my other suggestion to associate the button click action to the ID of the MP3. Your current solution cannot achieve this last action: "Also I would like to know is if there is a way to get sounds attached to buttons or other objects when they are pushed/clicked or moused over.. click sounds, etc." & "Audio Video with graphic".Quote:
Originally Posted by doane
Xara are using the AUDIO tag already. Your variation is normal when you have multiple audio formats that allows you to better target the end listeners browser.
e.g.:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The AUDIO tag is not supported in Internet Explorer 8 and earlier versions.
I am glad you have something that works for you.
Acorn
P.S. I would strongly suggest never to use autoplay for long tracks without warning. It is OK for sound effects like button clicks and the occasional rollover. Too much and you drive off custom.
Thanks, Acorn: I was playing around with it last night using the <audio> tag in the control placeholder, as I mentioned above, and I started having some sort of weird problems, so I ended up pasting that HTML line into the main body and deleting the audio placeholder completely. It seems to work fine now, but is sort of a work around for something I feel like they could have included.. a third option to have the audio auto start when the page loads, but also hidden? Anyway, it seems to work fine now and isn't something I use very much. It also something that I will keep subtle so it doesn't turn viewers off, as I agree with you on that. Also, I'll add the line, "Your browser does not support the audio element." for those with earlier IE versions.
Just wanted to say that I had time to play with your Java some more and appreciate the answer. Will see how it works out when I start constructing some of my buttons I want to have a slight sound with when clicked, etc. Again, I'm surprised Xara hasn't included this as an option though to easily implement sounds with buttons? I've always enjoyed a slight sound when I "click" a button for some action, but maybe it's just me.Quote:
Originally Posted by Acorn