Audio in JavaScript

From the platform up: an element that plays a file, a graph that shapes the sound, the bytes that save it, the same in Node, then a library that does it in one chain. Every figure runs in this page.

1new Audio()

new Audio(url) makes an <audio> element without putting it in the page, and starts loading the file.¹ It plays and pauses. currentTime is where it is, in seconds; volume runs from 0 to 1 and throws IndexSizeError outside it; playbackRate changes the speed and keeps the pitch. What happens arrives as events: loadedmetadata once the duration is known, timeupdate every 15 to 250 ms while it plays, pause, ended, error.¹

const audio = new Audio('speech.mp3')

play.onclick = () => audio.paused ? audio.play() : audio.pause()
seek.oninput = () => audio.currentTime = seek.value
volume.oninput = () => audio.volume = volume.value
speed.onclick = e => audio.playbackRate = e.target.value

audio.onloadedmetadata = () => seek.max = audio.duration
audio.ontimeupdate = () => seek.value = audio.currentTime
audio.onplay = audio.onpause = () =>
  play.textContent = audio.paused ? 'Play' : 'Pause'

play() returns a promise. Until the reader clicks, taps or presses a key on the site, a browser may refuse sound and reject the promise with NotAllowedError; muted playback is allowed.^1,3 Chrome also allows sound on sites the reader often plays media on (desktop) or has added to the home screen (mobile).² So start sound from a click, and on a rejection show a play button.

On iOS, volume stays 1: the phone's buttons set the level.⁴

An element plays a file as it is. To change the sound, start it at an exact moment or read its samples, there is the Web Audio API.

2Web Audio: a graph of nodes

An AudioContext runs a graph: sources, through nodes that change the sound, into destination, the speakers. It renders 128 samples at a time, on a thread of its own.⁵ Like play(), a context made before any click starts suspended; call resume() from one.^2,5

An equalizer is three filters in a row, each a BiquadFilterNode. A low shelf lifts or cuts everything below its frequency; a peaking filter, a band around it, as wide as Q makes it; a high shelf, everything above. gain is in decibels, and the shelves ignore Q. The spec's formulas follow the Audio EQ Cookbook.^5,6 An AnalyserNode shows what comes out: an FFT of its last fftSize samples (a power of two, 32 to 32,768), Blackman-windowed, in decibels.⁵

const ctx = new AudioContext()
const bass = new BiquadFilterNode(ctx, { type: 'lowshelf', frequency: 200 })
const mid = new BiquadFilterNode(ctx, { type: 'peaking', frequency: 1000, Q: 1 })
const treble = new BiquadFilterNode(ctx, { type: 'highshelf', frequency: 4000 })
const analyser = new AnalyserNode(ctx, { fftSize: 4096 })
const level = new GainNode(ctx, { gain: 0.3 })
bass.connect(mid).connect(treble).connect(analyser)
  .connect(level).connect(ctx.destination)

let source
play.onclick = () => {
  ctx.resume()                                     // allowed: this is a click
  source = new AudioBufferSourceNode(ctx, { buffer, loop: true })
  source.connect(bass)
  source.start()
}
stop.onclick = () => source.stop()
bassSlider.oninput = () => bass.gain.value = bassSlider.value   // dB

const db = new Float32Array(analyser.frequencyBinCount)
analyser.getFloatFrequencyData(db)                 // each frame: the spectrum, dB a bin

A source node plays once: a second start() throws InvalidStateError, so each Play makes a new one.⁵ To equalize the player from step 1 instead, route its element through the same filters: ctx.createMediaElementSource(audio).connect(bass).

3Files in, files out

decodeAudioData() turns a file's bytes into an AudioBuffer: each channel an array of 32-bit floats, resampled to the context's rate.⁵ The browser decides which formats it reads.

const bytes = await (await fetch('song.mp3')).arrayBuffer()
const buffer = await ctx.decodeAudioData(bytes)
buffer.getChannelData(0)                           // Float32Array: the first channel

Here is what yours reads, and records. Six files, each the same 50 ms tone, 2,205 samples at 44.1 kHz:

