Javascript with Audio

In this tutorial, we will look at how to include and manipulate audio in HTML and javascript. Audio files are included in HTML like below:

    <source src="audio/1.mp3" type="audio/mpeg">

Types of audio formats:

  • mp3: type="audio/mpeg"
  • wav: type="audio/wav"
  • ogg: type="audio/ogg"

Attributes of the audio tag are written inside of the opening tag of the <audio> element, as shown below.

<audio autoplay controls loop muted preload>
    <source src="audio/1.mp3" type="audio/mpeg">
  • autoplay: immediately play the audio file upload loading of the website
  • controls: show audio controls
  • loop: loop the playing of audio file
  • muted: start audio file on mute
  • preload: preload the audio file before playing

  • play()
  • pause()
<audio autoplay id="bgm">
    <source src="audio/1.mp3" type="audio/mpeg">
  • currentTime: Set or return playback position of audio (in seconds)
  • duration: Return duration of audio source (in seconds)
  • ended: Return (true or false) whether audio playback has ended
  • loop: Set or return whether audio is on loop
  • muted: Set or return whether audio is on mute
  • paused: Return whether audio is paused
  • playbackRate: Set or return speed of audio playback
  • played: Return whether audio has been played
  • src: Set or return audio source
  • volume: Set or return volume of audio

Below is a list of events to be used as HTML attributes for <audio> tag:

  • oncanplaythrough: fires when browser is ready to play the audio file all the way through without buffering
  • onended: fires when the audio file finishes playing
  • onpause: fires when the audio player is paused
  • onplay: fires when the audio player is set to play
  • onratechange: fires when the playback rate changes
  • onseeking: fires when the user is seaking to a new position of the audio playback
  • ontimeupdate: fires when the playback position changes (when the audio file is playing)
  • onvolumechange: fires when the volume of playback changes

Link to full reference of audio methods, properties and events.

Demo: Simple Audio Player

Click to view it as a full web page.


<audio onratechange="updateRate()" onvolumechange="updateVol()" ontimeupdate="updateTime()" id="bg" loop preload="auto">
    <source src="audio/1.mp3" type="audio/mpeg">
<div onclick="changeRate()" id="rateDiv"><h1 id="rateDisplay">Playback Rate:<br><span id="rateVal">1</span></h1></div>
<div onclick="changeVol()" id="volDiv"><h1 id="volDisplay">Volume:<br><span id="volVal">1</span></h1></div>
<div onclick="changeTime()" id="timeDiv"><h1 id="timeDisplay">Time:<br><span id="timeVal">0</span></h1></div>
<div id="player">
    <div id="pb-time"></div>
    <div id="play" onclick="playAudio()"><span id="play-text">PLAY</span></div>
    <div id="pause" onclick="pauseAudio()"><span id="pause-text">PAUSE</span></div>
    <div id="stop" onclick="stopAudio()"><span id="stop-text">STOP</span></div>


body, html{
    height: 100%;
    font-family: Helvetica, 'sans-serif';
    margin: 0;

#rateDiv, #volDiv, #timeDiv{
    width: calc(100% / 3);
    height: 100%;
    float: left;

    background-color: rgb(255, 0, 0);

    background-color: rgb(255, 255, 0);

    background-color: rgb(0, 0, 255);

    width: 100%;
    height: 12.5%;
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: lightyellow;
    text-align: center;

#play, #pause, #stop{
    display: inline-block;

#play-text, #pause-text, #stop-text{
    line-height: 12.5vh;
    font-size: 1.5em;

#play-text:hover, #pause-text:hover, #stop-text:hover{
    font-style: italic;
    font-weight: bold;
    background-color: black;
    color: white;

#play-text, #pause-text{
    margin-right: 2em;

    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;
    position: fixed;
    bottom: calc(12.5% - 12.5px);


var bg = document.getElementById('bg');

function playAudio() {;

function pauseAudio(){

function stopAudio() {
    bg.currentTime = 0;

function changeRate(){
    var rate = (event.clientY / window.innerHeight) * 4.75 + 0.25;
    bg.playbackRate = rate;

function changeVol(){
    var vol = event.clientY / window.innerHeight;
    bg.volume = vol;

function changeTime(){
    var time = (event.clientY / window.innerHeight) * bg.duration;
    bg.currentTime = time;

function updateRate(){
    document.getElementById('rateVal').innerHTML = bg.playbackRate;

    var blueVal = parseInt(bg.playbackRate * 51);
    document.getElementById('rateDiv').style.backgroundColor = "rgb(255, 0, " + blueVal + ")";

function updateVol(){
    document.getElementById('volVal').innerHTML = bg.volume;

    var redVal = parseInt(bg.volume * 255);
    document.getElementById('volDiv').style.backgroundColor = "rgb(" + redVal + ", 255, 0)";

function updateTime(){
    document.getElementById('timeVal').innerHTML = bg.currentTime;

    var greenVal = parseInt(bg.currentTime / bg.duration * 255);
    document.getElementById('timeDiv').style.backgroundColor = "rgb(0, " + greenVal + ", 255)";

    var leftVal = (bg.currentTime / bg.duration) * window.innerWidth;

    document.getElementById('pb-time').style.left = leftVal + "px";