How to create an audio player PWA

Demo

Install the app on an iPhone or Android phone, and open it from your homescreen. Tap on the button below to start audio playback. Turn off your phone's screen. Playback should continue and you should be able to control the audio from the lock screen using the compact player.

Browser support

This demo uses the native audio HTML element and the MediaSession API. Both are widely supported across browsers and platforms. In other words, Progressive Web Apps are an excellent choice for your audio and music players. With one single code base, your audio player will work natively on nearly all mobile and desktop devices. The implementation is also extremely simple — this entire demo is less than 100 lines of code.

How it works

With the native audio HTML element, you can play audio in the browser (or in an installed PWA). With the MediaSession API, you can make this audio element controllable from the device's lock screen or notification tray (on iOS or Android) or via the dedicated desktop audio player interfaces (on macOS and Windows).

Code

Links & Documentation

• HTML Audio Element Reference
• Media Session API Documentation