Proton Player
A powerful, open-source audio engine in javascript for the mobile web. Now available on GitHub!
When Proton set out to build our promo pool platform, we had an important requirement: it must work on the mobile web and audio had to load super fast, without relying on a native app.
But on iOS and other webkit powered mobile browsers, audio playback was super slow in HTML5:
- When playing audio, the browser often would require loading the entire audio into memory before starting playback, sometimes taking minutes before playback began.
- We couldn’t preload audio for the next song, so playback would always be painfully slow, which is a dealbreaker when DJs want to quickly listen to tons of songs.
- If a listener came back to a song they’d already played, the browser would often request the audio all over again instead of quickly starting playback.
- On mobile, audio would only play when the user made a gesture (like clicking a play button). This makes it hard to skip ahead to the next song in a playlist automatically.
We had previously worked with other web audio engines like SoundManager2, but weren’t able to get the mobile performance we needed. And many web players fallback to Flash in certain cases, but with Flash no longer supported, this ruled out many available audio engines.
After doing some research, we learned that high performance music platforms like Spotify and SoundCloud have built their own private audio players for their websites to solve exactly these problems we were coming up against. Instead of using HTML5’s built-in media capabilities, these platforms load audio over AJAX requests, granting greater control over the listener experience.
Enter Phonograph, an open-source audio player built in 2016 built by Rich Harris, who wrote:
“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, Rich writes, was to load audio in chunks like Spotify and SoundCloud figured out:
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.
Inspired by Phonograph, Proton set out to build a robust, high performance audio engine in javascript. The result, Proton Player, is now available to the open source community.
Features — see a demo here.
- Fast loading audio on mobile and desktop.
- Advanced support for pre-loading and buffering.
- Supports seeking to specific positions.
- Can play audio on mobile without requiring user gestures.
- Can be configured to support gapless playback.
- Can be hooked up with hotkeys for desktop power users.
- Supports both Audio Context and Media Source APIs for extra compatibility.
Our initial feature set provides developers with an incredible amount of power when developing audio applications for the web within a browser, without requiring a standalone mobile app.
Instead of loading audio as a normal file, our player loads byte range chunks via AJAX. Developers can control how much buffers (start and end positions), throttle how much gets loaded at once (to respect low bandwidth situations on mobile), and even download multiple chunks in parallel for increased performance.
Delightful user experiences are possible, such as building playlists that sequentially play automatically, pre-loading the next song so it starts quickly, or fancy “on-hover” pre-loads that gets audio ready when the user hovers their mouse over an element: even at a point in the middle of a long audio file, like a DJ mix!
The Proton Player is headless: it does NOT include a front end user interface. That’s left to app developers, but you can take it for a spin on our website to see how it works for both DJ Mixes and individual songs, here’s an example.
