A web-based Audio Player that delivers audio content.
version 2.1.5
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
- Title – the presentation title
- Subtitle – the presentation subtitle if provided
- Author & Duration – the presentation author and total duration of the presentation
- Start button – starts the presentation from the beginning
- Resume button – resume the presentation from where it was left off
- Download button menu – list of available files for downloading. Will not be displayed if there are no downloadable files.
Player Screen
- Track author photo – a photo of the author of the current track. Click the author photo to open the author profile.
- Track title – the title of the current track. The title will automatically scroll if it is long.
- Track author – the author of the current track
- Track number – the current track number out of the total number of tracks
- 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.
- Close playlist button – click to close the playlist
- Progress time – the current time of the playback
- Progress bar and scrubber – indicates the progression of the current track. Click or drag and drop to seek the playback.
- Track duration – the total time of the current track
- Previous button – click to go back to the previous track. If the current track is the first track, the previous button is disabled.
- Rewind button – rewind 10 seconds
- Play and Pause button – click to play or pause the current playback
- Fast forward (skip) button – fast foward or skip 10 seconds ahead of the current track playback
- Next button – click to advance to the next track. If the current track is the last track, the next button is disabled.
- 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.
- Playback rate/speed menu – click to select and change playback speed
- Volume controls – click to mute or adjust the track volume
- Download button – click to show a list of available files for download
- 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.
- 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 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 tojpg
if left empty.trackImgFormat
– specify all of the track image file format that will be used for the presentation. Defaults tojpg
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 aname
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 toethanlin
. This reformatted value be will the file name that audio player will be requesting.
- The
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 thetrack
holds the name of the audio file without the file extension (.mp3). - The
title
tag inside thetrack
tag holds the title of the track. - The
author
tag inside thetrack
tag holds the author profile. It will override the profile from the server if available.- The
name
attribute of theauthor
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
- Follow the file structure and XML above to create a presentation project folder.
- Upload the presentation project folder (include its files, obviously) to a remote server.
- Get the URL to the presentation’s album.xml file.
- Encode the album.xml URL to be URL friendly. URL encoding tools are widely available on the Internet.
- 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 ishttps://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 tohttps://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.