FREELessons: 11Length: 57 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 A Brief History of Audio on the Web

In this lesson, we’ll take a look at the old ways of making sound in the browser and also at the more modern audio element. I’ll discuss some of the limitations of these and tell you why the Web Audio API fills a need.

Related Links

1.2 A Brief History of Audio on the Web

So audio on the web isn't a new thing. We've been able to play sound in the browser in different ways for around 20 years now. When Internet Explorer 2 was released in 1995 it came with support for a tag Microsoft invented called bgsound. Though I personally believe bgsound was invented for the sole purpose of annoying users by automatically playing some cheesy music in the background while they tried to read this text scrolling by on a marquee tag. But it did try to enrich the web, so we can't fault them for that. There was no visual element for the bgsound tag. In fact, I believe you even had to put it in the head element. So Internet Explorer's rival at the time, Netscape, thought they had a better solution, the embed tag. The embed tag was a lot more powerful than bgsound, as it allowed multimedia content to be embedded directly into a page. In this example, you would hear the MIDI file being played in the browser. But the actual decoding and playing sound would be handled by a small application or plugin installed on the user's computer. The ability to use plugins on the web quickly hailed the arrival of Flash in 1996. Flash allowed users to add audio to their webpage, not only in a way that would be consistent across all browsers, but one that allowed sound to be played in a much more precise manner. Instead of just playing a piece of music in the background, using Flash meant that you could repeatedly play a sound exactly when you wanted. This was ideal for games which rely on split second precision. Flash remained immensely popular until the launch of the iPhone 11 years later. Apple announced that it wouldn't support the Flash plugin because Flash was a closed platform, meaning that it wasn't fair that one company, Adobe, was in charge of its future, and because of this, it didn't support the idea of an open web for everyone. They also cited the fact that Flash crashed a lot and it was bad for battery life. Luckily, by that time, browsers had begun supporting the native audio element. This tag allows audio to be played directly in the browser without plugins and without one company in charge of its future. The audio tag is extremely simple to use. All we need to do is create the tag, add our audio file to the source attributes and tell it that we want to be able to see some playback controls. Let's refresh the page to see what I've got. There you go, simple. However, there are a few things we can't do with this lovely little tag, some of which we could do with Flash, such as precision timing or playing a single sound repeatedly without stopping and starting it. So that's where we are. We need to use something more powerful. We need a way of being able to load and manipulate sound files without using plugins. And this is what we're going to talk about in the next lesson, the Web Audio API.

Back to the top