为什么我的音频缓冲区不播放任何声音？ [网络音频 API]

Question

我的音频缓冲区似乎不起作用，我不知道为什么。我已经尝试在 Chrome 和 Safari 中打开它，但没有任何反应。我还检查了我的音频文件“Audio2.mp3”是否一切正常。

"use strict"

//Create the Audio Context, compatible with older Firefox and Chrome browsers
function audioContextCheck(){
    if (typeof AudioContext !== "undefined"){
        return new AudioContext();
    }
    else if (typeof webkitAudioContext !== "undefined") {
        return new webkitAudioContext();
    }
    else if (typeof mozAudioContext !== "undefined") {
        return new mozAudioContext();
    }
    else {
        throw new Error('AudioContext not supported');
    }
}

var audioContext = audioContextCheck();


//Create audio buffer to the audio file with the XMLHttpRequest
var audioBuffer;

var getSound = new XMLHttpRequest();
getSound.open("get", "Audio2.mp3", true);
getSound.responseType = "arraybuffer";

getSound.onload = function(){
    audioContext.decodeAudioData(getSound.response, function(buffer) {
        audioBuffer = buffer;
    });
};

getSound.send();

//EventListener

window.addEventListener("load", playback);

//Now create the function necessary to play back the audio buffer

function playback(){
    var playSound = audioContext.createBufferSource();
    playSound.buffer = audioBuffer;
    playSound.connect(audioContext.destination);
    playSound.start(audioContext.currentTime);
}

Answer 1

因为，您在定义 audioBuffer 之前触发了 playback()。

尝试等待音频xhr完全加载，分配audioBuffer然后执行playback()，它会按预期工作。

例如

//Create the Audio Context, compatible with older Firefox and Chrome browsers
function audioContextCheck() {
  if (typeof AudioContext !== "undefined") {
    return new AudioContext();
  } else if (typeof webkitAudioContext !== "undefined") {
    return new webkitAudioContext();
  } else if (typeof mozAudioContext !== "undefined") {
    return new mozAudioContext();
  } else {
    throw new Error('AudioContext not supported');
  }
}

var audioContext = audioContextCheck();


//Create audio buffer to the audio file with the XMLHttpRequest
var audioBuffer;

var getSound = new XMLHttpRequest();
getSound.open("get", "https://cdn.rawgit.com/devildrey33/devildrey33/ddb01d71/Ejemplos/BannerTest/Canciones/LevenRain_-_ActionMan_Versus_The_CyberParasites.mp3", true);
getSound.responseType = "arraybuffer";

getSound.onload = function() {
  document.getElementById("xhrStatus").textContent = "Loaded";
  audioContext.decodeAudioData(getSound.response, function(buffer) {
    audioBuffer = buffer;
    playback(); // <--- Start the playback after `audioBuffer` is defined.
  });
};

getSound.send();

//EventListener

// window.addEventListener("load", playback);

//Now create the function necessary to play back the audio buffer

function playback() {
  var playSound = audioContext.createBufferSource();
  playSound.buffer = audioBuffer;
  playSound.connect(audioContext.destination);
  playSound.start(audioContext.currentTime);
}

<p id="xhrStatus"> Loading the audio.. </p>