Audio progress variable?

androo Community Member Posts: 9
Hi All,

I'm wondering if there is a way to track audio progress and link it to a progress bar control.

Basically I need to build a custom audio controls. The play/pause/stop stuff is easy enough to get sorted. But getting any progress data out has me confused.

I've found solutions that require JavaScript libraries to do the heavy lifting, but they don't integrate with lectora's audio object. I would rather do this as natively(in Lectora) as possible. I'm personally happy to plug in jQuery and any given audio library and get coding, but inevitably someone else will need to modify this module and I'll go from hero to zero.

So if someone has a easy solution that doesn't require a bucket load(some is fine) of JS to integrate a lectora progress bar with a lectora audio control.

Regards and thanks in advance for any tips,


PS, some JavaScript is fine, as long as a novice could repeat the process once its set up. I'm just trying to avoid creating a module that only I'll be able to freely work on.


  • wendymiller
    wendymiller Community Member Posts: 244
    Hi Androo,

    Attached is an AWT that demonstrates a method of tying a progress bar to an audio file. It does use some Javascript, but the only thing you would have to modify to use the script is the ID of the progress bar on the page where the calls to the script are made. I've marked these actions in the file.

    To get the internal ID of the progress bar, click on the little expansion button in the lower-right corner on the Progress Bar Properties tab. (Looks like a little upside-down L with a tiny arrow under it.) In this example, it will tell you that the HTML Name of the progress is "progressbar75". Remove the "bar" part of that and you have the ID, "progress75". Each instance of a progress bar will have a unique ID, so you'll need to remember to change that for each new instance.

    The Javascript works by adding some additional functionality to the native Lectora progress bar object.

    You'll also need to have the progress bar type set to Timer, and enter the total time length of the audio file as the Total Time. In this example the total time of the sample audio file is 20 seconds, so the Total Time for the progress bar is also set to 20.

    I hope this helps. I am no Javascript expert, but I was able to easily make this work.

    P.S. Forgot to mention that in this example the audio control bar is visible just so you can see that it is there. But normally you would not see the audio control bar. So set the Display to "none" if you intend to use this. The progress bar will not respond if the user interacts with a visible audio controller.

  • androo
    androo Community Member Posts: 9
    Thank you!

    This will work for me(for now anyway).

    Its a shame the JS  audio object lectora uses isnt in its own specific class, like the progress bar. If it was, we could extend the audio object to include a progress variable of some description in a similar way to the Progress Bar control.

    I suppose we could write some code that picks up the unique html5Audio/swfAudio objects, but it wouldn't be a blanket addition like the code in the header script. Although while typing this response my mind is in over drive thinking about how i'll make it work. Who knows, maybe in the future I'll let it bother me enough to bite the bullet and code up a solution.

    Thanks for your help, you've planted the seeds of a more refined solution.


  • wendymiller
    wendymiller Community Member Posts: 244
    Have at it! :)  Would love to see your solution if you ever get around to it.