Web and WebWorks Development

[mobilvar]

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?

[Puzzling · Accepted solution]

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

[mobilvar · Accepted solution]

Thank you.

[icecappacino]

Does this work on simulators or real devices or both?

[mobilvar]

These listeners work in ripple and on real devices so that means it should work on the simulators too.

[mobilvar]

I have only used them on real devices not simulators.

[burakk]

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.

[mobilvar]

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?

[burakk]

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

[mobilvar]

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.