Audio Video with graphic

[Alliefan]

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.

[doane]

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.

[Egg Bramhill]

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.

If it's set to autoplay just place a rectangle matching your page background above it.

[Acorn]

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.

yes there is.

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:

1. Hide the control under the button and soft group both.
2. 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

[doane]

yes there is.

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:

1. Hide the control under the button and soft group both.
2. 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.

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

[Acorn]

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.

It is actually one of Xara's more clever utilities.

Acorn

[Boy]

You can find a good explanation in Help/Help Web Designer Premium and type "Soft groups".

[doane]

yes there is.

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:

1. Hide the control under the button and soft group both.
2. 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

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.