http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
Here are some examples of sound replay from a web page. View the HTML source of the page to see how it's done. These examples have only been tested on a PC.
1. Normal Hyperlink to a Sound File
This is the simplest way, but usually causes a helper application to be launched to play the sound. Also, the sound doesn't start playing until it has been downloaded, and the downloading doesn't start until you click on the link. Worse, some helper applications start to play the sound before it is downloaded enough and stop playing part way.
<a href="success.wav">Play Sound</a>
Compatibility:  Internet Explorer, Mozilla/Firefox, Opera. |
2. Embedding a Sound File
The EMBED tag causes the sound file to be downloaded when the page itself is downloaded (just like an image would be). The browser then looks for a Plug-In to play the file. Internet Explorer will typically use the Windows Media Player plug-in for sound files. Mozilla requires you to install a suitable plug-in such as Quick Time. A disadvantage of the EMBED tag is that because you do not know the dimensions or the name of the plug-in, it is hard to control the size and format of the player's appearance.
<embed src="success.wav" autostart=false loop=false>
If this doesn't work, look here for more help on plug-ins for audio replay.
| Compatibility: Internet Explorer, Mozilla/Firefox, Opera. |
3. Controlling an Embedded Sound using JavaScript (Old)
A slight improvement on the above can be gained by making the embedded player invisible and controlling it from JavaScript. There are two parts to this: firstly a function (here called EvalSound) which takes the "name" of the hidden embedded player and calls its Play() method. Secondly a link, image or button which calls the function on demand when the component is clicked or has the mouse rolled onto it.
Here is the first part: the embedded sound and the EvalSound() function:
<script>function EvalSound(soundobj) { var thissound= eval("document."+soundobj); thissound.Play();}</script><embed src="success.wav" autostart=false hidden=true name="sound1"enablejavascript="true">Here are examples of a link, an image and a button calling the function.
<a href="#" onMouseOver="EvalSound('sound1')">Move mouse here</A><img src="play.gif" onClick="EvalSound('sound1')"><form><input type="button" value="Play Sound" onClick="EvalSound('sound1')"></form>If this doesn't work, look here for more help on plug-ins for audio replay.
| Compatibility: Internet Explorer, Mozilla/Firefox, Opera. |
4. Controlling an Embedded Sound using JavaScript (New)
A minor variation on 3. is to use the JavaScript getElementById() function in the EvalSound definition. This is actually the preferred method for recent browsers, but is not supported by older versions. The function and the sound object then becomes:
<script>function EvalSound(soundobj) { var thissound=document.getElementById(soundobj); thissound.Play();}</script><embed src="success.wav" autostart=false hidden=true id="sound1"enablejavascript="true">Note that we specify name of the embedded sound using its ID attribute now. The function calls however are the same as above. For example:
<form><input type="button" value="Play Sound" onClick="EvalSound('sound1')"></form>| Compatibility: Internet Explorer, Mozilla/Firefox, Opera. |
5. Using a Background Sound and JavaScript
It is possible to do much the same as the above without the use of a hidden player if the browser supports the BGSOUND tag (in practice only Internet Explorer). Basically background sounds play as soon as the source sound is available; so the trick is to specify the source only in response to a JavaScript function. Here is the BGSOUND tag and the function:
<bgsound id="sound"><script>function PlaySound(url) { document.all.sound.src = url;}</script>Here are examples of a link, an image and a button calling the function.
<a href="#" onMouseOver="PlaySound('success.wav')">Move mouse here</A><img src="play.gif" onClick="PlaySound('success.wav')"><form><input type="button" value="Play Sound" onClick="PlaySound('success.wav')"></form>Compatibility: Internet Explorer,  Mozilla/Firefox, Opera. |
6. Using Dynamic HTML
Dynamic HTML allows you to use JavaScript to write new HTML code into your page and let it be interpreted by the browser. The trick to using dynamic HTML for sound replay is to write into a region of the document the HTML of an embedded sound set to automatically start replay on load. Here we are going to use a <span> region and write into it using its "innerHTML" attribute:
function DHTMLSound(surl) { document.all.dummyspan.innerHTML= "<embed src='"+surl+"' hidden=true autostart=true loop=false>";}We can now create the dummy span region and just pass the URL of the sound file to the function to play it:
<span id=dummyspan></span><form><input type="button" value="Play Sound" onClick="DHTMLSound('success.wav')"></form>| Compatibility: Internet Explorer, Mozilla/Firefox, Opera. |
7. Using a Java Applet
Java applets are not supported by every browser/platform, and unfortunately there are different versions of Java which make widespread compatibility quite difficult for high-quality audio. Java versions 1.0 and 1.1 are supported by the Microsoft Java Virtual Machine (Java VM) found in Internet Explorer. Later Java versions require a Plug-In to be installed. Mozilla requires the plug-in in any case.
Java 1.0/1.1 Applet
Here is a simple Java applet that you are welcome to use to replay audio through the Microsoft Java VM. The
applet below displays a button which when pressed plays a sound. You can choose the button size and an image as shown. However in Java 1.0/1.1 the sound quality is limited to 8000 samples/sec μ-law encoded audio, which is rather poor for anything but speech. You can convert audio files to this format using
SOX (sox inp.wav -r 8000 -U out.au).
<applet code=AudioButton.class name=Audio1 width=40 height=40> <param name=image value="play.gif"> <param name=audio value="success.au"> <param name=bkgray value="128"></applet>
You'll also need to
download the AudioButton.class file.
| Compatibility: Internet Explorer, Mozilla/Firefox, Opera. |
Java 1.2 and later Applet
The same applet also runs under the Java 1.2 environment, but without the limitation on audio format. This means you can replay the full quality audio file. Java 1.2 is only supported through a plug-in. To install the latest version, go to
http://java.sun.com/products/plugin/. This plug-in is required for Mozilla, Firefox or Opera.
<applet code=AudioButton.class name=Audio1 width=40 height=40> <param name=image value="play.gif"> <param name=audio value="success.wav"> <param name=bkgray value="128"></applet>
You'll also need to
download the AudioButton.class file.
| Compatibility: Internet Explorer, Mozilla/Firefox, Opera |
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=243059