Geek Answers Handbook

HTML5 Sound Event "Progress" Does Not Shoot

I am creating an a / v html5 streaming web application. This question is about the audio part of the project, but I’m sure that I’ll face a similar situation when I start working on the video part. My target device is the Safari browser for iPad (hence why I should do this html5). Playback works fine, but I have a loading bar that should reflect how much of the track has been downloaded. Following the w3 spec, I tried to implement this as follows 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 has an end (index) method that returns the playback position of the end of the buffer in seconds for the TimeRange specified by the index. TimeRanges also has a .length property that tells you how many TimeRanges an object encapsulates. When I tried to write this property, I found that TimeRanges.length = 0, which means that TimeRanges is not being passed back. Also, when I ran the entries in a related function, I found that the progress event was never fired. I have separate functions for the events "loadedmetata" and "timeupdate" that follow a similar format and those that fire as expected. I tried other methods to capture 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'); };

None of them triggered my console message. The declaration of my audio tag is as follows:

 <audio style="width:0;height:0;"></audio>

What am I doing wrong here?

UPDATE: I use wowzamediaserver to handle http streaming. I do not know if this has anything to do with it.

GIVE ANOTHER UPDATE: I understand that I don't have a source in the audio tag because I am setting it dynamically using jquery, as shown below:

 $('audio').attr('src','http://my.wowza.server:1935/myStreamingApp/_definst_/mp3:path/to/my/track/audio.mp3/playlist.m3u8');

again, I have no problems with reproduction, so this should not have anything to do with my problem, but I just want to give you guys as clear a picture as possible.

+6
jquery html5 events ipad audio-streaming
source share
3 answers

The HTML5 specification is still a draft being developed, so browsers that support it essentially comply with a specification that has not yet been finalized. So I did not expect their HTML5 features to be fully functional ...

+1
source share

I'm not sure what the current implementation landscape for the progress event looks like, but when I worked on the HTML5 audio player a few months ago, I remember that I just couldn't run it in Safari or Chrome. I ended up using a timer. You probably couldn’t understand anything, but here was a simplified version:

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); };

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>
+6
source share

Progress events will not work in many use cases with iOS 8.1. According to Apple documentation:

Note. On iPad, Safari does not start downloading until the user clicks on a poster or placeholder. Currently, downloads started in this way do not emit progress events.

I can confirm that javascript triggered playback will not trigger progress events. I have not tested using native HTML5 <audio controls></audio .

Ref: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

0
source share

More articles:


All Articles