If you want more control that these basic attributes (autoplay and loop), you can create custom controls using Java Script.
audio and
video have attributes, events and methods you can manipulate with Java-Script.
| Methods | Description |
|---|
canplaytype(type) | Whether the browser can play a particular type of media |
currentTime | The current playback position denoted in seconds |
duration | The length of the audio file in seconds |
play() | Start playback at the current position |
pause() | Pause playback if the audio is actively playing |
Example
The following code allows the user to jump to specific time on a audio file.
snippet
<audio>
<source src="audio.ogg">
<source src="audio.mp3">
</audio>
<button title="Play at 30 seconds" onclick="playAt(30);">30 seconds</button>
<script>
function playAt(seconds) {
var audio = document.getElementsByTagName("audio")[0];
audio.currentTime = seconds;
audio.play();
}
</script>Example
There is no stop method. To stop use the pause method to to return to the beginning of the audio file via
currentTime.
Note
when creating your own custom controls, drop the controls Boolean attribute from audio.
