Custom controls using Java Script

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.

MethodsDescription
canplaytype(type)Whether the browser can play a particular type of media
currentTimeThe current playback position denoted in seconds
durationThe 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.

Notes
when creating your own custom controls, drop the controls Boolean attribute from audio.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #