Google Chrome 在播放 audio.play() 方法时未捕获（承诺）DOMException [重复]

Posted 2023-05-07

【中文标题】Google Chrome 在播放 audio.play() 方法时未捕获（承诺）DOMException [重复]

【英文标题】：Google Chrome Uncaught (in promise) DOMException while playing audio.play() method [duplicate]

【发布时间】：2020-05-14 23:57:47

【问题描述】：

$scope.sound = function () 
    // $scope.totalQueueList -->response is saved in this variable

    if ($scope.totalQueueList) 
        var audio = new Audio();
        audio.src = 'rest/assets/images/beep.mp3';
        var playedPromise = audio.play();               
        if (playedPromise) 
            playedPromise.catch((e) => 
                console.log(e)
                if(e.name === 'NotAllowedError' || e.name === 'NotSupportedError') 
                    console.log(e.name);
                    audio.loop = true
                
            ).then(() => 

            );
        
    

在对 chrome 浏览器进行手动页面刷新时，此代码不起作用。它为 audio.play() 方法提供 DOMException。 对于没有浏览器页面刷新的正常流程，它可以工作。请提供解决方案。

【参考方案1】：

您必须等到您的浏览器加载了声音资源。当资源准备好播放时，使用方法canPlayThrough得到通知：

$scope.sound = function() 
  // $scope.totalQueueList -->response is saved in this variable

  if ($scope.totalQueueList) 
    var audio = new Audio();
    audio.src = 'rest/assets/images/beep.mp3';

    // when the sound has been loaded, execute your code
    audio.oncanplaythrough = (event) => 
      var playedPromise = audio.play();
      if (playedPromise) 
        playedPromise.catch((e) => 
          console.log(e)
          if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') 
            console.log(e.name);
            audio.loop = true
          
        ).then(() => 

        );