Playing Audio & Video on the Web

Nigel B. Peck
Jan 22 · 5 min read

Getting to know the media playback options available in web browsers.

Media playback is well supported in web browsers. The <audio> and <video> elements are backed by JavaScript interfaces offering full control.

This article covers the essential features, with a comprehensive set of links to learn more (provided at the end).

Introduction

Media is included on web pages using the <audio> and <video> elements. Behaviour is controlled using the HTMLAudioElement and HTMLVideoElement interfaces.

It’s not necessary to control playback yourself; the browser can provide controls to the user. They vary between browsers and offer no options for customisation.

Most of the features for playing back audio and video work in the same way and won’t be discussed separately. Some features are specific to one type of media and I’ll point this out when it occurs.

Audio and Video Elements

Let’s start by taking a look at the options available for <audio> and <video> elements.

Media Source

The first thing you’ll want to do is define the media source. This is done using <source> elements. Providing multiple sources is helpful; the browser will use the first it can play.


<audio>
<source src="podcast.opus" type="audio/ogg; codecs=opus">
<source src="podcast.ogg" type="audio/ogg; codecs=vorbis">
<source src="podcast.mp3" type="audio/mpeg">
</audio>

: There is a src attribute for <audio> and <video> that can be used as an alternative to <source> elements. Multiple sources are not supported.

: It’s helpful to provide a type for each <source> as this helps the browser know if it’s able to use the source without having to download the file.

Initial Playback State

The muted and loop attributes are used to control the initial playback state. Both are off by default.

muted: media will be silenced when loaded and nothing will be heard.

loop: when the media reaches the end it will seek to the beginning.


<audio muted loop>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
</audio>

: If you are considering using so media will start playing when loaded: it can be done but is not generally recommended. See the autoplay guide in the “Learn More” section for more information.

Browser Controls

For simple cases the browser can provide playback controls. These differ between browsers and cannot be customised. The controls attribute is used to enable them.


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

Video Display Area

Video has special attributes to control the display area. These are height, width and poster.

height: height of the video display area in pixels.

width: width of the video display area in pixels.

poster: URL for a poster image to be displayed until the video is first played.


<video width="250" poster="episode-poster.png">
<source src="episode.mp4" type="video/mp4">
<source src="episode.ogv" type="video/ogg">
<source src="episode.avi" type="video/avi">
</video>

Fallback Content

Fallback content is easy to provide and placed inside the element. It will be displayed like any other content if the media can’t be played.


<audio muted loop>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
<p>The podcast could not be played.</p>
</audio>

Perhaps because the source types aren’t supported or even the type of media itself which could happen in a specialist browser.

Controlling Media Playback with JavaScript

JavaScript interfaces are used to control playback enabling a customised experience with fine-grained control.

: There are some great libraries available to help with this but we’re looking at how things work under the hood so we’ll not cover those here.

JavaScript Interfaces

When you are working with <audio> and <video> elements in JavaScript you will be using the HTMLAudioElement and HTMLVideoElement interfaces.

However most of the functionality is shared and provided by the HTMLMediaElement interface. Let’s take a closer look.

Audio and Video Playback in Web Browsers

The features are the height and width of the video display area and the poster image to be displayed until the video is played.

The only feature is the Audio() constructor, used to create HTMLAudioElement objects for playing audio without needing to have an element on the page.

We can explore the structure of the interfaces in the browser console.

Exploring the <audio> and <video> element interfaces in the browser console.

Controlling Playback

Playback itself is controlled using the play() and pause() methods combined with the currentTime property which is the current timepoint of playback.


audio.play();
audio.pause();
audio.currentTime = 3;

audio.pause();
audio.currentTime = 0;

: See the “Learn More” section for a tutorial covering the full set of controls.

Playback State

As with the initial playback state properties are provided for loop and muted.


audio.loop = false;

audio.muted = false;

Unlike the initial playback state, extra options are provided for volume, whether playback is paused and the playbackRate.

volume: audio volume, from 0.0 (silent) to 1.0 (loudest).

paused: a read-only boolean showing if the media is paused.

playbackRate: the rate at which the media is played back.


audio.volume = 1.0;

if (audio.paused) audio.playbackRate = 1.0;

Video Display Area

The video display area is controlled using properties of the same name as the attributes on the <video> element: height, width and poster.


video.width = 200;

video.poster = 'episode-poster-alt.png';

Playing Back Audio Purely from JavaScript

It’s not necessary to create an <audio> element to play audio. The Audio() constructor allows you to create an HTMLAudioElement object without having an associated <audio> element on the page.

const audio = new Audio('podcast.mp3');

: If you provide a URL to the Audio() constructor (as in the example) it will start downloading immediately without waiting to be played.

Learn More

There is a lot more to study than we had time for in this brief introduction. MDN Web Docs provides comprehensive coverage.

Tutorials

Guides

Media Elements

Media Interfaces

Specialist Interest

The Heart of Software

New for 2020.

Nigel B. Peck

Written by

Writing about software engineering, learning, mentoring and similar fayre. Mentoring & consultancy via nigelbpeck.com.

The Heart of Software

New for 2020. Fresh perspectives on the programming profession. Submissions welcome.

More From Medium

More from The Heart of Software

More from The Heart of Software

More from The Heart of Software

More from The Heart of Software

How to Find a Good Boss

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade