DOCUMENTATION

The components of the player, the file structure, the XML file, the setups, and the bug reporting tools will be explained in detail in this documentation.

Demo w/o playlist Demo w/ Playlist Download Starter Kit

Player Cover

MP3 Player Cover

The Player

MP3 Player

  1. Album title - the title of the album.
  2. Author name - the name of the album's author.
  3. Play button - click (actually, anywhere) to start the MP3 player.
  4. Track image - the image that currently associated with the current audio track.
  5. Track title - the title of the current playing track.
  6. Track author and total duration - the author and total duration of the current track author.
  7. Track number - the current track number. If the player only have one track, this track number will not be visible.
  8. Play/Pause - click to play or pause the audio.
  9. Current time - the current time of the playing audio.
  10. Progress/Seek bar - indicates the current progress of the audio. Click anywhere on the progress bar to seek.
  11. Duration - the total duration of the current audio track.
  12. Volume control - click the speaker icon to mute or un-mute. Click anywhere on the bar to adjust volume.
  13. Current track - current playing track are highlight in black.
  14. Playlist - displays all of the tracks. If the player only have one track to play, the playlist will not be visible.

File Structure

MP3 Player File Structure

The image above shows the file structure of the audio player. The "sources" folder contains the core files of the audio player. It is centralized; thus, no need to worry about what is in it and where it goes. An HTML file or the index page is required to hold audio player and then embedded in D2L via an iFrame tag element. The "assets" folder is required. Inside this assets folder, an XML file and two folders are also required. The XML file must be named "tracks.xml." The two folder must be named "audio" and "images" respectively. The audio folder holds all of the audio tracks even if there is only one track. The images folder holds the instructor image, splash image, and optionally individual track images if any.

Put it all together:

  1. In the root directory, a HTML file must be named "index.html," and a folder must be named "assets."
    • The HTML file must not be modified.
    • You may named the root directory whatever you like as long as it is make sense and follow the naming conventions.
  2. In the assets folder, an XML file and two folders are needed.
    • The XML file must be named "tracks.xml."
    • The two folders must be named "audio" and "images" respectively.
  3. audio folder must contains all of the audio (MP3) files.
  4. images folder contains the instructor image, splash image, and optionally individual track images, if any.
    • If the instructor image is missing, a default image will be used instead.
    • The splash image must be named "splash.jpg." If it is missing or incorrectly named, a default image will be used instead.

The file structure is following the UWEX-CEOEL multimedia team's standards and naming conventions. The file and folder names should always be in lowercase letters and no spaces.

Download the starter kit to help you get started.


XML File

The following is how the XML file should be setup.

<?xml version="1.0" encoding="UTF-8"?>

<tracks>

    <!-- "Album" information -->
    <album>
    
        <name>HTML5 Audio Player Demo</name>
        
        <!--
            author name for all of the tracks
            
            NOTE: author specified in each individual
            track will override this author, and if the
            track's author is empty, author specified here will
            be use.
        -->
        <author>Ethan S. Lin</author>
        
        <!--
            image for all of the tracks;
            leave blank if none
            
            NOTE: image specified in each individual track
            will override this image, and if the track's
            image is empty, image specified here will
            be use.
        -->
        <image>me.jpg</image>
        
        <!--
            total length of all the tracks combined;
            leave it blank if none
        -->
        <length />
    
    </album>

    <!-- single track only need one track node -->

    <track>
        <source>FasterRide.mp3</source>
        <title>Faster Ride</title>
        <author>Cartel</author>
        <image>cartel.jpg</image>
    </track>
    
    <!-- for multiple tracks, add more track nodes -->
    
    <track>
        <source>Gentleman.mp3</source>
        <title>Gentleman</title>
        <author>PSY</author>
        <image>psy.jpg</image>
    </track>
    
    <track>
        <source>HeresToNeverGrowingUp.mp3</source>
        <title>Here's To Never Growing Up</title>
        <author />
        <image />
    </track>
    
    <track>
        <source>YestoLove.mp3</source>
        <title>Yes to Love</title>
        <author>Stefano</author>
        <image />
    </track>
    
    <track>
        <source>MySongsKnowWhatYouDidInTheDark.mp3</source>
        <title>My Songs Know What You Did In The Dark So I Can Have Two Lines</title>
        <author>Fall Out Boy</author>
        <image>fall out boy.jpg</image>
    </track>
    
</tracks>

XML Nodes Breakdown

XML Declaration

This should be the first line of code and required. No changes should be made to it.

<?XML version="1.0" encoding="UTF-8"?>

Opening course nodes.

All nodes should be wrapped inside the course node.

<tracks>

Album Node

    <!-- "Album" information -->
    <album>
    
        <name>HTML5 Audio Player Demo</name>
        
        <!--
            author name for all of the tracks
            
            NOTE: author specified in each individual
            track will override this author, and if the
            track's author is empty, author specified here will
            be use.
        -->
        <author>Ethan S. Lin</author>
        
        <!--
            image for all of the tracks;
            leave blank if none
            
            NOTE: image specified in each individual track
            will override this image, and if the track's
            image is empty, image specified here will
            be use.
        -->
        <image>me.jpg</image>
        
        <!--
            total length of all the tracks combined;
            leave it blank if none
        -->
        <length />
    
    </album>

album node has the following inner nodes: name, author, image, and length.

  • name - holds the album name.
  • author - holds album author's name to use for tracks that does not have an author name.
  • image - holds the image to use for tracks that does not have an track image.
  • length - holds total duration of the all the audio combined. This node can be left as <length /> if the total length is unknown.

NOTE The nodes with no value specified may be written as, for example, <length />.

Track Node

    <track>
        <source>FasterRide.mp3</source>
        <title>Faster Ride</title>
        <author>Cartel</author>
        <image>cartel.jpg</image>
    </track>

track nodes have the following inner nodes: source, title, author, and image.

  • source - holds the audio file name including the extension.
  • title - holds the track title.
  • author - holds the current track author
  • image - holds the current track image file name including the extension.

Setup (or How to Use) Introduction

Gather all assets and contents. Assets such as the audio (MP3) files, the XML file, the splash image, the instructor's photo, etc.

  • The audio file format must be mp3 and be named to whatever you specified in the XML file.
  • The splash image dimensions must be 380 × 270 pixels, named "splash", and in JPG format.
  • The instructor or track images must be 60 × 60 pixels and named to whatever you specified in the XML
  • The XML file must be setup to the way as documented above and named "tracks.xml."
  • Follow the file structure as documented to correctly setup the files and directories.

Download the starter (HTML & XML) kit .

HTML (index.html)

The index.html must NOT be opened and modified.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Audio Player</title>
<link href="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/mp3_player/sources/player/mediaelementplayer.min.css" rel="stylesheet" type="text/css" />
<link href="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/mp3_player/sources/css/audio.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/mp3_player/sources/scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/mp3_player/sources/player/mediaelement-and-player.min.js"></script>
<script src="https://mediastreamer.doit.wisc.edu/uwli-ltc/media/mp3_player/sources/scripts/audio.js"></script>
</head>

<body>
<noscript>
<h1>JavaScript is disabled.</h1>
<p>JavaScript is required to view this page.<br />
    <a href="http://www.enable-javascript.com/" target="_blank">Instructions on how to enable JavaScript in your web browser.</a></p>
</noscript>
<div id="errorMsg"></div>
<div id="coverImage">
    <p class="album_name"></p>
    <p class="album_author"></p>
    <p class="album_length"></p>
    <p><button id="playBtn" class="btn btn-primary">PLAY</button></p>
</div>
<div id="audioPlayerWrapper">
    <div class="playerInfoPanel">
        <div class="image"></div>
        <div class="info">
            <p class="title"></p>
            <p class="author"></p>
            <p class="duration"></p>
        </div>
        <div class="currentTrackNum"></div>
    </div>
    <div class="player"></div>
    <div class="playerPlaylist">
        <ol id="selectable"></ol>
    </div>
</div>
</body>
</html>

Known Bugs

  • None at the moment, but clear the web browser's cache.


Bug Reporting

If any bugs are found in the Storybook player, please report them in Basecamp. Login to the website is required. Once logged in, please write a bug report under the Audio Player list, which is under the Bug Reporting (Media Tools and Players). When reporting a bug, please write the report as detailed and specifically as possible. Include screen captures if possible. Also note down the steps to reproduce the bug.


Version Log

Initial release. 06.05.2013 | 02:53:00PM

Version 1.0.1. 08.08.2013 | 11:27:00AM

  • Single track will not have a splash screen and will not be auto-play.