Decoded, sound is large. An hour of stereo at 48 kHz is 3,600 × 48,000 × 2 floats of 4 bytes: 1.38 GB. The same hour as a 128 kbps MP3 is 57.6 MB, 24 times less. decodeAudioData takes a whole file at once; a long recording needs a decoder that works in pieces, such as WebCodecs' AudioDecoder.¹⁰

Web Audio has no encoder. MediaRecorder records a stream as it plays, in real time, into a format the browser picks: the table's last column.⁷ In October 2026 Playwright's Chromium, Firefox and WebKit each offered Opus in WebM, Firefox also Opus in Ogg, Chromium and WebKit AAC in MP4. None offered WAV, MP3 or FLAC. Chromium also takes audio/webm;codecs=pcm: uncompressed samples, in a WebM container.

WAV is plain enough to write by hand: a 44-byte header, then the samples as 16-bit integers.⁸ These lines are the whole encoder:

// An AudioBuffer as a WAV file: a 44-byte header, then the samples as 16-bit integers
export function wav(buffer) {
  const { numberOfChannels: k, sampleRate: rate, length: n } = buffer
  const bytes = n * k * 2, view = new DataView(new ArrayBuffer(44 + bytes))
  const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt()))
  const u32 = (at, v) => view.setUint32(at, v, true)
  const u16 = (at, v) => view.setUint16(at, v, true)
  text(0, 'RIFF'); u32(4, 36 + bytes); text(8, 'WAVE')
  text(12, 'fmt '); u32(16, 16); u16(20, 1)         // 16 bytes of format; 1: integer PCM
  u16(22, k); u32(24, rate); u32(28, rate * k * 2)  // channels, rate, bytes a second
  u16(32, k * 2); u16(34, 16)                       // bytes a frame, bits a sample
  text(36, 'data'); u32(40, bytes)
  const channels = Array.from({ length: k }, (_, c) => buffer.getChannelData(c))
  for (let i = 0, at = 44; i < n; i++) for (const x of channels) {   // interleaved
    view.setInt16(at, Math.round(Math.max(-1, Math.min(1, x[i])) * 32767), true)
    at += 2
  }
  return new Uint8Array(view.buffer)
}

To save the equalized sound, render the graph without speakers. An OfflineAudioContext renders as fast as it can, into an AudioBuffer. A node belongs to the context that made it, so the render makes its own filters:⁵

const offline = new OfflineAudioContext(1, buffer.length, buffer.sampleRate)
const source = new AudioBufferSourceNode(offline, { buffer })
const bass = new BiquadFilterNode(offline, { type: 'lowshelf', frequency: 200, gain: 6 })
// … mid and treble, made on offline too
source.connect(bass).connect(mid).connect(treble).connect(offline.destination)
source.start()
const rendered = await offline.startRendering()
link.href = URL.createObjectURL(new Blob([wav(rendered)], { type: 'audio/wav' }))

4Node.js

Node has no AudioContext, no decoder and no way to the speakers: fs reads a file's bytes, and there it stops.¹¹ Packages add the rest. web-audio-api is the W3C API in plain JavaScript, for Node, Deno and Bun. Under its own Node runner it passes all 4,322 subtests of the Web Platform Tests it carries; that proves the corpus under that runner, not every browser behaviour, and it runs worklets on the main thread.¹² node-web-audio-api, from IRCAM, runs its DSP in Rust, prebuilt for Windows, macOS and Linux.¹³

With web-audio-api's polyfill, the Web Audio lines from step 3 run in Node as they are; only the way the file comes in and goes out changes. From an MP3 to a WAV file:

import 'web-audio-api/polyfill'         // AudioContext and its nodes, as globals
import { readFileSync, writeFileSync } from 'node:fs'
import { wav } from './wav.js'          // the lines above

const file = readFileSync('in.mp3')
const sound = await new OfflineAudioContext(1, 1, 44100).decodeAudioData(file)
const ctx = new OfflineAudioContext(sound.numberOfChannels, sound.length, sound.sampleRate)
const source = new AudioBufferSourceNode(ctx, { buffer: sound })
const bass = new BiquadFilterNode(ctx, { type: 'lowshelf', frequency: 200, gain: 6 })
source.connect(bass).connect(ctx.destination)
source.start()
writeFileSync('out.wav', wav(await ctx.startRendering()))

