The new web audio API defines a way to play audio right into the browser without the need for a single plugin. For a high level experience, we can simply add a few audio tags throughout our HTML page, and the browser takes care of displaying a player for the user to interact with and play, pause, stop, rewind, fast forward, and adjust the volume. Alternatively, we can use the JavaScript interface available, and either control the audio tags on the page with it, or achieve much more powerful and complex tasks.
One key detail to remember about browser support and the web audio API, is that different browsers support different file formats. When defining an audio tag, similar to an image tag, we specify the path to the source file. The difference is that with audio, we can specify multiple sources for the same file (but different formats), then the browser can choose the file it supports, or the best option it has, in case it supports multiple file formats. Currently there are three audio formats supported by all major browsers, namely .mp3, .wav, and .ogg. As of this writing, no single audio format is supported in all major browsers, which means that whenever we use the web audio API, we'll need at least two versions of each and every file we play through the API, if we wish to reach the greatest possible audience.
Finally, keep in mind that although we can (and should) specify multiple audio files per each audio element, each browser only downloads one of these files. This is a very handy (and obvious) feature because downloading multiple copies of the same file would be awfully inefficient and bandwidth heavy.
The simplest way to get started with the web audio API is with an inline HTML5 element. The code for it is as follows:
<audio> <source src="sound-file.mp3" type="audio/mpeg" /> <source src="sound-file.ogg" type="audio/ogg" /> </audio>
Adding the above snippet to a page will not result in anything visible. In order to add more control to the tag, including adding a player to the page so that the user can interact with it, we can choose from the elements associated with the tag. These attributes are as follows:
- autoplay: It starts playing the file right away as soon as the browser has downloaded it
- controls: It displays a visual player with buttons through which the user can control audio playback
- loop: It is used to continuously play the file indefinitely
- muted: It is used when audio output is muted
- preload: It specifies how the audio resource is to be preloaded by the browser
To achieve a similar result through JavaScript, we can create a DOM element of type audio, or instantiate a JavaScript object of type Audio. Adding the optional attributes can be done the same way we would to any other JavaScript object. Note that creating an instance of Audio has the exact same effect as creating a reference to a DOM element:
// Creating an audio file from a DOM element
var soundOne = document.createElement("audio");
soundOne.setAttribute("controls", "controls");
soundOneSource = document.createElement("source");
soundOneSource.setAttribute("src", "sound-file.mp3");
soundOneSource.setAttribute("type", "audio/mpeg");
soundOne.appendChild(soundOneSource);
document.body.appendChild(soundOne);
// Creating an audio file from Audio
var soundTwo = new Audio("sound-file.mp3");
soundTwo.setAttribute("controls", "controls");
document.body.appendChild(soundTwo);Although the JavaScript Audio object may seem easier to deal with, especially since it takes that awesome constructor argument that saves us a whole line of code, they both behave exactly the same, and can only be told apart at run time if you really want to be picky and distinguish them from each other. One small detail that you should know is that when we create that audio reference in JavaScript, it is not necessary to append it to the DOM in order to play the file.
However you decide to approach this setup step, once we have a reference to an audio object in JavaScript, we can control it with any one of the many events and attributes associated with the object. The audio objects are as follows:
- play(): It starts playing the file.
- pause(): It stops playing the file, and maintains the currentTime.
- paused: Is a Boolean representing the current play state.
- canPlayType: Is used to find out whether the browser supports a particular audio type.
- currentSrc: It returns the absolute path to the file currently assigned to the object.
- currentTime: It returns the current play position in seconds, as a floating point number.
- duration: It returns the total play time in seconds, as a floating point number.
- ended: Is a Boolean indicating whether the currentTime is equal to duration.
- readyState: It indicates the state of the download of the source file.
- volume: It indicates the current volume of the file, ranging from 0 to 1 both inclusive. This number is relative to the current system volume.