音频播放错误的异常 [已解决]

最新推荐文章于 2024-06-17 08:52:59 发布

阿豪boy

最新推荐文章于 2024-06-17 08:52:59 发布

阅读量2.6k

点赞数 2

文章标签： javascript exception js vue java

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064842

版权

原文链接: 音频播放错误的异常 [已解决]

上一篇: css 九宫格布局

下一篇: 随机数和数组乱序

会有两个错误

chrome

The play() request was interrupted by a call to pause().

safari

AbortError: The operation was aborted

错误的产生是由于在播放时资源未加载完毕, 在执行play后的等待时间内, 调用了pause方法导致的

播放时使用canplay 事件判断是否可以播放, 使用额外的标记位来记录状态, 只要在资源加载完成后才能播放和暂停, 或者直接catch住异常即可

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event

play 返回一个promise, 如果有异常需要使用.catch语句捕获异常, 不能使用try catch, 这种语法不能捕获promise的异常

低端机可能会不返回promise, 需要特殊判断

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <audio id="audio" src=""></audio> -->
    <script>
      // const a = document.getElementById('audio')

      const h = () => {
        const a = document.createElement("audio");
        a.setAttribute("src", "./t.mp3");
        try {
          const p = a.play();
          console.log("p", p);
          p.catch((e) => console.log("1,", e));
        } catch (e) {
          console.log("try", e);
        }

        try {
          a.pause();
        } catch (e) {
          console.log("catch", e);
        }
      };
      h()
      document.addEventListener("click", h);

      window.addEventListener("error", (e) => {
        console.log("error", e);
      });
    </script>
  </body>
</html>