Search code examples
javascriptjplayericecast

jPlayer with Icecast stream: how to play stream from live position (not last position) after pause?


I have a website that plays an icecast stream with jPlayer.

I want the play button to always start the stream from the live position (like a radio) instead of picking the stream back up from the last position. Attempted behavior: play plays the stream live > pause suspends / discards the stream / optionally stops downloading it > play plays the stream from live position / reloads the stream.

There is a way to monitor the current media position with $.jPlayer.event.timeupdate as mentioned in comment on this post, and use that to resume playing from the end of the stream.

Alternatively, there must be a way to discard the stream when pausing and then reloading it when hitting play again. I think it is what is happening on this jPlayer demo. But I don't know how to do that part:

The error event is used with a check for the URL_NOT_SET error type to jPlayer("setMedia",stream) back to the live-stream again and jPlayer("play") it.

I am new to javascript and can't make it work. I can't find another post of someone trying to do that. I tried with the "playhead" at 100 which does not start the stream at all.

Here is the code I am using:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "http://realbadradio.ddns.net:21000/mpd.mp3"
            })
        },
    });
});
//]]>
</script>

Here the repo to my website for full code.


Solution

  • I finally found the solution thanks to this answer on a different question related to achieving autoplay in jPlayer.

    SOLUTION

    $(document).ready(function(){
      const stream = {
        // stream address
        mp3: 'http://realbadradio.ddns.net:21000/mpd.mp3'
      };
      ready = false;
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          ready = true;
          $(this).jPlayer("setMedia", stream);
        },
        pause: function() {
          $(this).jPlayer("clearMedia");
        },
        error: function(event) {
          if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
            // Setup the media stream again and play it.
            $(this).jPlayer("setMedia", stream).jPlayer("play");
          }
        },
        keyEnabled: true,
        preload: 'none',
      });
    });