Audio player

The Pugpig audio player features several components that your users can take advantage off to listen to audio content via your app.

Context menu

When audio content in the app is interacted with, either in the timeline or in an article, a menu is brought up showing info about the track with the option to:

1. Play the track
2. Add a track to your queue (either the beginning or the end)
3. View the queue which will open the audio player

Audio playlists

We also provide an additional option for playing all audio in a collection, especially useful for editions with audio versions of articles. To enable this you can either manually insert header cards into your timeline or edition and select the relevant ‘Show audio button’ setting:

1. Hide (Standard header card with no audio)
2. Play all (all tracks in the collection)
3. Play tracks until next header

Or we can adjust your editions to automatically include them. If enabled this will show header cards for titles and sections within your editions. The title card will play all audio in an edition if tapped, while the header card will play all audio in a section if tapped. Note that this can be controlled per edition if desired, via edition options

The player

The player itself shows:

1. The currently playing track
2. Your queue of upcoming tracks with the option to; download all or some of them for offline listening or to reorder or clear the queue
3. Your track history, which is shown above the queue if you scroll
4. Audio controls to; download, go back to the start, rewind, play/pause, control playback speed, fast forward, go to next track

If you then continue to browse the app an unobtrusive miniplayer will show at the bottom of the screen which shows basic info about the track as well as progress and the functions to play/pause, quickly rewind or tap to access the full player. The player is dismissible, which will also stop audio playing.

If the app is backgrounded or the device is locked, audio will continue to play in the background. If you'd like it not to let us know and we can disable background audio.

Audio player metadata

Note: This section is about what displays in either the in-app Audio Player or the device Audio Player. What displays in the app timeline, on an Audio card, is controlled separately in the CMS.

To retrieve metadata from an audio file we use the ID3 metadata container. ID3 allows information about the file, such as title, artist, image etc, to be stored within the file itself. 

The mp3 that’s uploaded to Express, or that we retrieve from an external source, needs to have all the relevant metadata included within the file.

To test what’s in your file before uploading it to Express, open the audio track on your computer. However it displays there in your native device audio player is what will show in the Pugpig audio player.

Below is all of the information we use and will need in the file:

• Track title
• Author
• Description
• Image
• Track duration (read automatically from the file)

We can also store the Album, Genre and Caption, but by default these aren’t displayed anywhere for a user to see.

If a track has been uploaded without any or some metadata attached, it can be added in the media library, however we’re unable to overwrite metadata that already exists in the file (even if you attempt to replace it in the Express media library) because we still read it from the file.