iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >解决Babylon.js中AudioContextwasnotallowedtostart异常问题
  • 945
分享到

解决Babylon.js中AudioContextwasnotallowedtostart异常问题

解决Babylon.js异常Babylon.js异常 2023-05-14 08:05:47 945人浏览 薄情痞子
摘要

目录Babylonjs中使用音频引擎时遇到错误示例源码(修改前):不能播放声音,在浏览器控制台示例源码(修改后):BabylonJS中使用音频引擎时遇到错误 当在BabylonJS

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异常的资料请关注编程网其它相关文章!

--结束END--

本文标题: 解决Babylon.js中AudioContextwasnotallowedtostart异常问题

本文链接: https://www.lsjlt.com/news/202980.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作