在javascript中自动播放音频对象答案

【问题标题】：Automatically play Audio object in javascript在javascript中自动播放音频对象
【发布时间】：2021-07-30 16:59:29
【问题描述】：

我用new Audio() 创建了一个音频对象。

const audio = new Audio()

我知道，播放音频用户交互是强制性的。所以我尝试了以下代码。

audio.addEventListener("canplaythrough", () => {
   audio.play()
});

但它再次抛出 Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互错误。如何解决？

【问题讨论】：

用户交互后只能调用play，例如点击一下。
浏览器不允许您在没有用户与页面交互的情况下自动播放音频/视频。这是为了防止诸如广告之类的事情，尽管有一个应该有效的解决方法。在您的<audio> 元素上，尝试添加autoplay 和muted。像<audio autoplay muted src=""></audio> 这样的东西。见：developer.mozilla.org/en-US/docs/Web/Media/…
是的，我知道窗口需要用户交互。这就是添加“canplaythrough”事件监听器的原因。我需要尽快播放音频。就我而言，这不是 dom 音频元素。而且我不认为有办法将静音属性添加到音频对象。

标签： javascript

【解决方案1】：

正如评论中提到的@Unmitigated，用户交互是播放音频所必需的。如果要播放用户交互，修改代码如下

audio.addEventListener("canplaythrough", () => {
   audio.play().catch(e => {
      window.addEventListener('click', () => {
         audio.play()
      })
   })
});

已编辑 添加{ once: true } 只触发一次。

audio.addEventListener("canplaythrough", () => {
   audio.play().catch(e => {
      window.addEventListener('click', () => {
         audio.play()
      }, { once: true })
   })
});

【讨论】：

您可能希望将{ once: true } 添加为.addEventListener() 的第三个参数，这样您就不会在用户每次点击任何位置时开始播放。（尤其是在音频暂停之后。）

【解决方案2】：

为了允许自动播放，用户需要与页面进行交互，或者音频/视频需要静音。

你可以试试：

let audio = new Audio('a_file');

audio.muted = true;
audio.addEventListener("canplaythrough", () => {
   audio.play()
});

【讨论】：