admin管理员组

文章数量:1410731

I'm trying to launch automatically a webradio on my html's file. Currently using autoplay fails, I assume the radio miss the time to load some data hence the autoplay just block. I have created a setTimeout function to handle that. Now the function refuses to launch on Firefox and Opera. The error log of Firefox is far most informative, here reproduced:

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

here my html's snippet:

<body>
  <audio controls src="http://5.63.151.52:7136/stream?icy=http" autoplay id="myAudio">
                Your browser does not support the
                <code>audio</code> element.
        </audio>

  <button onclick={goPlay()}>
            Play
        </button>

  <script>
    // function goPlay(){
    //     console.log("in goplay")
    setTimeout(() => {
        var x = document.getElementById("myAudio");
        // function playAudio() {
        x.play();
      },
      1000
    )
    // }
  </script>
</body>

I'm trying to launch automatically a webradio on my html's file. Currently using autoplay fails, I assume the radio miss the time to load some data hence the autoplay just block. I have created a setTimeout function to handle that. Now the function refuses to launch on Firefox and Opera. The error log of Firefox is far most informative, here reproduced:

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

here my html's snippet:

<body>
  <audio controls src="http://5.63.151.52:7136/stream?icy=http" autoplay id="myAudio">
                Your browser does not support the
                <code>audio</code> element.
        </audio>

  <button onclick={goPlay()}>
            Play
        </button>

  <script>
    // function goPlay(){
    //     console.log("in goplay")
    setTimeout(() => {
        var x = document.getElementById("myAudio");
        // function playAudio() {
        x.play();
      },
      1000
    )
    // }
  </script>
</body>

How handle this situation?

Any hint would be great, thanks

  • javascript
  • html
  • html5-audio
  • internet-radio
Share Improve this question edited Jul 1, 2022 at 18:38 Jonas 129k103 gold badges328 silver badges405 bronze badges asked Apr 10, 2019 at 1:10 Diagathe JosuéDiagathe Josué 12.2k14 gold badges49 silver badges93 bronze badges 2
  • 2 Autoplay is getting phased out slowly from most major browsers. – Phix Commented Apr 10, 2019 at 1:13
  • Is this React or Handlebars or ...? <button onclick={goPlay()}> – zer00ne Commented Apr 10, 2019 at 4:58
Add a ment  | 

2 Answers 2

Reset to default 3

The Firefox error is telling you exactly what's happening. The autoplay isn't working because the user (or more specifically, the browser - see here) is blocking it.

Any playback that happens before the user has interacted with a page via a mouse click, printable key press, or touch event, is deemed to be autoplay and will be blocked if it is potentially audible.

In my case, when I tried to execute document.getElementsByTagName("video")[0].play() in the browser console, above the error message you mentioned, there was a warning Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.. I was able to execute the code by muting the video first or selecting "Allow Audio and Video" for the website permissions in Firefox.

本文标签： javascriptUse autoplay to play a radio station using HTML5 audioStack Overflow

版权声明：本文标题：javascript - Use autoplay to play a radio station using HTML5 audio - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744858930a2628947.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。