Блог

Я пытаюсь извлечь с сервера аудиофайл wav и воспроизвести его в клиенте с помощью элемента.

 <audio id="recording" src="..." />`
 

Я получил данные в виде ArrayBuffer, и я пытаюсь преобразовать их в большой двоичный объект, чтобы я мог изменить src элемента

Это и есть код:

 fetch("http://localhost:8080/", requestOptions)
    .then( (response) => {
        return response.arrayBuffer()
    }).then( (data) => {
        let a = new Blob([data], {type : 'audio/wav'});
        document.getElementById("recording").src = a;
    })
    .catch(error => console.error( error));
 

Но здесь есть ошибка:

 GET chrome-extension://goohbjdkcejkkochpdellmjkkdpfngph/[object Blob] net::ERR_FILE_NOT_FOUND
 

Похоже, я неправильно создал большой двоичный объект

Как я могу создать большой двоичный объект и передать его <audio ... /> элементу?

Вы должны создать реальный URL-адрес из своего большого двоичного объекта. И не забудьте впоследствии отозвать его, чтобы освободить ресурсы.

 let blob = new Blob([data], {type : 'audio/wav'});
const url = URL.createObjectURL(blob);
document.getElementById("recording").src = url;
URL.revokeObjectURL(url);