Web Analytics Made Easy -
StatCounter HTML5 audio player help: Progress bar behind slider/playhead - CodingForum


No announcement yet.

HTML5 audio player help: Progress bar behind slider/playhead

  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML5 audio player help: Progress bar behind slider/playhead

    Hi all,

    I've made an audio player based on this tutorial found here, (playable version here) and everything is working fine, however, I'd like to incorporate a progress bar showing how much of the audio has played, very much like how the iPod app does on an iPhone/iPod Touch.

    This tutorial does include code for buffering the audio to show how much of it is downloaded, but that's not quite what I want. And besides most browsers don't seem to support it anyway. I just want to show how much has already played.

    This tutorial uses jQuery UI for the slider, which acts as the playhead. You can also click anywhere in the timeline to jump ahead or go back to any point in the audio. I've downloaded and added the UI script for the progress bar, but I can't seem to get it working. That might be because I know next to nothing about javascript.

    Any help would be greatly appreciated and I can be done with this project. Below is the javascript for the player. Thanx.

    $(function() {    $("body").addClass("listen");    initAudio();});function showListen() {    $("body").addClass("listen");    return false;}function initAudio() {        var supportsAudio = !!document.createElement('audio').canPlayType,            audio,            loadingIndicator,            positionIndicator,            timeleft,            loaded = false,            manualSeek = false;    if (supportsAudio) {                var episodeTitle = $('body')[0].id;                var player = '<p class="player">\                                      <span id="playtoggle" />\                                      <span id="gutter">\                                        <span id="loading" />\                                        <span id="handle" class="ui-slider-handle" />\                                      </span>\                                      <span id="timeleft" />\                                      <audio preload="metadata">\                                        <source src="http://rghardy.org/stream/' + episodeTitle + '.mp3" type="audio/mpeg"></source>\                                    </p>';                                                    $(player).insertAfter("#listen .photo");                audio = $('.player audio').get(0);        loadingIndicator = $('.player #loading');        positionIndicator = $('.player #handle');        timeleft = $('.player #timeleft');                if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {            $(audio).bind('progress', function() {                var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);                loadingIndicator.css({width: loaded + '%'});            });        }        else {            loadingIndicator.remove();        }                $(audio).bind('timeupdate', function() {                        var rem = parseInt(audio.duration - audio.currentTime, 10),                    pos = (audio.currentTime / audio.duration) * 100,                    mins = Math.floor(rem/60,10),                    secs = rem - mins*60;                        timeleft.text('-' + mins + ':' + (secs < 10 ? '0' + secs : secs));            if (!manualSeek) { positionIndicator.css({left: pos + '%'}); }            if (!loaded) {                loaded = true;                                $('.player #gutter').slider({                        value: 0,                        step: 0.01,                        orientation: "horizontal",                        range: "min",                        max: audio.duration,                        animate: true,                                            slide: function(){                                                        manualSeek = true;                        },                        stop:function(e,ui){                            manualSeek = false;                                                audio.currentTime = ui.value;                        }                    });            }                    }).bind('play',function(){            $("#playtoggle").addClass('playing');                }).bind('pause ended', function() {            $("#playtoggle").removeClass('playing');                });                        $("#playtoggle").click(function() {                        if (audio.paused) {    audio.play();    }             else { audio.pause(); }                    });    }        }

  • #2

    I'm really stuck here and I would appreciate any help I could get on this, as nothing I've tried has worked thus far and I'm very frustrated.