How can I play .spx file by html5 ?

Question

from html5 spec, it seem support spx: http://dev.w3.org/html5/spec-preview/the-source-element.html

Using:

But from my trying, it can't play in both Firefox 17 and Chrome, could you help ?

Unreal

Speex website (www.speex.org) says "The Speex codec has been obsoleted by Opus. It will continue to be available, but since Opus is better than Speex in all aspects, users are encouraged to switch". And you can play .opus files by html5, I have tried on Firefox 102 and it works. – Infralapsarian

Answer 1

I have found that speex.js on GitHub (https://github.com/jpemartins/speex.js) can solve your problem. With speex.js you can demux & decode speex file (*.spx or *.ogg) to wav on fly, which is supported by both Chrome/Firefox and many other modern browsers HTML5 ready.

• In your html include thoese *.js file under https://github.com/jpemartins/speex.js/tree/master/public/js/lib

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

• function below will do the trick to convert spx to wav codec:

/**
  * @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);
}

Acetometer

Answer 2

The spec says:

The type attribute gives the type of the media resource, to help the user agent determine if it can play this media resource before fetching it.

The spec itself does not specify any audio or video formats to be supported and support is up to individual browsers.

... and no browser supports .spx as far as I know.

Wanitawanneeickel