Uncaught (in promise): The play() request was interrupted by a call to pause().
场景
JavaScript 在调用 Audio 播放声音的时候,因为处理不当经常会出现上面的错误提示。
问题分析
在调用 Audio 的 play() 方法之后就立即被之后一次调用 pause() 方法中断了。错误提示中明确指出了调用 play 方法是返回了一个Promise对象。那么上述的问题就有了解决方法: 在 play() 执行成功后,播放音频,然后执行后续操作。
audio.play()
写个例子来测试 audio.play():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio.play()</title>
</head>
<body>
<script>
(function (argument) {
// 音频文件
var src = "./rank.mp3";
// 初始化Aduio
var audio = new Audio();
audio.src = src;
console.log(audio.play() instanceof Promise); // true
})();
</script>
</body>
</html>
解决方案
好了, 现在只需要对上面的例子做一点改动就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio.play()</title>
</head>
<body>
<script>
(function (argument) {
// 音频文件
var src = "./rank.mp3";
// 初始化Aduio
var audio = new Audio();
var playPromise;
audio.src = src;
playPromise = audio.play();
if (playPromise) {
playPromise.then(() => {
// 音频加载成功
// 音频的播放需要耗时
setTimeout(() => {
// 后续操作
console.log("done.");
}, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
}).catch((e) => {
// 音频加载失败
});
}
})();
</script>
</body>
</html>