Search code examples
streaminghtml5-audiosoundmanager2

Streaming through SoundManager2 for webradios is pending for a very long time


I'm developping a little javascript snippet that allow a user to listen a webradio in streaming using soundManager2. By giving an URL to this snippet, the stream is sending me music so it's cool, it works.

Yes, but...

Query to the URL can be very very long (above 2-3 min!). I would like to know if there's a workaround or option I can use to make this query faster. Why, opening my m3u (which just contains the mp3 URL inside) with Windows Media Player, the loading spend only 5-10 sec max, while acces to the same URL in a browser or with soundManager2 is during 2-3 min, sometimes more?

Here is my jsFiddle trying with the OuïFM (French radio). The waiting time, for this radio, is about 115 seconds.

var url = 'http://ice39.infomaniak.ch:8000/ouifm3.mp3';
var time = 0;    
var timing = setInterval(function() {
    $('#Streaming').html((time / 10) + ' seconds.');
    time++;
}, 100);
var start = new Date;
soundManager.onready(function() {
    soundManager.createSound({
        id:'Radio', 
        url:url, 
        autoLoad: true,
        autoPlay: true,
        multiShot: false,
        onload: function() {
            $('#Loading').css('display', 'none');
            clearInterval(timing);
        }
    });
});

Solution

  • Your fiddle was broken because SoundManager2's javascript wasn't loading properly. After I fixed that (and some of your code), I was able to get the audio playing in under a second: http://jsfiddle.net/y8GDp/

    var url = 'http://ice39.infomaniak.ch:8000/ouifm3.mp3';
    var time = 0;
    var timer = $('#Streaming');
    var loading = $('#Loading');
    var start = new Date;
    var seconds = function(){
        var diff = ((new Date).getTime() - start.getTime()) / 1000;
        return diff + ' seconds.';
    };
    var timing = setInterval(function() {
        timer.html(seconds());
    }, 100);
    soundManager.onready(function() {
        soundManager.createSound({
            id:'Radio', 
            url:url, 
            autoPlay: true,
            onplay: function() {
                clearInterval(timing);
                loading.html('Finished loading');
                timer.html(seconds());
            }
        });
    });