播放通知声音时未捕获（承诺）DOMException

Question

我正在处理我的项目中的通知，当有新订单时通知用户。并且每 5 秒更新一次队列计数。

<audio id="foobar" src="{{URL::to('/')}}/assets/notif_sounds/plucky.mp3" preload="auto" autoplay="false"> 

 <script>
     setInterval(function(){ 
        $.ajax({
          type:'POST',
          url:'{{URL::to('/')}}/get-count',
          success:function(data)
          {    
            $('#qCount').html(data);
            var sample = document.getElementById("foobar");
            sample.play();
           }
        });
     }, 5000);  
   </script>

我试过这段代码 sn-p 仍然触发 DOMException 错误

var promise = document.querySelector('audio').play();

if (promise !== undefined) {
    promise.then(_ => {
        // Autoplay started!
    }).catch(error => {
        // Autoplay was prevented.
        // Show a "Play" button so that user can start playback.
    });
}

有什么办法可以消除这个错误吗？

Answer 1

你可以尝试如下，

<script>
     // Create Audio object.
     var audio = new Audio('{{URL::to('/')}}/assets/notif_sounds/plucky.mp3');

     setInterval(function(){ 
        $.ajax({
          type:'POST',
          url:'{{URL::to('/')}}/get-count',
          success:function(data)
          {    
            $('#qCount').html(data);
            var sample = document.getElementById("foobar");

            // Play whenever you want.
            audio.play();
           }
        });
     }, 5000);  
   </script>