Tweet
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.
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.
Code:
$(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(); } }); } }
Comment