I have a page which will load one or more audio elements, initially hidden. This is an example of the markup I am using:
<audio style="display:none;" data-id="<?=($file['id'])?>" class="digitalMessageAudio" id="primaryPlayer<?=($file['id'])?>" preload="auto" src="mp3.php?f=<?=($file['path'])?>" controls></audio>
The src property there refers to mp3.php, which simply reads the media file from a network location and passes it through (this works, and is necessary).
On load, I am calling the load method on these audio elements; I want them to be ready to play immediately, with as little lag as possible:
$('.digitalMessageAudio').each(function (idx, ele) {
ele.load();
});
When the user clicks a "play" button, which is simply a button element located elsehwere on the page, the audio player is revealed and playback starts:
$(player).css('display', 'block');
setTimeout(function () {
player.play();
}, 500);
The timeout is necessary - without it, the player will start playback and the user agent (Firefox specific for this app) will not redraw the change to the display style until playback is complete or is paused. This is how the player appears on the page:
Elsewhere on the page, there is a select element that allows the user to load a different record, which may have one or more associated digital files. The new record is loaded via ajax, and replaces the HTML of the previous record:
$.ajax({
'url':'announcement?type=psa&id='+message_id+'&render=1',
'success':function (response) {
$('.renderedMessage').html(response);
setTimeout(function () {
$('.digitalMessageAudio').each(function (idx, ele) {
ele.load();
});
}, 500);
}
});
This all works correctly. The trouble comes when the user clicks the related play button this time, the player is displayed and playback starts. Except, when the player is added to the page via ajax, the progress bar is always incorrect:
As the track plays, the track duration ticks up, but the progress bar stays jammed to the end. The total audio duration is simply not displayed. If you let the track play, you can seek through the portion of the audio that has already played, but not forward.
If I watch in Firebug's Net panel, I see the audio files loading (before any play is clicked). Waiting until these finish loading does not affect the issue.
Summary of problem: Dynamically added audio elements (via AJAX) do not show audio duration, and have an incorrect progress/seek bar.
EDIT Added the php tag, as my problem wound up being specific to how I was serving the files from php
