javascript - 在移动设备中播放音频——Angular ng-click，DOM 异常 35 NotAllowedError

Question

我有一个正在制作的网站，这是一个非常旧的网站，我对彻底改造不感兴趣。

我有一个 Controller ，可以从 soundcloud 播放列表中获取一堆轨道，以及一些循环播放它们的代码

      <div class='song' ng-repeat="song in SCSongs track by $index" ng-click="$root.play(song, $index)">
        <i
          ng-show='$root.playing.id !== song.id'
          class="fa fa-play-circle-o" aria-hidden="true">
        </i>
        <i
          ng-show='$root.playing.id === song.id && !$root.playing.paused'
          class="fa fa-pause-circle-o"
          aria-hidden="true">
        </i>
        <i
          ng-show='$root.playing.id === song.id && $root.playing.paused'
          class="fa fa-play-circle-o" aria-hidden="true">
        </i>
        {{song.title}}
      </div>

问题是自 Safari 11 和新版本的 Chrome 开始，单击播放按钮会导致 Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current上下文，可能是因为用户拒绝了权限。

我是否需要使用 html audio 5 控件，而不是利用 soundclouds SC.play() 的点击处理程序(假设这基本上是 new Audio().play( )

safari 的文档没有那么有用，因为它说如果有点击，就会授予权限，这正是我所拥有的。

我很感激处理过类似事情的人的见解。我们需要使用$event来触发播放吗？这次更新一定破坏了所有的事情。

谢谢

Answer 1

在使用 safari 的地方，你应该放弃使用“自动播放”。 要处理 DOM 异常，您可以附加一个 catch 回调。

示例:

document.getElementsByTagName('video')[0].play().catch(function(error) {
  console.log(error)
})