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>
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.
audio.play();
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;
audio.play();
You may also loop the audio with the .loop property.
audio.loop = true;
audio.play();
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);
source.connect(audioCtx.destination);
Finally, play the sound.
audio.play();
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.
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);
};
request.send();
}
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;
source.connect(audioCtx.destination);
source.start();
};
Download the files used in the above examples by right-clicking the links, and then selecting "Save Link As...".