Menu
I am building an a/v html5 streaming web app. This question pretains to the audio portion of the project, but i'm sure i will run into a similar situation when i get started on the video portion. My target device is the iPad's safari browser (hence why i have to do this html5). Playback works fine, but i have a loading bar which needs to reflect how much of the track has been loaded. Following the w3 spec, i tried to implement this the following way using jQuery:
var that = this;
that.player = $('audio')[0];
$('that.player').bind('progress',function(){
var buffer = that.player.buffered.end(0)
that.updateLoadBuffer(buffer);
});
This did not work. 'that.player.buffered' returns a TimeRanges object, and TimeRanges have a method 'end(index)' which returns the playback position of end of the buffer in seconds for the TimeRange specified by 'index.' TimeRanges also have a .length property which tells you how many TimeRanges are encapsulated by the object. When i tried to log that property i found that TimeRanges.length = 0, meaning no TimeRanges are passed back. Also when i threw logging statements into the bound function, i found that the 'progress' event was never fired. I have separate functions for the 'loadedmetata' and 'timeupdate' events which follow a similar format, and those fire off as expected. I tried other methods for capturing events to no avail:
that.player.onprogress = function(e){
console.log('progressEvent heard');
};
that.player.addEventListener('progress',progressHandler, false)
function progressHandler(e){
console.log('progressEvent heard');
};
Neither of these triggered my console message. My audio tag declaration is as follows:
<audio style="width:0;height:0;"></audio>
what am i doing wrong here?
UPDATE: I am using wowzamediaserver to handle the http streaming. I dont know if that could have anything to do with it.
YET ANOTHER UPDATE: I realize i do not have a source in my audio tag, that is because i set it dynamically using jquery, as follows:
$('audio').attr('src','http://my.wowza.server:1935/myStreamingApp/_definst_/mp3:path/to/my/track/audio.mp3/playlist.m3u8');
again i am not having playback issues so this shouldn't have any bearing on my problem, but i just want to give you guys as clear of a picture as possible.
512
I'm not sure what the current implementation landscape looks like for the progress event, but when I was working on an HTML5 audio player several months ago I remember that I just couldn't get it to fire in Safari or Chrome. I ended up using a timer instead. Probably nothing you couldn't figure out, but here's a simplified version:
The Script:
$(document).ready(function(){
audio = $('body').find("audio").get(0);
});
function play() {
audio.play();
int = window.setInterval(updateProgress, 30);
}
function pause() {
audio.pause();
window.clearInterval(int);
}
function updateProgress() {
progress_seconds = Math.ceil(audio.currentTime);
progress_percent = Math.ceil(audio.currentTime / audio.duration * 100);
$('#progress_seconds').html('Seconds: ' + progress_seconds);
$('#progress_percent').html('Percent: ' + progress_percent);
};
The HTML:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="so.js"></script>
<title></title>
</head>
<body>
<audio>
<source src="audio.mp3" type="audio/mp3">
</audio>
<a id="play" href="#" onclick="play();">Play</a>
<a id="pause" href="#" onclick="pause();">Pause</a>
<span id="progress_seconds">_</span>
<span id="progress_percent">_</span>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
