Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
mobilvar
Posts: 119
Registered: ‎11-28-2011
My Device: 9930
Accepted Solution

Detect When an HTML5 audio stream has started to play or failed to load

I am working on a streaming audio app using the webkit browser and HTML5. I have created an audio stream using code similar to the following:

 

var audio = new Audio
audio.setAttribute("src", "url of stream to play here");
audio.play();

I would like to be able to tell the user:

1) when the stream has been loaded and is about to play. This is because the stream can take some time to load and I'd like to let the user know that the app is working.

2) when a stream has failed to load. If the stream is down for some reason, I'd like to let the user know that something has failed.

 

Does anybody have any ideas about how I can do this?

Developer
Puzzling
Posts: 51
Registered: ‎10-22-2011
My Device: 9800

Re: Detect When an HTML5 audio stream has started to play or failed to load

[ Edited ]

There are a pile of events and properties on media elements. For example, you can add an event handler for "error" to detect when the load fails. The event "loadeddata" fires when the data is actually down. There is also a "progress" event but I haven't used it much. There is a "playing" event.

 

I'd be a bit careful about state assumptions - for example I wouldn't be surprised if the media started playing before it was fully loaded. Sounds to me like the type of optimization somebody would throw together


I threw together the following test code.

appstart = function() {
    var main = document.getElementById("main");

    var b = document.createElement("button");
    var t = document.createElement("div");
    var a = document.createElement("audio");
    b.innerHTML = "Play";
    b.addEventListener("click", function() {
        a.addEventListener("timeupdate", function() {
            t.innerHTML += "Played "+a.currentTime+" of " + a.duration + "";
        });
        a.addEventListener("progress", function() {
            t.innerHTML += "Progress";
        });
        a.addEventListener("load", function() {
            t.innerHTML += "Load";
        });
        a.addEventListener("error", function() {
            t.innerHTML += "Error";
        });
        a.addEventListener("playing", function() {
            t.innerHTML += "Playing";
        });
        a.addEventListener("stalled", function() {
            t.innerHTML += "Stalled";
        });
        a.addEventListener("loadeddata", function() {
            t.innerHTML += "Loaded";
        });
        a.src="long.mp3";
        a.play();
    },0);
    main.appendChild(a);
    main.appendChild(b);
    main.appendChild(t);
};

window.addEventListener("load", appstart, 0);
Trusted Contributor
mobilvar
Posts: 119
Registered: ‎11-28-2011
My Device: 9930

Re: Detect When an HTML5 audio stream has started to play or failed to load

Thank you.

Trusted Contributor
icecappacino
Posts: 152
Registered: ‎02-12-2011
My Device: Not Specified

Re: Detect When an HTML5 audio stream has started to play or failed to load

Does this work on simulators or real devices or both?

Trusted Contributor
mobilvar
Posts: 119
Registered: ‎11-28-2011
My Device: 9930

Re: Detect When an HTML5 audio stream has started to play or failed to load

These listeners work in ripple and on real devices so that means it should work on the simulators too.
Trusted Contributor
mobilvar
Posts: 119
Registered: ‎11-28-2011
My Device: 9930

Re: Detect When an HTML5 audio stream has started to play or failed to load

I have only used them on real devices not simulators.
Developer
burakk
Posts: 149
Registered: ‎04-23-2011
My Device: BlackBerry 9700 Bold

Re: Detect When an HTML5 audio stream has started to play or failed to load

mobilvar, can please post sample code?

 

It seems that we are developing a similar application. I need to have the stream pre-load and begin playing when navigated to the page, but it does not work. With the code above, it works and second press on the button, it does not play on first press.

 

Thanks in advance.

Trusted Contributor
mobilvar
Posts: 119
Registered: ‎11-28-2011
My Device: 9930

Re: Detect When an HTML5 audio stream has started to play or failed to load

[ Edited ]

Here is the code i use for my listeners:


<script LANGUAGE = "Javascript" type = "text/javascript">


audio.addEventListener("loadstart", function(){
var todoItems = document.getElementById('stream_status');
todoItems.innerHTML = 'Getting stream...';
},false);

audio.addEventListener("playing", function(){
var todoItems = document.getElementById('stream_status');
todoItems.innerHTML = 'Playing...';
},false);

audio.addEventListener("stalled", function(){
var todoItems = document.getElementById('stream_status');
todoItems.innerHTML = 'Buffering...';
},false);

audio.addEventListener("loadeddata", function(){
audio.play();
},false);

</script>



 

Here is the code I use to trigger the audio. It is inclused in a function of its own that runs on a button click.

 

var audio = new Audio();

audio.pause();
audio.setAttribute("src", result.rows.item(q).url_);
audio.load();

 

 

Does this help you?

 

Developer
burakk
Posts: 149
Registered: ‎04-23-2011
My Device: BlackBerry 9700 Bold

Re: Detect When an HTML5 audio stream has started to play or failed to load

Thank you mobilvar, I already solved the issue.

 

The statement:

 

audio.load(); 

 

What's this for? I do not use it, I use:

 

audio.setAttribute("preload", true);

 

instead.

 

 

Regards

Trusted Contributor
mobilvar
Posts: 119
Registered: ‎11-28-2011
My Device: 9930

Re: Detect When an HTML5 audio stream has started to play or failed to load

The audio load, method is what you use to update the audio element after a change in the src.

I don't know a lot of detail more than that, but it's worked for me.