HTML5 / Javascript Web音頻api-SoundManager

Question

我正在嘗試為一個簡單的游戲創建一個聲音管理器，我知道該應用程序不是必需的，但對於我正在學習的體驗來說，則是必需的。 我嘗試了幾種不同的方法，但都沒有真正的成功。 以下是我目前的嘗試。 我相信我的主要問題是我的XML請求，因為每次嘗試似乎都不會加載我的文件。

任何關於我要去哪里或我應該做些什么的建議都將不勝感激。

我的音頻管理器（還不夠完善，應該加載並播放聲音嗎？）

var audioctx = new (window.AudioContext || window.webkitAudioContext)();
function AudioManager(totalsounds) {
this.ctx = audioctx;
this.sounds = {};
this.totalSounds = totalsounds;
this.loaded = 0;
this.masterGain = this.ctx.createGain(); // master gain control
this.masterGain.connect(this.ctx.destination);
this.loadSound = function(name) {
    this.sounds[name] = new Sound(name, this);
    console.log("sound Loaded?");
};
this.play = function(name) {
    if(this.sounds[name] !== undefined)
    {
        this.sounds[name].source.start(0);
        console.log("playing?");
    } else
    {
        console.log(name + " - sound not found!");
    }
};
};

經理創建並存儲在其中的聲音對象。（代碼似乎從不加載文件）

function Sound(name, audiomanager){
this.manager = audiomanager;
this.source;
this.request = new XMLHttpRequest();
this.request.open('GET', name, true);
this.request.responseType = 'arraybuffer';
console.log(" i think code stops here");
this.request.onload = function() {
    this.manager.loaded += 1;
    console.log("loaded?");
    this.manager.ctx.decodeAudioData(this.request.response).then(function(buffer){
        this.source = manager.ctx.createBufferSource();
        this.source.buffer = buffer;
        this.source.connect(manager.masterGain);
    });
};
    this.request.send();
}

很久以后，我嘗試如下進行測試。

var audio = new AudioManager(1);
audio.loadSound("test.mp3");
if(audio.loaded == audio.totalSounds){setTimeout(game, 50);}
function game() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    setInterval(function() {
        if(buttonDown[5])
        {
            audio.play("test.mp3");
        }
    },100);

在此先感謝您的幫助。

Answer 1

好的，我知道了。 如果有人在尋找類似問題的答案時發現了此問題，那么這是一個有效的版本（盡管仍然非常粗糙和丑陋）。

var audioctx = new (window.AudioContext || window.webkitAudioContext)();
function AudioManager(totalsounds) {
this.ctx = audioctx;
this.sounds = {};
this.totalSounds = totalsounds;
this.loaded = 0;
this.masterGain = this.ctx.createGain(); // master gain control
this.masterGain.connect(this.ctx.destination);
this.loadSound = function(name, delaytime) {
    this.sounds[name] = new Sound(name, this, delaytime);
    console.log("sound Loaded?");
};
this.play = function(name) {
    var buffer = this.ctx.createBufferSource();
    if(this.sounds[name] !== undefined && !this.sounds[name].delayed)
    {
        buffer.buffer = this.sounds[name].source;
        buffer.connect(this.masterGain);
        buffer.start(0);
        console.log("playing?");
        this.sounds[name].delaySet();
    } else if(this.sounds[name].delayed)
    {
        console.log("audio delayed = " + this.sounds[name].delayed);
    } else
    {
        console.log(name + " - sound not found!");
    }

};
};
function Sound(name, audiomanager, delaytime){
this.manager = audiomanager;
this.source;
this.delay = delaytime;
this.delayed = false;
var self = this;
this.delaySet = function(){
    console.log("RESET");
    self.delayed = true;
    setTimeout(function(){self.delayed = false;}, self.delay);
};
this.request = new XMLHttpRequest();
this.request.open('GET', name, true);
this.request.responseType = 'arraybuffer';
console.log("stops here");
this.request.onload = function() {
    self.manager.loaded += 1;
    console.log("loaded?");

self.manager.ctx.decodeAudioData(self.request.response).then(function(buffer){
        self.source = buffer;
    });
};
this.request.send();
}

在添加延遲功能后對呼叫進行了稍微修改。（不屬於實際解決方案）

var audio = new AudioManager(1);
audio.loadSound("test.mp3", 1500);
var a = setInterval(function() {
if(audio.loaded >= audio.totalSounds){setTimeout(game, 50); clearInterval(a);}
}, 100);
function game() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    setInterval(function() {
        if(buttonDown[5])
        {
            console.log("SOUND");
            audio.play("test.mp3");
        }
    },100);