CODEWITHSUNDEEP
jqueryhtml5-audio
Tormy Van Cool
Tormy Van Cool

Reputation: 801

<audio> how to prevent cache on streamed file?

I'm creating a small HTML5 audio player, that plays streaming file. The controls (just play and pause) are managed by jQuery and they works fine.

But what I see is that when I stop playing and I restart to play, it doesn't refresh the audio buffer keeping in track with the streamed music ... but just pauses it, and restarts from the point in which I paused. To correctly restart the file streaming (I mean: keeping the sync to the streaming), I have to press F5!

To try to force an update each tipe PLAY is pressed, I added the classical timestamp to the URL, and added (and removed) the html tags according to the buttons clicked, but it is unsuccessful.

I also removed the tag "preload" from the Audio, but also this, didn't work.

How can I totally refresh the streamed file, emptying the buffer, each time I press PLAY? keeping the sync with the original streamed file instead of to be constrained to press F5?

HTML

...
...
<audio id="music" loop="false">
</audio>
...
...

jQuery

...
...
$('#play').click(function() {
    var d = new Date();
    var n = d.getTime();
    var streaming = "<source src=\"/radio/live.php?dev=" + n + "\" type=\"audio/mp3\">" +   "<source src=\"/radio/live_2.php?dev=" + n + "\" type=\"audio/ogg\">";
    $('#music').html(streaming);
    $('#music')[0].play();
    $('#play').css("visibility", "hidden");
    $('#pause').css("visibility", "visible");
});

$('#pause').click(function() {

    $('#music').empty();
    $('#music')[0].pause();
    $('#play').css("visibility", "visible");
    $('#pause').css("visibility", "hidden");
});
...
...

Upvotes: 2

Views: 1742

Answers (1)

Tormy Van Cool
Tormy Van Cool

Reputation: 801

I did find a way. Perhaps this IS THE solution, perhaps not, but it works.

I did add this line when Pause is clicked

location.reload(true );

Thus the code for the Pause is now here below. In other words, when the Puse is clicked it does:

$('#pause').click(function() {
    location.reload(true ); // reload the content and flush any cache or buffer
});

and once PLAY is clicked, everything starts correctly in Synch with the streaming

Upvotes: 2

Related Questions