#reactjs #blob #html5-audio #createobjecturl
Вопрос:
Я делаю аудиоплеер, используя
<audio src={audioSrc}>
метка.
Когда я получил аудиофайл, это был двоичный файл( blob ниже), поэтому я создал с ним большой двоичный объект.
let test = new Blob(blob, {type: 'audio/mp3'};
А затем создал URL-адрес объекта
let objUrl = URL.createObjectURL(test);
Это objUrl выглядит так blob:https://xxxxx , и когда я передаю эту строку <audio src={objUrl}/> , я ничего не слышу.
Мне было интересно, нужно ли мне конвертировать этот URL-адрес, чтобы сделать его доступным в аудиотеге.
Могу ли я получить совет по этой проблеме, пожалуйста?
Ответ №1:
Просто добавьте еще одну опору autoplay
<audio src={URL.createObjectURL(test)} autoplay/>
Комментарии:
1. Привет. спасибо за предложение. но почему вы думаете, что автозапуск заставит его работать?
Ответ №2:
Первым параметром Blob конструктора является массив. MDN описывает это так:
Массив объектов ArrayBuffer, ArrayBufferView, Blob, USVString или сочетание любых таких объектов, которые будут помещены в большой двоичный объект. Объекты USVString кодируются как UTF-8.
https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob#parameters
Возможно, создание такого большого двоичного объекта уже решает проблему:
let test = new Blob([ blob ], { type: 'audio/mp3' });
Еще одна проблема, о которой я мог бы подумать, заключается в том, что двоичные данные имеют другой миметип, отличный 'audio/mp3' от того, который может привести к тому, что аудиоэлемент откажется от декодирования данных.