Speakers and microphones need native code: web-audio-api reaches them through @audio/speaker and @audio/mic.¹² Sébastien Piquemal started web-audio-api in 2013; it is maintained at audiojs, which also makes this page.

5A library

Each step above needed its own API. audio does them in one chain, the same in a page and in Node. It decodes with its own WebAssembly codecs (WAV, MP3, FLAC, Ogg, Opus, AAC and more), edits without touching the source, filters, measures, plays, and encodes WAV, MP3, FLAC, Opus and Ogg.¹⁴ It is made at audiojs too. Below, its code runs live: edit it and hear the change.

audio('rhodes.wav')
  .lowshelf(200, 6)
  .eq(1000, -3, 1)
  .highshelf(4000, 3)
  .normalize(-1)

audio('handpan.wav')
  .trim()
  .normalize(-1)
  .fade(0.1, 1)

audio.from(t => [261.63, 329.63, 392]
  .reduce((s, f) => s + 0.15 * Math.sin(2 * Math.PI * f * t), 0), { d: 2 })
  .fade(0.01, 1)

In Node, the same chain reads and writes files:

import audio from 'audio'                          // npm i audio

const a = audio('in.mp3')
  .lowshelf(200, 6).eq(1000, -3, 1).highshelf(4000, 3)
  .trim().normalize(-1).fade(0.1, 0.5)
await a.save('out.mp3')

In a page, import it through a bundler or from https://esm.sh/audio: a.play() plays it, await a.encode('mp3') gives the file's bytes. Code written for new Audio() runs in Node after import 'audio/polyfill'.¹⁴ The playground is an audio editor built on it, each edit a line of this code.

6Which tool for which job

Versions, licences and release dates are npm's on 14 October 2026.¹⁶ Two of these, audio and web-audio-api, are made at audiojs.

Came for kolber's audio.js? Anthony Kolber's 2010 drop-in player for the <audio> tag lives at github.com/kolber/audiojs. This site is a different project.

1. WHATWG, HTML Living Standard, Media elements: Audio(), timeupdate every 15 to 250 ms, volume 0 to 1, preservesPitch, play() rejected with NotAllowedError.
2. Chrome for Developers, Autoplay policy in Chrome: media elements from Chrome 66, Web Audio from Chrome 71.
3. MDN, Autoplay guide for media and Web Audio APIs.
4. MDN, HTMLMediaElement: volume, browser compatibility, Safari on iOS; Apple, Safari HTML5 Audio and Video Guide, iOS-Specific Considerations (2012).
5. W3C, Web Audio API, Recommendation, 17 June 2021: render quantum, rendering thread, AudioBuffer, decodeAudioData, BiquadFilterNode, AnalyserNode, OfflineAudioContext. Its successor, Web Audio API 1.1, is a Working Draft (22 September 2026).
6. R. Bristow-Johnson, Audio EQ Cookbook, W3C Group Note (2021).
7. W3C, MediaStream Recording: MediaRecorder, isTypeSupported().
8. IBM & Microsoft, Multimedia Programming Interface and Data Specifications 1.0 (1991): RIFF WAVE; summarised by P. Kabal, Audio File Format Specifications: WAVE, McGill University.
9. G. Bouvigne, Mp3 Info Tag rev 1 specifications: the LAME tag's encoder delay and padding.
10. W3C, WebCodecs: AudioDecoder.
11. Node.js, Global objects and File system.
12. audiojs, web-audio-api 1.6.0: README; site-metrics.json, 4,322 subtests passing, 0 failing; test/WPT.md, what that count does and does not prove.
13. IRCAM, node-web-audio-api: README, supported platforms.
14. audiojs, audio 2.14.0: README.
15. NASA, Houston We Have a Podcast, episode 434: Artemis III Training. Public domain; the first two minutes.
16. npm registry (npm view <name> version license time) and GitHub, read 14 October 2026.