PWAmp app demo

Contents:

• Open the sample
• About the sample
  • About the name "PWAmp"
  • Features available by installing the app
  • Features demonstrated
• Use the sample
  • Add new songs
  • Edit song information
  • Add custom artwork for an album
  • Play, pause, or go to the next or previous song
  • Record an audio clip
  • Show the visualizer
  • Download all songs
  • Delete all songs
  • Make a custom skin
  • Apply a custom skin
• Song credits
• Possible enhancements
• Articles that use this demo

Open the sample

1. Go to the pwamp demo in a new window or tab.

2. In the Address bar, click the App available button.

3. Open the installed app in its own window.

About the sample

PWAmp is pronounced P-W-Amp.

PWAmp is a web audio player demo app; a desktop music player that plays local and remote audio files.

The app is an installable Progressive Web App (PWA) specifically made to demonstrate desktop integration features.

About the name "PWAmp"

This app is a "Progressive WebAmp". PWAmp's name was inspired by Winamp, which was a popular media player application for Microsoft Windows.

The "Win" part of the name "WinAmp" was replaced by "PW", which are the first two letters of "PWA" (Progressive Web App).

The name "Webamp" was already in use, by Webamp.org.

See also:

• Overview of Progressive Web Apps (PWAs)

Features available by installing the app

When you install the PWA locally on the desktop, the following features become available:

• Audio files are handled natively. To add an audio file to your PWAmp library, double-click the audio file, such as in File Explorer.

• *.pwampskin files are handled natively. To change the look and feel of the app, double-click a .pwampskin file.

• The custom web+amp protocol is handled natively.

  • Share links of remote songs with other people by using web+amp:remote-song:<url-to-song> links.

  • You can also share skins with other people by using the URL pattern web+amp:skin:<url-to-skin>. Example song link:

    • By the Light of the Silvery Moon - Fats Waller.

• The title bar can be displayed or hidden. To hide the title bar, in the toolbar, click the chevron (^) icon.

• The app becomes a share target for audio files. If you share audio files from another app (or from the explorer), PWAmp is displayed as a target app for these files.

Features demonstrated

PWAmp uses the following features:

Feature	Description	Documentation
Window Controls Overlay	The space normally reserved to the title bar can be used by PWAmp to display a visualization of the current song.	Display content in the title bar area using Window Controls Overlay
Protocol Handling	Links that start with web+amp: can be used to share remote songs.	Handle protocols in a PWA
File Handling	Audio files can be opened with PWAmp directly. Right-click on a file ending with .mp3 for example and click Open with.	Handle files in a PWA
Web Share	Songs can be shared with other apps through the operating system sharing dialog.	Sharing content
Share Target	Other apps can share audio files with PWAmp, through the operating system sharing dialog.	Receiving shared content
Widget	A mini-player Widget can be installed in Windows 11 Widgets dashboard to see the current song.	Display a PWA widget in the Windows Widgets Board
Sidebar	PWAmp can be pinned to the sidebar in Microsoft Edge.	Build a PWA for the sidebar in Microsoft Edge

Use the sample

Add new songs

To add new songs, do either:

• Drag audio files from your explorer onto the playlist area.
• In the bottom toolbar, click the + button.

Artist, title, and album information are parsed from the song files (if available).

Edit song information

To edit song information:

1. Click the artist, title, or album field.

2. Edit the text.

Add custom artwork for an album

To add custom artwork for an album:

1. Drag and drop an image file onto a song.

Play, pause, or go to the next or previous song

To play, pause, or go to the next or previous song:

1. Use the top toolbar.

Record an audio clip

To record an audio clip:

1. Click the Record an audio clip button at the bottom of the page.

2. Click the Stop recording button at the bottom of the page.

Show the visualizer

To show or hide the visualizer:

1. Click the Show visualizer button in the upper right of the page.

   The page UI is replaced by the visualizer.

2. Click the Stop visualizer button in the lower right of the page.

Download all songs

To download all songs:

1. Click the More tools button in the lower right of the page, and then select Export all.

   The first track starts playing.

2. Click the more options button, and then select Download.

Delete all songs

To delete all songs:

1. Click the More tools button in the lower right of the page, and then select Delete all.

Make a custom skin

A skin is a CSS file that gets applied to the app, replacing the default CSS.

The best way to make a new skin is to open DevTools and look at the HTML structure of the page. Most elements should have handy classes and IDs that will make them easy to style.

Skins are expected to have a :root {} rule with at least one variable called --back set to the color of the background. The :root {} rule is used at runtime, via JavaScript, to apply the color to the visualizer and the title bar area.

Apply a custom skin

To replace the look and feel of the app with your own look and feel:

1. Click the Apply a custom skin button at the bottom of the page.

   The Select a file this site can read dialog opens.

2. Select a .css or .pwampskin file.

Song credits

The first time you open PWAmp, a few songs are pre-loaded. These songs use remote URLs. These songs only play when you are online.

Credits for the pre-loaded songs:

• "Reunion", and "Over The Stargates" by David Rousset, used with the author's approval. More information and songs on soundcloud.
• "Opening" and "Aloe-Almond Butter And Space Pesto" by Noi2er, from the Internet Archive.

Possible enhancements

• Make sure the app is accessible in high-contrast mode.

• Make it possible to download remote songs locally:

  • Fetch, then readablestream, then store chunks in IDB.
  • Then fetch handler in SW to serve these chunks back from IDB when offline.

• Improve song adding performance again: only get duration later, after song has been added.

• Add the ability to drag songs onto the playlist to re-order them.

• Add the ability to export a song as a different file format.

• Use viewport segments to display on dual-screen devices.

• Add Repeat and Shuffle buttons.

Articles that use this demo

Find "PWAmp" in the following articles.

• PWAmp in Progressive Web App samples.
• Console features reference
• Test Progressive Web App (PWA) protocol handling
• View and change IndexedDB data
• Best practices for PWAs
• Automatic link handling in Handle links to a PWA.
• Demo of sharing content in Share content with other apps.
• Build a PWA for the sidebar in Microsoft Edge
• Display a PWA widget in the Windows Widgets Board
• What's New in PWAs