WaveSurfer JS не может генерировать график в Firefox для определенного аудиофайла mp3

Мы столкнулись с проблемой рисования аудиовизуализации (графика) с помощью wavesurfer JS в Firefox для определенного формата файла mp3. Это всегда выдает ошибку типа: Буфер, переданный в decodeAudioData, содержит контент неизвестного типа.

Но тот же файл работает в хроме без проблем. После расследования мы обнаружили, что decodeAudioData() используется в wavesurfer JS, который генерирует ошибку при декодировании данных аудиофайла, содержащихся в ArrayBuffer.

Поскольку у нас нет возможности решить проблему с помощью каких-либо методов преобразования на стороне сервера (sox/ffmpeg), нам нужно управлять этим на стороне клиента. Кроме того, мы не находим никаких подсказок, почему «decodeAudioData» не может обработать его в Firefox, тогда как Chrome может сделать это без каких-либо трудностей.

Демонстрационный код:

var wavesurfer = WaveSurfer.create({
     container: '#waveform'
});

wavesurfer.load('http://audiospectrum.bjitgroup.com/mp3/firefox.mp3');
wavesurfer.on('ready', function () {
    wavesurfer.play();
});

URL-адрес демонстрации: http://audiospectrum.bjitgroup.com/main.html

NB: в Firefox следующая ошибка для firefox отображается в консоли ошибка в консоли

Заранее спасибо. Ваша помощь будет высоко оценена.


javascript audio-streaming wavesurfer.js audiocontext
person Partha    schedule 20.06.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я исследовал это и, наконец, исправил. Меня спасает чей-то комментарий с github wavesurfer. Мы исправили это, выполнив следующие действия:

  1. Сначала преобразуйте поврежденный файл в буфер массива
  2. Отрезать первые 2 байта
  3. После этого преобразовать буфер массива в большой двоичный объект.
  4. Наконец, передайте это wavesurfer Тогда это работает !!! Мы застряли здесь почти на 1 неделю. Спасибо за подсказку.

Исправлен демо-код для дальнейшего использования, который может помочь тем, у кого возникла такая же проблема:

var xhr = new XMLHttpRequest();
xhr.open('GET','http://audiospectrum.bjitgroup.com/mp3/firefox.mp3', true);
xhr.responseType = 'arraybuffer';
var blob_url;
xhr.onload = function(e) {
var responseArray = new Uint8Array(this.response).buffer; 
  responseArray = responseArray.slice(2);
     var blob = new Blob([responseArray]);
     var URLObject = window.webkitURL || window.URL;
     blob_url =       URLObject.createObjectURL(blob);
     wavesurferInit(blob_url);
};
xhr.send();

function wavesurferInit(blob_url) {
    var wavesurfer = WaveSurfer.create({
                        container: '#waveform'
                     });
    wavesurfer.load(blob_url);
    wavesurfer.on('ready', function () {
        wavesurfer.play();
    });
}
person Partha    schedule 22.06.2018