Javascript and Progress Bar

G'day Kelsey,

If you are using HTML5 audio then you can do something like the following:

html5_audio.src = fileName;

html5_audio.play();

html5_audio.addEventListener('timeupdate',function (){set_html5_audioProgressBar()});

function set_html5_audioProgressBar(){

var duration = html5_audio.duration;

var currentTime = html5_audio.currentTime;

if (isNaN(duration)||isNaN(currentTime)) return;

audioSecRemaining = duration - currentTime;

audioSecElapsed = duration - audioSecRemaining;

setAudioProgressBar(audioSecElapsed, audioSecRemaining);

}

function setAudioProgressBar(audioSecElapsed, audioSecRemaining){

//Your code goes here to change the audio progress bar.

}

If you are not using HTML5 audio then maybe you could share some of you code so we can help.

Regards, Peter

www.LectoraDeveloper.com

G'day Kelsey,

As you probably know the audio file are played in a flash player called player.swf and it would need to have the functions you require, sorry that I cannot help.

Unfortunatly it is not HTML5. I have a header script with the following functions:

// Find the first audio file on the page and return it's name

function findAudioFileId(){

var audioElements = $("[name^='swfaudio']");

if (audioElements.length > 0){

var audioElement = audioElements[0];

var audioId = $(audioElement).attr("name");

var audioObjId = audioId.substring(3);

return audioObjId;

} else {

alert("Audio file not found!");

return null;

}

}

// Play page audio file

function playAudioFile(){

var audioId = findAudioFileId();

if (audioId != null) {

var audioObj = eval(audioId);

audioObj.actionPlay();

}

}

undefined

So currently I am able to create a custom play button that will run the JS and find the audio file on the page and play it. This part is working. This is nice because I have 60 some pages each with an audio file and I need to have highly customized player buttons; therefore I can create the buttons on the title rather than in each page and then they automatically find the audio file on the page. I now want to add an audio progress bar. Again I would like to add this to the title rather than each page so if I can find the length of the page audio I am assuming I can do something like progressXXXX.range = audioObj.getLength. Where getLength is currently my unknown.

Ya I figured it was a function on the Flash player I was just hoping someone might have attempted this before. Well I'm close to figuring it out. I'll share the solution if/when I get there.

G'day Kelsey,

Maybe you could ask support as it is a Lectora flash file "player.swf". You will need more than just the duration to updated a progress bar anyway.

I am interested in what you have.

I do have an idea that uses the Lectora flash player as you have it, however, if the browser supports HTML5 Audio the use that:

Your JavaScript determines if the browser supports HTML5 Audio, if no then hide the audio progress bar, if yes then extract the mp3 file from the $(“[name^=’swfaudio’]”)[0]; and create the HTML5 Audio object, then that is what gets played and it will update the audio progress bar.

HTML5 Audio is available in most browsers today, the added advantage of this is that it will play in iOS too:-)

HTH

Regards, Peter

www.LectoraDeveloper.com

If you at any point decide to go for HTML5 audio, you might wanna consider to use this library.

http://community.trivantis.com/shared-content/fade-audio-in-lectora/

I am quite a fan of it, and when i need more control over my audio i use it.

Kind regards,

Math