HTML and CSS Reference
In-Depth Information
There is no stop method, but using the same approach as in the example above, stop
functionality can be mimicked by using the
pause();
method to return to the beginning
of the audio file via
currentTime
:
<audio>
<source src="audio.ogg">
<source src="audio.mp3">
</audio>
<button title="Play at 30 seconds" onclick="playAt(30);">30 seconds</button>
<button title="Stop Audio" onclick="stopAudio();">Stop Audio</button>
<script>
function playAt(seconds){
var audio = document.getElementsByTagName("audio")[0];
audio.currentTime = seconds;
audio.play();
}
function stopAudio(){
var audio = document.getElementsByTagName("audio")[0];
audio.currentTime = 0;
audio.pause();
}
</script>
Note that when creating your own custom controls, you drop the
controls
Boolean attribute from
audio
.
For more information on creating custom controls, see
Recipe 4.5
.
See Also
For a much less rudimentary approach to manipulating the audio playback with custom
controls, see Opera's “Everything You Need to Know About HTML5 Video and Audio”
4.3 Generating <audio> Using JavaScript
Problem
You want to generate real-time audio on your web page.
Solution
You can generate audio on the browser without the
src
attribute or
source
elements
by using methods defined by the Mozilla Audio Data API (
https://wiki.mozilla.org/Au
