解決Babylon.js中AudioContext was not allowed to start異常問題

更新時間：2023年04月03日 14:52:13 作者：方寸匠心

這篇文章主要介紹了解決Babylon.js中AudioContext was not allowed to start異常問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

BabylonJS中使用音頻引擎時遇到錯誤

當(dāng)在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

這個錯誤是因?yàn)闉g覽器的安全策略要求音頻上下文必須在用戶事件（例如單擊、鍵盤按鍵等）中啟用。這意味著，如果您嘗試在沒有用戶事件的情況下自動播放音樂，則會拋出此錯誤。

為了解決這個問題，我們需要啟用音頻上下文。在BabylonJS中，可以通過AudioEngine()類來創(chuàng)建音頻上下文。

您可以使用以下代碼在用戶事件觸發(fā)后啟用音頻上下文：

let audioContext = new AudioEngine().audioContext;
audioContext.resume();

在以上示例中，我們創(chuàng)建了一個AudioEngine實(shí)例，并從中獲取了音頻上下文。接下來，我們調(diào)用resume()方法啟用音頻上下文。請注意，在啟用之前，必須先檢查音頻上下文是否存在。如果不存在，則需要將其創(chuàng)建。

這樣就可以成功地啟用音頻上下文，然后您可以在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;
    }

運(yùn)行結(jié)果如下：

不能播放聲音，在瀏覽器控制臺

查看日志如下：

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異常問題的詳細(xì)內(nèi)容，更多關(guān)于解決Babylon.js異常的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: