Audio Player

by velo_ninja

HTML

<div id="wrapper" style="max-width: 700px; width: 98%; margin: 0 auto; font-family: verdana;">
    <h1 style="text-align: center;">Free Audio Player by Nillervision</h1>
    <a href="http://nielsharbo.dk/">www.nielsharbo.dk</a>
    <div id="audioPlayer">
        
        <audio id="audio"></audio>
        <div id="trackList">
            <a href="http://www.nielsharbo.dk/test/audioplayer/life.mp3" data-oggfallback="http://www.nielsharbo.dk/test/audioplayer/life.ogg">"Life is..."</a>
            <a href="http://www.nielsharbo.dk/test/audioplayer/innocence.mp3" data-oggfallback="http://www.nielsharbo.dk/test/audioplayer/innocence.ogg">"Innocence"</a>
            <a href="http://www.nielsharbo.dk/test/audioplayer/stepahead.mp3" data-oggfallback="http://www.nielsharbo.dk/test/audioplayer/stepahead.ogg">"Step ahead"</a>
        </div>
        <div id="messages">Wait...</div>
        <div id="controls">
            <button id="stop">Stop</button>
            <label>Progress:</label>
            <input id="slider" type="range" min="0" max="100" value="0" step="1" />
            <label>Volume:</label>
            <input id="volKnob" type="range" min="0" max="10" value="10" step="1" />
        </div>
    </div>
    <p class="credits">Music courtesy of <a href="https://soundcloud.com/radiocean-1">radiOcean</a></p>
    <h3>Features</h3>
    <ul>
        <li>Native HTML5 and raw JavaScript (no plug-ins or frameworks needed)</li>
        <li>No JavaScript knowledge needed to use the player- just add links to mp3 files in the tracklist div</li>
        <li>Playlist - Unlimited number of tracks</li>
        <li>Volume -and progress-sliders (only visible when playing a track)</li>
        <li>Responsive layout</li>
        <li>Optional ogg file can be specified</li>
        <li>Falls back to mp3 download or plugin playback in non HTML5 browsers</li>
    </ul>
    <h3>Usage:</h3>
    <p>Locate the div with the id "trackList" in the HTML code insert one or more links to a mp3 file...

CSS

#audioPlayer {
    width: 98%;
    max-width:300px;
    margin: 10px auto;
    font-family: Arial;
    color: #ddd;
    padding:2%;
    text-align:center;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #2a2a2a;
box-shadow:inset 0px 0px 8px #fff;
    
}

#audioPlayer #trackList {
    text-align:left;
    border-radius:2px;
    border:1px solid #fff;
    border-bottom:none;
    border-right:none;
    box-shadow: 1px 1px 1px #fff;
    width:84%;
    margin:10px auto;
    padding:5%;
    background: #f5f6f6;
    background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #f5f6f6 21%, #ffffff 49%, #f5f6f6 80%, #f5f6f6 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f5f6f6), color-stop(21%,#f5f6f6), color-stop(49%,#ffffff), color-stop(80%,#f5f6f6), color-stop(100%,#f5f6f6));
    background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#f5f6f6 21%,#ffffff 49%,#f5f6f6 80%,#f5f6f6 100%);
    background: -o-linear-gradient(-45deg,  #f5f6f6 0%,#f5f6f6 21%,#ffffff 49%,#f5f6f6 80%,#f5f6f6 100%);
    background: -ms-linear-gradient(-45deg,  #f5f6f6 0%,#f5f6f6 21%,#ffffff 49%,#f5f6f6 80%,#f5f6f6 100%);
    background: linear-gradient(135deg,  #f5f6f6 0%,#f5f6f6 21%,#ffffff 49%,#f5f6f6 80%,#f5f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 );
}
#audioPlayer #trackList a {
    color: #111;
    text-decoration:none;
    display:list-item;
    list-style:none;
    list-style-position: inside;
}
#audioPlayer #messages {
    width:90%;
    margin:10px auto;
    padding:5%;
}
#audioPlayer button {
    display:block;
    padding:5px;
    width:50%;
    margin:10px auto;
    border:1px solid #aaa;
    border-bottom:#000;
    border-right:#000;
    border-radius:2px;
    background:#000;
    color:#ddd;
}
#audioPlayer audio {
    display: none;
}
#audioPlayer slider, audioPlayer volKnob, #audioPlayer label{
    display:block;
   ...

JavaScript

//Check for browser support, initialise and attach eventslisteners
function registerEvents() {
    //Variables
    var audio = document.getElementById('audio');
    var btnStop = document.getElementById('stop');
    var messages = document.getElementById('messages');
    var controls = document.getElementById('controls');
    var slider = document.getElementById('slider');
    var volKnob = document.getElementById('volKnob');
    var audioTagSupport = !!(document.createElement('audio').canPlayType);
    //check for audio support
    if (audioTagSupport==false){
        messages.innerHTML="Sorry! your browser does not seem to support HTML5/mp3 audio";
    }
    else{
        stopPlayback();
        var tracks = document.getElementById('trackList').children;
        for (var i = 0; i < tracks.length; i++) {
            tracks[i].addEventListener('click', playTrack, false)
        }
        btnStop.addEventListener('click',stopPlayback,false);
        audio.addEventListener('ended', stopPlayback,false);
        slider.addEventListener('change', sliderFunc,false);
        volKnob.addEventListener('change', volFunc,false);
    }
}

//Functions called by the events
function playTrack (event) {
    event.preventDefault();
    messages.innerHTML='Loading...';
    try{
        if(audio.canPlayType("audio/mp3")){
            audio.setAttribute('src', this.href);
            audio.setAttribute('type', 'audio/mpeg');
        }
        else if(audio.canPlayType("audio/ogg")&& this.hasAttribute("data-oggfallback")){
            audio.setAttribute('src', this.getAttribute('data-oggfallback'));
            audio.setAttribute('type', 'audio/ogg');
        }
        else{
        messages.innerHTML='Your browser does not support playback of these files';
        }
    }
    catch(err){
        messages.innerHTML='Your browser does not seem to support HTML5 audio';
    }
    audio.load();
    audio.oncanplay = audio.play(), messages.innerHTML='Buffering...';
    audio.onplaying  =...