【React-music项目问题】The AudioContext was not allowed to start. It must be resumed (or created) after a

最新推荐文章于 2025-03-18 17:51:30 发布

原创最新推荐文章于 2025-03-18 17:51:30 发布 · 1.4w 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #reactjs

收录于

疑难点记录同时被 2 个专栏收录

21 篇文章

订阅专栏

React_music项目

8 篇文章

订阅专栏

在项目开发中遇到一个问题，由于浏览器的安全策略，音频上下文必须在用户交互后才能启动。通过监听mousedown事件并在用户点击时恢复音频上下文解决了这个问题，虽然仍有警告但不影响功能。参考了Tone.js库的解决方案，只需在入口处添加事件监听即可。

做项目的时候出现的问题：The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
在这里插入图片描述
看这个意思是说必须要用户手动进行一个操作，才能启用音频的相关功能，不能一打开就自动调用，
查到的解决帖子：参考1 参考2

帖子中也是说要进行手动操作，比如加个btn，手动点击的时候就调用，然后再进行自己的项目想要的操作

在github上有一个解决方法 https://github.com/Tonejs/Tone.js/issues/341

在这里插入图片描述
所以我只要在index入口处，加上监听mousedown，一按下就给context.resume了就行

document.documentElement.addEventListener('mousedown', () => {
  if (Tone.context.state !== 'running')
    Tone.context.resume();
});```
这样问题就解决了，虽然依旧会有警告，但是不影响