javascript - HTML5/Javascript 网络音频 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);