解决Babylon.js中AudioContext was not allowed to start异常问题
更新时间：2023年04月03日 14:52:13 作者：方寸匠心
这篇文章主要介绍了解决Babylon.js中AudioContext was not allowed to start异常问题方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
BabylonJS中使用音频引擎时遇到错误
当在BabylonJS中使用音频引擎时，可能会遇到以下错误：
audioEngine.ts:172 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
这个错误是因为浏览器的安全策略要求音频上下文必须在用户事件（例如单击、键盘按键等）中启用。这意味着，如果您尝试在没有用户事件的情况下自动播放音乐，则会抛出此错误。
为了解决这个问题，我们需要启用音频上下文。在BabylonJS中，可以通过AudioEngine()类来创建音频上下文。
您可以使用以下代码在用户事件触发后启用音频上下文：
let audioContext = new AudioEngine().audioContext; audioContext.resume();
在以上示例中，我们创建了一个AudioEngine实例，并从中获取了音频上下文。接下来，我们调用resume()方法启用音频上下文。请注意，在启用之前，必须先检查音频上下文是否存在。如果不存在，则需要将其创建。
这样就可以成功地启用音频上下文，然后您可以在BabylonJS中播放音频文件而不会遇到错误。
示例源码(修改前)：
playingSoundSprites = (scene: Scene, canvas: HTMLCanvasElement) => {
var freeCamera = new FreeCamera("freeCamera", new Vector3(0, 0, 0), scene);
var theSound = new Sound("allSounds", "https://playground.babylonjs.com/sounds/6sounds.mp3", scene, null, {autoplay: false});
var isPlaying = 0;
let audioContext = new AudioEngine().audioContext;
var soundArray = [
[0.0, 5.000],
[5.100, 6.600],
[12.000, 1.600],
[14.000, 9.200],
[23.000, 7.900],
[31.000, 2.800],
];
theSound.onended = function() {
isPlaying = 0;
console.log("not playing");
};
var advanceTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
var uiPanel = new StackPanel();
uiPanel.width = "220px";
uiPanel.fontSize = "14px";
uiPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
uiPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
advanceTexture.addControl(uiPanel);
var button = Button.CreateSimpleButton("but", "Play All Sounds");
button.paddingTop = "10px";
button.width = "150px";
button.height = "50px";
button.color = "white";
button.background = "green";
button.onPointerDownObservable.add(function() {
if (isPlaying === 0) {
isPlaying = 1;
theSound.play();
console.log("playing");
}
});
uiPanel.addControl(button);
var button1 = Button.CreateSimpleButton("but1", "Play Random Sound");
button1.paddingTop = "10px";
button1.width = "150px";
button1.height = "50px";
button1.color = "white";
button1.background = "green";
button1.onPointerDownObservable.add(function() {
if (isPlaying === 0) {
isPlaying = 1;
var randomSound = Math.floor(Math.random() * 6);
theSound.play(0, soundArray[randomSound][0], soundArray[randomSound][1]);
console.log("playing");
}
});
uiPanel.addControl(button1);
return scene;
}
运行结果如下：
不能播放声音，在浏览器控制台
查看日志如下：
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
示例源码（修改后）：
playingSoundSprites = (scene: Scene, canvas: HTMLCanvasElement) => {
var freeCamera = new FreeCamera("freeCamera", new Vector3(0, 0, 0), scene);
var theSound = new Sound("allSounds", "https://playground.babylonjs.com/sounds/6sounds.mp3", scene, null, {autoplay: false});
var isPlaying = 0;
var soundArray = [
[0.0, 5.000],
[5.100, 6.600],
[12.000, 1.600],
[14.000, 9.200],
[23.000, 7.900],
[31.000, 2.800],
];
theSound.onended = function() {
isPlaying = 0;
console.log("not playing");
};
var advanceTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
var uiPanel = new StackPanel();
uiPanel.width = "220px";
uiPanel.fontSize = "14px";
uiPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
uiPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
advanceTexture.addControl(uiPanel);
var button = Button.CreateSimpleButton("but", "Play All Sounds");
button.paddingTop = "10px";
button.width = "150px";
button.height = "50px";
button.color = "white";
button.background = "green";
button.onPointerDownObservable.add(function() {
let audioContext = new AudioEngine().audioContext;
audioContext!.resume().then(() => {
if (isPlaying === 0) {
isPlaying = 1;
theSound.play();
console.log("playing");
}
});
});
uiPanel.addControl(button);
var button1 = Button.CreateSimpleButton("but1", "Play Random Sound");
button1.paddingTop = "10px";
button1.width = "150px";
button1.height = "50px";
button1.color = "white";
button1.background = "green";
button1.onPointerDownObservable.add(function() {
let audioContext = new AudioEngine().audioContext;
audioContext!.resume().then(() => {
if (isPlaying === 0) {
isPlaying = 1;
var randomSound = Math.floor(Math.random() * 6);
theSound.play(0, soundArray[randomSound][0], soundArray[randomSound][1]);
console.log("playing");
}
});
});
uiPanel.addControl(button1);
return scene;
}以上就是解决Babylon.js中AudioContext was not allowed to start异常问题的详细内容，更多关于解决Babylon.js异常的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
相关文章
electron-builder允许安装时请求提升权限的场景分析
electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件,这篇文章给大家介绍electron-builder允许安装时请求提升权限的相关知识,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下2020-06-06
写suggest的时候，有时我们快速删除输入框的文字后，但是suggest下拉列表还有出现，导致的原因是因为ajax异步请求造成的，下面通过本文给大家分享下解决方法，感兴趣的朋友一起看看2016-12-12
LRU（Least Recently Used）缓存淘汰算法是一种常见的缓存淘汰策略，它的核心思想是优先淘汰最近最少使用的缓存数据，以保证缓存中的数据始终是最热门的。本文主要介绍了一些关于如何实现LRU缓存淘汰算法的方法，感兴趣的小伙伴可以参考一下2023-04-04
这篇文章主要为大家详细介绍了js实现ATM机存取款功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果，本文大概给大家分享三种解决方案，每种方案给大家详细剖析通过代码解析哪种方案更适合，感兴趣的朋友跟随小编一起看看吧2022-10-10
这篇文章主要介绍了JS实现图表日期分类按色显示,文中需要注意若 iOS 手机预览时显示NaN ,可能是时间格式的问题,本文给大家介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了JS获取文件大小的方法,结合实例总结分析了JavaScript获取文件大小的常用技巧,并给出了判断文件格式与大小的完整实例供读者参考,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了js实现web简易版的消灭星星，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
现在遇到这样的需求，要求输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。下面小编给大家分享同js和ajax实现百度智能搜索框，需要的的朋友参考下实现代码2017-08-08
最新评论