Re: Audio Video with graphic
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.
Re: Audio Video with graphic
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.
If it's set to autoplay just place a rectangle matching your page background above it.
Re: Audio Video with graphic
Quote:
Originally Posted by
doane
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:
- 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
Re: Audio Video with graphic
Quote:
Originally Posted by
Acorn
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:
- 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.
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
Re: Audio Video with graphic
Quote:
Originally Posted by
doane
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
Re: Audio Video with graphic
You can find a good explanation in Help/Help Web Designer Premium and type "Soft groups".
Re: Audio Video with graphic
Re: Audio Video with graphic
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%"/>
Re: Audio Video with graphic
Quote:
Originally Posted by
doane
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".
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.