Playing Audio through The JavaScript Audio API

JavaScript Audio-API

The Audio API does not work the same way as Playing audio in HTML.

The Audio API is a new browser API which provides a powerful and versatile interface for controlling audio output; allowing to choose audio sources, add effects, create audio visualizations, apply spatial effects and more.

A new AudioContext() is the beginning and end of our audio dive. Basically to produce a sound using the Web Audio API, create one or more sound sources and connect them to the sound destination provided by the AudioContext instance. This connection doesn't need to be direct, and can go through any number of intermediate AudioNodes which act as processing modules for the audio signal.

A single instance of AudioContext can support multiple sound outputs and complex audio graphs, so we will only need one of these for each audio application we create. Many of the interesting Web Audio API functions such as creating AudioNodes and decoding audio file data are methods of AudioContext.

To begin we need the audio in a buffer. Use XHR to load an audio track then decode it and stick it into a buffer.

var audioCtx = new AudioContext()
var request = new XMLHttpRequest()
request.open('GET', 'play_me.mp3')
request.responseType = 'arraybuffer'
// loading the mp3 with an ajax call (asynchronous)
request.onload = function() {
  // decoding it (asynchronous)
  audioCtx.decodeAudioData(request.response, function(beatportBuffer) {

    // here we have the buffer (beatportBuffer) to work with

  }, function(e){alert('Error while decoding audio' + e.err)} )
}
request.send()

In ES6

const audioCtx = new AudioContext()
let source

var request = new XMLHttpRequest()
request.open('GET', 'play_me.mp3')
request.responseType = 'arraybuffer'
// loading the mp3 with an ajax call (asynchronous)
request.onload = function() {
  // decoding it (asynchronous)
    audioCtx.decodeAudioData(request.response)
      .then(function(beatportBuffer) {

      // here we have the buffer (beatportBuffer) to work with

    })
        .catch(e => alert('Error while decoding audio: ' + e.err))
}
request.send()

playing the buffer

var source = audioCtx.createBufferSource()
source.buffer = beatportBuffer
source.connect(audioCtx.destination)

// staring at `0` => the beginning; offset in ms
source.start(0)

source.stop()


// !!! `start()` will now fail, we have to create a new source,
// potentially from the same buffer, to play it again
source.start(0)

// alternatively
source.loop = true

gain control

gain is the sound level; it goes from 0 to 1.

var source = audioCtx.createBufferSource()
source.buffer = this.beatportBuffer

var gainFilter = audioCtx.createGain()
gainFilter.gain.value = 0.5 // half as loud
source.connect(gainFilter)
gainFilter.connect(audioCtx.destination)

source.start(0)

frequency control

detune changes the frequency of a sound. It goes in cents; to go a half tone up add 100

// another way of generating a sound; this could also be a buffer from a previous example
var oscillator = audioCtx.createOscillator()

oscillator.type = 'square'
oscillator.frequency.value = 3000 // value in hertz
oscillator.detune.value = 100 // value in cents

oscillator.start(0)

Reference

No known

History Mar 23, 2019