CODEWITHSUNDEEP
javascriptmedia-source
Ngoral
Ngoral

Reputation: 4824

MediaSource and m4a audio

I am trying to make MediaSource work with m4a audio and yet had no luck with it.

I've tried to feed it to MS as is, using mime 'audio/mp4; codecs="mp4a.40.2"'. Then I tried to reencode it to mp4 and then feed it to mp4box first to add headers. And then used it with mime 'video/mp4; codecs="mp4a.40.2"'. (mp4a.40.2 is what mp4info shows, so it's real, not my fantasy)

None of this worked. On Chrome MS just closes itself firing no sourceclose events, on Firefox it does just nothing showing no errors.

I use the following code

<!DOCTYPE html> <html>   <head>
    <meta charset="utf-8"/>   </head>   <body>
    <video controls></video>
    <audio controls></audio>
    <script>
      // var video = document.querySelector('audio');
      var video = document.querySelector('video');

      // var assetURL = 'myfile.m4a'
      var assetURL = 'myfile.mp4'
      // var mimeCodec = 'audio/mp4; codecs="mp4a.40.2"'
      var mimeCodec = 'video/mp4; codecs="mp4a.40.2"'

      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceclosed', function() {debugger; console.log('just closed')});
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }


      function sourceOpen (_) {
        console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        console.log(this.readyState); // open
        fetchAB(assetURL, function (buf) {
          sourceBuffer.addEventListener('updateend', function (_) {
            console.log(mediaSource.readyState); // suprise: it's closed
            console.log('before endOfStream')
            mediaSource.endOfStream(); // fails here
            console.log('before play')
            video.play();
            console.log(mediaSource.readyState); // ended
          });
          sourceBuffer.appendBuffer(buf);
        });
        console.log(this.readyState); // open
      };

      function fetchAB (url, cb) {
        console.log(url);
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
          cb(xhr.response);
        };
        xhr.send();
      };
    </script>   </body> </html>

Should I reencode my m4a file in some other way? Should I just forget about it and use mp3?

Upvotes: 1

Views: 398

Answers (0)

Related Questions