用howler组件设置自动播放时候出现这个问题 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
时间: 2023-06-20 08:07:28 浏览: 82
这个问题是因为浏览器安全机制的限制导致的,浏览器要求音频上下文(AudioContext)必须在用户交互(例如点击、滚动等)之后才能启动。因此,如果你想要自动播放音频,你需要先让用户进行一次交互操作,如点击按钮,然后在回调函数中开始播放音频。
你可以尝试在用户交互后,通过以下代码来创建和启动音频上下文:
```javascript
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var sound = new Howl({
src: ['sound.mp3'],
autoplay: true,
loop: true,
volume: 0.5,
onplay: function() {
var source = audioCtx.createBufferSource();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'sound.mp3');
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
var audioData = xhr.response;
audioCtx.decodeAudioData(audioData, function(buffer) {
source.buffer = buffer;
source.connect(audioCtx.destination);
source.start(0);
});
};
xhr.send();
}
});
```
这样就可以在用户交互后自动播放音频了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)