Build an HTML5 Audio Player

Build an HTML5 Audio Player

Before HTML5 arrived on the scene, there was no standard for playing audio files on a web page. Therefore, the only way to play audio files was to use a plug-in such as flash. Now, the HTML5

Using the

Let’s begin by taking a look at a typical

<audio controls="controls" id="audio_player">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Nested within the

The

• autoplay – This can be set to “true” or left blank (“”) to define whether the track should automatically play as soon as the page has loaded.
• controls – As seen in the example above, this defines whether the native controls such as ‘play, pause’ etc should be shown.
• loop – This can be set to “loop” and defines whether the track should play again once it has finished.
• preload – This can be set to “auto” (which describes whether the file should load as soon as the page loads), “metadata” (which describes whether only the metadata, track title etc. should be loaded), “none” (which dictates that the browser should not load the file when the page loads).
• src – The URL of the video to embed. This is optional as the element may be placed within the

Notice how the appearance of the audio control can vary wildly! The first is the Chrome version, while the second is what you get in Internet Explorer:

Controlling Playback via the HTMLAudioElement Interface

The HTMLMediaElement JavaScript interface exposes the properties and methods required to support basic media-related capabilities that are common to both audio and video. Hence, the HTMLVideoElement and HTMLAudioElement elements both inherit this interface.

The HTMLMediaElement interface is meant to be utilized in conjunction with your own HTML player in such a way that mimics the

<div id="audioplayer" style="border: 1px solid black">
  <button id="pButton" class="play" onclick="playAudio()"></button>
    <div id="timeline">
    <div id="playhead"></div>
  </div>
  <div id="volume_control">
    <label id="rngVolume_label" for="rngVolume">Volume:</label>
    <input type="range" onchange="setVolume(this.value)" id="rngVolume" min="0" max="1" step="0.01" value="1">
  </div>
</div>

Here’s the CSS that styles our player:

#audioplayer{
  width: 480px;
  height: 75px;
  margin: 50px auto auto auto;
  border: solid;
  text-align:center;
  background-color: rgba(5, 173, 13, 0.49);
}

#pButton{
  height:60px;
  width: 60px;
  border: none;
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  outline:none;
}

.play{background: url('Play_button.png') ;}
.pause{background: url('Pause_button.png') ;}

#timeline{
  width: 400px;
  height: 20px;
  margin-top: 20px;
  float: left;
  border-radius: 15px;
  border: black 1px solid;
  display: block;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
}

#playhead{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: rgba(0, 0, 0,1);
}

#volume_control{
  margin:auto;
  width:50%;
}

#rngVolume_label{
  vertical-align:middle;
}

#rngVolume{
  margin-top: 8px;vertical-align:middle;
}

The above code produces the following player:

Playing and Pausing the Music

You’ll notice in the HTML markup above that the play button’s onclick event triggers our playAudio() function. In it, we can check whether or not the player is currently paused. If it is, we call the audio element’s play() method; otherwise, we call pause(). There is also some CSS class toggling done in order to change the button:

// variable to store HTML5 audio element
var music = document.getElementById('audio_player');
 
function playAudio() {
  if (music.paused) {
    music.play();
    pButton.className = "";
    pButton.className = "pause";
  } else {
    music.pause();
    pButton.className = "";
    pButton.className = "play";
  }
}

Setting the Volume Programmatically

Much in the same way that the play button’s onclick event triggers our playAudio() function, the range element’s onchange event causes the setVolume() function to execute. It simply sets the audio element’s volume property to that of the range element, which was declared to go from 0 to one with 0.1 increments:

function setVolume(volume) {
   music.volume = volume;
}

Conclusion

In today’s tutorial we learned how to build a simple audio player using nothing but HTML, CSS, and JavaScript. In the next instalment, we’ll add some more advanced functionality, such as moving the current point in the song via the playhead and iterating over a playlist.