Loading and Playing Sound Files

Method 1: Raw HTML

The easiest way to load and play a sound file does not actually require any JavaScript at all. HTML includes the <audio></audio> tag, which has a src attribute that you can set to load any sound file you'd like. (Note that certain browsers can only play certain file types; you can find the compatibility table at the Mozilla Developer Network site.) The <audio></audio> tag contains a number of other useful attributes, like controls, autoplay, and loop.

<audio src="freejazz.wav" controls autoplay loop></audio>

Method 2: JavaScript

You may also load a sound file with JavaScript, with new Audio().

const audio = new Audio("freejazz.wav");

You may then play back the sound with the .play() method.


You may change the rate at which the sound file plays back with the .playbackRate property. A rate of 1 is normal speed; a rate of 2 is double speed; a rate of 0.5 is half speed, and a rate of -1 is backwards.

audio.playbackRate = 2;

You may also loop the audio with the .loop property.

audio.loop = true;

Method 3: Web Audio API (synchronous)

While playing a sound file with Web Audio API is a bit more cumbersome to set up, it ultimately gives you much more flexibility over the sound. Start by creating a context and an audio file.

const audioCtx = new AudioContext();
const audio = new Audio("freejazz.wav");

Then, attach the audio file to an AudioNode, and that AudioNode to the dac.

const source = audioCtx.createMediaElementSource(audio);

Finally, play the sound.


While in this example we're directly connecting the MediaElementSourceNode to the dac, the advantage of this method is that we can place intermediate AudioNodes in the middle of the signal chain. This can allow us to control volume, panning, reverb, delay, and so on.

Method 4: Web Audio API (asynchronous)

The previous method loads your audio file at the moment you load the webpage. While this method will suffice when loading a handful of audio files, it will significantly slow your computer if you want to load a whole bunch of audio files. So rather than load all of our audio files at once, we can instead load each audio file asynchronously, meaning that we will only grab it from the server when we explicitly ask for it.

In JavaScript, you can make asynchronous requests to the server with XMLHttpRequest. Often you'll hear this functionality described as AJAX, which is an abbreviation for "asynchronous JavaScript and XML". We want to construct a "GET" request, which simply copies data from the server.

Let's start by setting up our AudioContext, as well as a top-level variable to hold the data in the audio file.

const audioCtx = new AudioContext();
let buffer = null;

Now, let's make the "GET" request. The responseType tells the program that we're loading a sound file. The onload function is a callback function that runs once the file has been grabbed from the server. Here, we are simply taking the raw audio file, and storing it in our AudioNode.

const load = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "freejazz.wav");
  request.responseType = "arraybuffer";
  request.onload = function() {
    let undecodedAudio = request.response;
    audioCtx.decodeAudioData(undecodedAudio, (data) => buffer = data);

Now, we can play the sound file by creating an AudioNode, attaching our buffer to it, connecting it to the dac, and playing it.

const play = () => {
  const source = audioCtx.createBufferSource();
  source.buffer = buffer;


Download the files used in the above examples by right-clicking the links, and then selecting "Save Link As...".



  1. Choose a method above, and load and play a sound file of your choice. How is your code different when the sound file is not in the same folder as your HTML?
  2. Change the "Method 4" code so that it has three pairs of buttons to load and play three different sound files.