DOMException: The play() request was interrupted because the media was removed from the document

[EvgeniyDoctor]

On linux (manjaro 22.1.2) in brave browser (Version 1.51.118 Chromium: 113.0.5672.126 (Official Build) (64-bit)) playback does not work (and in firefox), i get this error:

DOMException: The play() request was interrupted because the media was removed from the document.

On windows 10 in the same browser of the same version everything works well, no errors. I edited my play function, so now it works sometimes and sometimes it does not; sometimes can play 2 audio streams at the same time (on linux). Before it was player.play() only.

function playerPlay(){
    var thePromise = player.play()
    if (thePromise != undefined) {
        thePromise.then(function(_) {
            player.stop();
            player.currentTime = 0;
            player.play();
        })
        .catch(error => {
            d("! Error play")
        });
    }
    else {
        player.play()
    }
}

On the demo page most of the stations works.

Include:

<script src="/static/libs/player/icecast-metadata-player-1.16.1.main.min.js"></script>
<script src="/static/libs/player/icecast-metadata-player-1.16.1.synaudio.min.js"></script>
<script src="/static/libs/player/icecast-metadata-player-1.16.1.mediasource.min.js"></script>
<script src="/static/libs/player/icecast-metadata-player-1.16.1.vorbis.min.js"></script>
<script src="/static/libs/player/icecast-metadata-player-1.16.1.common.min.js"></script>

If i go to ip:port/name.ogg in the browser, everything works fine.

[eshaz]

~Can you try this out using the demo page and see if the issue persists?~

Edit: I see you did test with the demo.

One other thing, you should avoid using var and use const or let for declaring variables, except for very special cases. var hoists the declaration to the top of your code, which you probably don't want.

Feel free to reference and copy the example code if you want and use that for your website.

The general flow is:

• When you want to play a new endpoint:
  • If an instance already exists
  • stop the old instance
  • wait for the stop promise to complete
  • If you passed in an Audio element in the options, call detachAudioElement() on the instance.
  • create a new instance with the new endpoint and your options
  • play the new instance
• If using the same endpoint, continue to use the same instance to play and stop.

[eshaz]

I won't be able to help much unless I can reproduce the error myself. Do you have a link to your website I can try or a link to your code?

In the meantime, to check if your browser environment is causing this error, can you try playing the streams here. Each button on the website represents a unique stream and creates its own instance of IcecastMetadataPlayer when clicked. You should be able to play as many streams simultaneously as you want.

[EvgeniyDoctor]

Thank you, but actually, i do not need help anymore. I made all the functionality from scratch by myself without any js lib and it works. Even on iOS. So this issue does not matter for me anymore.

And i tested your link a little bit.

• Des Moines PF: works only All, Interop and Law Dispatch
• Des Moines AF: 0/3 works
• ISICS: works only Law Dispatch
• SARA: All, Interop with frequently scanning