Barbarian Meets Coding Titlebarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

HTML5 Audio and Video

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

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, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García