HTML5 Audio Element

Using #HTML5 you can embed audio on your website. You can include several audio sources to help ensure the browser will be able to play your content. Swipe through to see available properties and events emitted from playing audio.

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  <source src="sample.ogg" type="audio/ogg">
</audio>

Will output this:

Audio courtesy of techslides.com

control-options

Using the events emitted by the audio element we can know when certain actions have occurred.

<span class="js-status">Audio is not playing</span>
<audio controls id="js-audio">
  <source src="sample.mp3" type="audio/mpeg">
  <source src="sample.ogg" type="audio/ogg">
</audio>
<script>
const audioEl = document.getElementById('js-audio');
const status = document.querySelector('.js-status');
const PLAYING = 'Audio is playing';
const NOT_PLAYING = 'Audio is not playing';

audioEl.addEventListener('play', (event) => {
    status.innerHTML = PLAYING;
});
audioEl.addEventListener('pause', (event) => {
    status.innerHTML = NOT_PLAYING;
});
audioEl.addEventListener('ended', (event) => {
    status.innerHTML = NOT_PLAYING;
});
</script>

Audio is not playing

Read more about media events. This Stack Overflow answer might be useful in case you have issues with the setVolume event on mobile android or Safari.