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:

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

Types of audio formats:

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

Attributes

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">
</audio>
                

• 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

Methods

• play()
• pause()

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

document.getElementById('bgm').play();
                

document.getElementById('bgm').pause();
                

Properties

• 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

Events

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.

HTML:

<audio onratechange="updateRate()" onvolumechange="updateVol()" ontimeupdate="updateTime()" id="bg" loop preload="auto">
    <source src="audio/1.mp3" type="audio/mpeg">
</audio>
<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>
</div>
                

CSS:

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

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

#rateDiv{
    background-color: rgb(255, 0, 0);
}

#volDiv{
    background-color: rgb(255, 255, 0);
}

#timeDiv{
    background-color: rgb(0, 0, 255);
}

#player{
    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;
}

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

Javascript:

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

function playAudio() {
    bg.play();
}

function pauseAudio(){
    bg.pause();
}

function stopAudio() {
    bg.pause();
    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";
}