html5-audio - 如何通过 html5 播放 .spx 文件？

Question

从html5规范来看，似乎支持spx: http://dev.w3.org/html5/spec-preview/the-source-element.html

使用:

但是根据我的尝试，它无法在 Firefox 17 和 Chrome 中播放，您能帮忙吗？

Answer 1

我发现 GitHub 上的 speex.js (https://github.com/jpemartins/speex.js) 可以解决您的问题。使用 speex.js，您可以将 speex 文件(*.spx 或 *.ogg)动态解复用和解码为 wav，Chrome/Firefox 和许多其他支持 HTML5 的现代浏览器都支持该功能。

• 在您的 html 中包含 https://github.com/jpemartins/speex.js/tree/master/public/js/lib 下的那些 *.js 文件

<script src="bitstring.js"></script>
<script src="pcmdata.min.js"></script>
<script src="speex.js"></script>

• 下面的函数可以将 spx 转换为 wav 编解码器:

/**
  * @param bufSpx ArrayBuffer (Uint8Array) holding content of speex file (*.spx or *.ogg)
  */
function decodeFile(bufSpx) {
  var stream, samples, st;
  var ogg, header, err;

  ogg = new Ogg(bufSpx, {file: true});
  ogg.demux();
  stream = ogg.bitstream();

  header = Speex.parseHeader(ogg.frames[0]);
  console.log(header);

  comment = new SpeexComment(ogg.frames[1]);
  console.log(comment.data);

  st = new Speex({
    quality: 8,
    mode: header.mode,
    rate: header.rate
  });

  samples = st.decode(stream, ogg.segments);

  var waveData = PCMData.encode({
      sampleRate: header.rate,
      channelCount: header.nb_channels,
      bytesPerSample: 2,
      data: samples
    });

  // array buffer holding audio data in wav codec
  var bufWav = Speex.util.str2ab(waveData);
  // convert to a blob object
  var blob = new Blob([bufWav], {type: "audio/wav"});
  // return a "blob://" url which can be used as a href anywhere
  return URL.createObjectURL(blob);
}