1

也许有人知道为什么 codepend 不从 URL 加载音频文件？（我没有专业的codepen，所以我不能使用直接上传文件到pen）。

我的程序中有这个音频“加载器”实现：

// Audio loader implementation.
window.onload = init;
let context;
let bufferLoader;
let greenBuffer = null;
let redBuffer = null;
let blueBuffer = null;
let yellowBuffer = null;
let dohBuffer = null;
let woohooBuffer = null;
let excellentBuffer = null;
let superDohBuffer = null;
// Buffer loader class taken from https://www.html5rocks.com/en/tutorials/webaudio/intro/
function BufferLoader(context, urlList, callback) {
  this.context = context;
  this.urlList = urlList;
  this.onload = callback;
  this.bufferList = new Array();
  this.loadCount = 0;
}

BufferLoader.prototype.loadBuffer = function(url, index) {
  // Load buffer asynchronously
  let request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.responseType = "arraybuffer";

  let loader = this;

  request.onload = function() {
    // Asynchronously decode the audio file data in request.response
    loader.context.decodeAudioData(
      request.response,
      function(buffer) {
        if (!buffer) {
          alert('error decoding file data: ' + url);
          return;
        }
        loader.bufferList[index] = buffer;
        if (++loader.loadCount == loader.urlList.length)
          loader.onload(loader.bufferList);
      },
      function(error) {
        console.error('decodeAudioData error', error);
      }
    );
  }

  request.onerror = function() {
    alert('BufferLoader: XHR error');
  }

  request.send();
}

BufferLoader.prototype.load = function() {
  for (let i = 0; i < this.urlList.length; ++i)
  this.loadBuffer(this.urlList[i], i);
}
function init() {
    try {
        // Fix up for prefixing
        window.AudioContext = window.AudioContext||window.webkitAudioContext;
        context = new AudioContext();
    }
    catch(e) {
        alert('Web Audio API is not supported in this browser');
    }
    bufferLoader = new BufferLoader(
        context,
        [
          'https://cors-anywhere.herokuapp.com/https://s3.amazonaws.com/freecodecamp/simonSound1.mp3',
          'https://cors-anywhere.herokuapp.com/https://s3.amazonaws.com/freecodecamp/simonSound2.mp3',
          'https://cors-anywhere.herokuapp.com/https://s3.amazonaws.com/freecodecamp/simonSound3.mp3',
          'https://cors-anywhere.herokuapp.com/https://s3.amazonaws.com/freecodecamp/simonSound4.mp3',
          'https://cors-anywhere.herokuapp.com/http://www.springfieldfiles.com/sounds/homer/doh.mp3',
          'https://cors-anywhere.herokuapp.com/http://www.springfieldfiles.com/sounds/homer/woohoo.mp3',
          'https://cors-anywhere.herokuapp.com/http://springfieldfiles.com/sounds/burns/excellnt.mp3',
          'https://cors-anywhere.herokuapp.com/http://www.springfieldfiles.com/sounds/homer/doheth.mp3',
        ],
        setBuffers
        );

      bufferLoader.load();
}

function setBuffers(bufferList){
    greenBuffer = bufferList[0];
    redBuffer = bufferList[1];
    blueBuffer = bufferList[2];
    yellowBuffer = bufferList[3];
    dohBuffer = bufferList[4];
    woohooBuffer = bufferList[5];
    excellentBuffer = bufferList[6];
    superDohBuffer = bufferList[7];
}

如果我在本地使用此代码（而不是在 codepen 上），它可以正常工作。它会加载这些文件，然后我可以按照我的意愿播放这些音频文件。但是如果我在 codepen 上运行它，它会抛出这个（注意，我还在https://cors-anywhere.herokuapp.com/URL 前添加了绕过 CORS）：

console_runner-079c09a….js:1 decodeAudioData error DOMException: Unable to decode audio data
(anonymous) @ console_runner-079c09a….js:1
(anonymous) @ pen.js:80
index.html:1 Uncaught (in promise) DOMException: Unable to decode audio data
index.html:1 Uncaught (in promise) DOMException: Unable to decode audio data

完整的笔可以在这里检查：https ://codepen.io/andriusl/pen/proxKj

更新。 这似乎与浏览器有关。AudioContext 不能与 Opera 浏览器一起正常工作，所以这个问题比 codepen 本身更面向浏览器。

4

0 回答 0