phonograph
🔊 Stream large audio files without the dreaded 'DOMException: play() can only be initiated by a user gesture' error.
Read Phonograph.js: Tolerable mobile web audio for more background.
The problem
You want to play some audio in your web app, but you don't want to use an <audio>
element because mobile browser makers – in their infinite wisdom – have decided that playback must be initiated by a 'user gesture'.
You've read about the Web Audio API, in particular the AudioBuffer, which seems like it might be useful except for the bit that says it's 'designed to hold small audio snippets, typically less than 45s'. And they're not kidding about that – not only do you have to fetch the entire file before you can play it, but you have to have enough spare RAM to store the uncompressed PCM data (aka .wav – typically ten times the size of the source .mp3) otherwise the browser will crash instantly.
The solution
By breaking up the data into small chunks, we can use decodeAudioData
to create a few seconds of PCM data at a time, making it very unlikely that we'll crash the browser. We can then play a short chunk, swapping it out for the next chunk (with a bit of overlap to avoid audible glitches) when ready.
By using the fetch()
API, we can stream the data rather than waiting for the whole file to load. That's so fetch!
(Note: in Safari and Edge, it falls back to regular old XHR – no streaming, but we still get chunking. Similarly with Firefox, which implements fetch()
but not the streaming part. Hopefully those browsers will catch up soon.)
Installation
npm i phonograph
...or download from npmcdn.com/phonograph.
Usage
; const clip = url: 'some-file.mp3' ; clip;
API
; context = ;// returns the AudioContext shared by all clips. Saves you having// to create your own. /* ------------------------ *//* INSTANTIATION *//* ------------------------ */ clip = url: 'some-file.mp3' // Required volume: 05 // Optional (default 1); /* ------------------------ *//* METHODS *//* ------------------------ */ promise = clip;// Returns a Promise that resolves on 'canplaythrough' event (see// below) or (if `complete === true`) on 'load' event. The `complete`// parameter is optional and defaults to `false` clone = clip;// Returns a lightweight clone of the original clip, which can// be played independently but shares audio data with the original. clip;// Connects to a specific AudioNode. All clips are initially// connected to the default AudioContext's `destination` –// if you connect to another node then it will disconnect// from the default. `output` and `input` are optional. See// https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/connect(AudioNode) clip;// Disconnects from the `destination` (if specified). All// parameters are optional – see// https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/disconnect listener = clip;// Listen for an event (see below) listener;// Equivalent to `clip.off( eventName, callback )` clip;// Stop listening for the specified event listener = clip;// Listen for an event, but stop listening once it's happened clip;// Starts playing the clip. Returns a promise that resolves// once the clip has finished playing (for a looping clip,// this is never!) or rejects on clip.dispose() or if// there's a load/playback error clip;// Stops playing the clip clip;// Unloads the clip, freeing up memory /* ------------------------ *//* PROPERTIES *//* ------------------------ */ clipbuffered;// How many bytes have been buffered clipcanplaythrough;// Whether or not Phonograph estimates that the clip can be played// all the way through (i.e. all the data will download before the// end is reached) clipcurrentTime;// The position of the 'playhead', in seconds clipduration;// Duration of the audio, in seconds. Returns `null` if the// clip has not yet loaded. Read-only clipended;// Whether or not the clip has ended following the most recent play() cliplength;// The size of the clip in bytes cliploaded;// Whether the clip has finished fetching data cliploop;// If `true`, the clip will restart once it finishes clipvolume;// Volume between 0 (silent) and 1 (max) /* ------------------------ *//* EVENTS *//* ------------------------ */ clip; clip; clip; clip; clip; clip; clip; clip; clip;
Caveats and limitations
- No automated tests. I have no idea how you would test something like this.
- Firefox doesn't want to decode mp3 files. May have to fall back to
<audio>
andMediaElementSourceNode
in FF.
License
MIT