Skip to main content

Audio Player Technical Specifications

A web-based Audio Player that delivers audio content.

version 2.1.5

Starter Kit

File Structure

An image of audio player project file structure

  • The AUDIO PLAYER APP files are centralized on the server and does not need to be included with every presentation.
  • The transcript (.pdf) and audio files (could be a .mp3 for single track or .zip for multiple tracks) are optional downloadable files to be included with the presentation. Additional downloadable file can be added. See manifest section for more details.
  • The assets folder contains the XML and media files for the presentation.
    • An XML file named “album.xml” is required for each presentation. It holds the information and references to the media files.
    • The audio folder contains all of the audio and corresponding caption (.vtt) files.
    • The images folder contains all of the author photos. Photos in this folder will override photos from the server if applicable.
    • The splash image file is optional and overrides the default splash image.

Player Interface

Splash Screen

Image of audio player splash screen
  1. Title – the presentation title
  2. Subtitle – the presentation subtitle if provided
  3. Author & Duration – the presentation author and total duration of the presentation
  4. Start button – starts the presentation from the beginning
  5. Resume button – resume the presentation from where it was left off
  6. Download button menu – list of available files for downloading. Will not be displayed if there are no downloadable files.

Player Screen

An image of the audio player interface

An image of the audio player with captions

  1. Track author photo – a photo of the author of the current track. Click the author photo to open the author profile.
  2. Track title – the title of the current track. The title will automatically scroll if it is long.
  3. Track author – the author of the current track
  4. Track number – the current track number out of the total number of tracks
  5. Playlist – a list of all tracks. Photo of the author for each track will not be displayed if the track author is the same for all. Each track has a download button to download the respective track.
  6. Close playlist button – click to close the playlist
  7. Progress time – the current time of the playback
  8. Progress bar and scrubber – indicates the progression of the current track. Click or drag and drop to seek the playback.
  9. Track duration – the total time of the current track
  10. Previous button – click to go back to the previous track. If the current track is the first track, the previous button is disabled.
  11. Rewind button – rewind 10 seconds
  12. Play and Pause button – click to play or pause the current playback
  13. Fast forward (skip) button – fast foward or skip 10 seconds ahead of the current track playback
  14. Next button – click to advance to the next track. If the current track is the last track, the next button is disabled.
  15. Caption on or off button – click to turn caption on or off. Turning on the caption will close the playlist if there are multiple tracks. If current track has no caption, this button will not be displayed.
  16. Playback rate/speed menu – click to select and change playback speed
  17. Volume controls – click to mute or adjust the track volume
  18. Download button – click to show a list of available files for download
  19. Next track display and open playlist button – if the playlist is closed, the “Up Next” element will be displayed. Click the open playlist (arrow) button to open the playlist.
  20. Caption area – if the track has caption it will be displayed in this area

If the presentation contains only a single track, the following controls will not displayed:

  • Track number
  • Playlist
  • Previous button
  • Next button

Manifest File

The manifest file is a JSON file which contains global settings or configurations for all of the audio player presentations.

                            
                        
  • ap_ga_tracking – holds Google Analytics Measurement and Google Tag Manager IDs.
  • ap_root_directory – holds the path to the root directory where the source files are stored. Defaults to the “sources” directory if empty.
  • ap_default_content_directory – holds the path to a remote directory where the XML files would most likely be located.
  • ap_author_directory – the path to the directory that holds the author image and biography files.
  • ap_splash_directory – the path to the directory that holds the splash image(s)
  • ap_download_files – holds the supported downloadable file format and its label. Specified additional downloadable files here to add to the player’s download list.
The manifest file points to shared resources that are in use by other application. For example, the centralized author biography and photo are the same files that are used in Storybook Plus presentations. For details on how to create an author biography and photo, see Author Biography File (JSON).

The album.xml File

The album.xml file holds or references the contents of an audio presentation. It should always be included inside the assets directory. The XML file contains the setting configurations, the presentation setup, and audio track(s).

                            
                        

Settings

Right after XML declaration, <?xml version="1.0" encoding="UTF-8" ?>, is the album tag, the outermost tag of the XML. This album tag has attributes that define the settings for a particular presentation and all other tags should be nested inside.

                            
                        
  • accent – accepts a hexadecimal color value that changes the color of some of the UI elements to match the theme or splash screen of the presentation. If left empty, it will defaults to the audio player’s color scheme.
  • splashImgFormat – specify the splash image file format that will be used for the presentation. Defaults to jpg if left empty.
  • trackImgFormat – specify all of the track image file format that will be used for the presentation. Defaults to jpg if left empty.
  • downloadFileName – holds the file name for all download files. Please use proper file naming conventions: no special characters, lowercase, and dashes or underscores for spaces.

Setup

The setup tag of the album.xml specify the splash screen image, title, author, and other additional information for the presentation.

                            
                        

The setup tag has an optional splashImg attribute that is used for specifying the path—without the file extension—to the centralized splash image.

Nested inside the setup tag:

  • title – the title of the presentation; will be displayed on the splash screen and the black banner bar.
  • subtitle – an optional title for the presentation; will only be displayed on the splash screen.
  • length – the total approximated length or duration of the presentation; will only be displayed on the splash screen
  • author – holds the author’s profile or biography. The value for this tag will override
    the centralized author’s profile or biography.
    • The author tag has a name attribute. This attribute holds the name of the author and will be used for naming the author’s local and centralized photo and biography files. The value will be reformatted to lowercase with space and special characters removed. For example, Ethan Lin will be reformatted to ethanlin. This reformatted value be will the file name that audio player will be requesting.

Track

The track tag of the album.xml specify the track or tracks of the audio player. If there are more than one track, multiple track tags are needed. Whether it is one track or more than one track, the track tag is the same.

                            
                        
  • The src attribute of the track holds the name of the audio file without the file extension (.mp3).
  • The title tag inside the track tag holds the title of the track.
  • The author tag inside the track tag holds the author profile. It will override the profile from the server if available.
    • The name attribute of the author tag holds the name of the track author. If left empty, it will inherit the author name and profile from the setup tag.
The author tag of the track follows the same protocol as the author tag in the setup tag.

Usage Instructions

  1. Follow the file structure and XML above to create a presentation project folder.
  2. Upload the presentation project folder (include its files, obviously) to a remote server.
  3. Get the URL to the presentation’s album.xml file.
  4. Encode the album.xml URL to be URL friendly. URL encoding tools are widely available on the Internet.
  5. Append the encoded album.xml URL to the URL of the audio player app as a URL query parameter (?src). For instance, at Excelsior University, the audio player app URL is https://academics.excelsior.edu/acadapp-audioplayer/. To have it play a presentation, append ?src=https%3A%2F%2Fpath-to-presentation-project%2Fassets%2Fablum.xml. So, by going to https://academics.excelsior.edu/acadapp-audioplayer/?src=https%3A%2F%2Fpath-to-presentation-project%2Fassets%2Fablum.xml, it will request the presentation project files and present them in the audio player.