时间戳

首页 > 解决方案 > 播放音频时出现承诺错误 [JS]

javascript - 播放音频时出现承诺错误 [JS]

问题描述

我试图用Javascript点击播放音频，但每次我这样做时，chrome都会抛出错误

未捕获（承诺）DOMException

我读了一些关于它的文章，每个人都说当你试图
自动播放它时会发生这种情况，没有用户的操作，但我的情况不同。这是我的代码：

let correctSoundEffect = new Audio('correct.mp3'); const checkAnswer = () =>{ correctSoundEffect.play(); }

这是html： <button onclick="chechAnswer()">Play</button>

标签： javascripthtml

解决方案

该错误是由于加载资源的问题造成的。
您的控制台中可能有先前的错误消息，例如

加载资源失败：服务器响应状态为 404 () correct.mp3:1

或类似的，或者，您的资源无法被解析为有效的音频文件。

const src="willfail.mp3";
let correctSoundEffect = new Audio(src);
const checkAnswer = () =>{
    correctSoundEffect.play();
    log.textContent = "check your browser's console";
}
<button onclick="checkAnswer()">Play</button>
<pre id="log"></pre>

无论如何，您可能想检查您的开发工具的网络面板并知道您的代码应该可以正常工作，即使 HTML 属性事件确实不是一个好习惯......

const src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3";
let correctSoundEffect = new Audio(src);
const checkAnswer = () =>{
    correctSoundEffect.play();
}
<button onclick="checkAnswer()">Play</button>

重写这个的更好方法：

const src = "https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3";
let correctSoundEffect = new Audio(src);
document.getElementById('audio_player')
 .addEventListener('click', (evt) => {
   correctSoundEffect.play();
 });
<button id="audio_player">Play</button>

推荐阅读