PWA Demos
Audio Player

How to create an audio player PWA

In this article, you'll learn how to create an installable audio and music PWA with custom controls, background playback, and lock screen compact player.

Audio Player Logo


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).


Links & Documentation

Your app here

Unlock the powers of the web today

Try our PWA toolkit free of charge and without limits for 14 days. No credit card required.

Get started See plans