Barbarian Meets Coding
barbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

3 minutes read

HTML5 Audio and Video

HTML5 provides two new elements <audio> and <video> that allow you to embed audio and video respectively in your website.

Audio

The <audio> element in its simples for looks like this:

<audio src="song.ogg"></audio>

It does support more options/attributes:

  • autoplay: if provided the audio starts playing as soon as possible
  • loop: audio loops infinitely
  • controls: audio element comes with controls
  • muted: attribute that represents whether or not the audio is initially muted
  • src: audio source
  • volume: audio volume
  • preload: hint preload options to the browser to improve user experience.

Other examples:


<!-- simple audio element -->
<audio src="song.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

<!-- audio element with lyrics -->
<audio src="song.ogg">
  <!-- this are song captions in different languages -->
  <track kind="captions" src="song.en.vtt" srclang="en" label="English">
  <track kind="captions" src="song.es.vtt" srclang="es" label="Spanish">
</audio>

<!-- audio element with songs in multiple formats -->
<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="song.wav" type="audio/wav">
  <source src="song.mp3" type="audio/mp3">
  <source src="song.ogg" type="audio/ogg">
</audio>

Additionally you can provide your own custom controls for the audio by handling the audio events and audio javascript apis.

Video

In a similar way than the <audio> element, the <video> element allows to embed video within a web application or website.

The simples way to use a <video> element is:

<!-- Simple video example -->
<video src="videofile.ogg"></video>

It supports similiar options to the audio element. Other examples are:

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg" controls>
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
<

You can select a specific spot to play media by using the currenTime property and the seekable property that specifies piece of audio/video that is available in the browser.


var $audio = document.getElementById('mediaElementID');

// range of media available to select
audio.seekable.start();
audio.seekable.end(); 

// select a specific time in a media file
audio.currentTime = 150; // Go 150 seconds into the song

// the played property lets you access the part 
// of the media that has been played
audio.played.end();      // number of seconds played so far

References

Jaime González García

Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.Jaime González García