Как воспроизвести данные формата MP3 в браузере?

Question

Как воспроизвести данные формата MP3 в браузере?

Я использую PHP для сценариев на стороне сервера. По умолчанию я использую тэг «audio» для воспроизведения аудиофайлов, потому что мой вызов API возвращает путь к файлу, поэтому его легко обрабатывать.
например мой пример выглядит так:

{
'id':123,
'question':'tell about your self?',
'audio':'/wdk/path/00fl.mp3'
}

так что я могу легко использовать это в аудио теге.<audio src="www.abc.in/wdk/path/00fl.mp3" preload="auto">

Но теперь я получаю другой формат ответа API. Он возвращает содержимое данных вместо URL. Например

{
'id':123,
'question':'tell about your self?',
'audio':'/wdk/path/MP3'
}

так что теперь мне нужно сделать вызов curl снова с content-type: audio / mpeg для получения data-content. Он возвращает необработанные данные формата mp3. Итак, как мы можем воспроизвести аудио файл в браузере? есть ли какой-нибудь плеер для прямого преобразования данных формата mp3 в данные плеера? и я попробовал другой способ, но я не смог сохранить файл формата mp3 в php.
мы можем создать mp3 файл с помощью php? Например:

 $myfile = fopen("D:\xampp\htdocs\abc\testfile.mp3", "w");
$fwrite($myfile, $result);

мой ответ на завиток, как это:

ID3 # TSSELavf56.15.1028Infora
! #% * ,. 0357<> @BEGIMPRTVY [adfhjmqsuxz | ~ Lavc56.13 $ a5Cwc8″ # P7i<Z<ѣF
HP.uN {P! {] DDDwww «» _ «; = В»»

1

audio-streaming file-writing html5-audio php php-curl

Решение

Другие решения

Вы мог используйте data-URI, как предлагает @ n-dru в своем ответе, но вы должны знать о нескольких вещах:

Base-64 увеличивает размер данных на 33%, а строки в JavaScript используют два байта на символ.
Некоторые браузеры ограничивают максимальную длину данных-URI (так как при их декодировании возникают значительные издержки)

Лучшим подходом IMO является использование Blobs и ObjectURL. Не без собственных недостатков:

Требовать выполнения CORS для загрузки данных для BLOB-объекта (т. Е. Ваши образцы данных должны поступать с того же сервера, что и страница -или сервер должен разрешать использование CORS)
Объект URL должен иметь префикс в некоторых браузерах (включая webkit)

Преимущество состоит в том, что данные могут быть загружены и использованы в качестве необработанного байтового буфера без дополнительных затрат при декодировании или пропускной способности.

пример

В этом примере загружаются данные MP3 (которые будут необработанными данными, которые вы получаете), затем создается BLOB-объект и ObjectURL для BLOB-объекта. Это может быть установлено в качестве источника для аудио элемента.

В примере также показано, как обрабатывать асинхронный характер различных этапов.

var audio = document.getElementById("audio");

audio.onload = function() {
// audio has loaded..
audio.play();
// continue from here (or the onerror event, not shown)
};

// load the url as raw data and create an ObjectURL:
loadRaw("/wdk/path/MP3", function(url) {
audio.src = url;
});

function loadRaw(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.onerror = function() {console.log("Network error.")};
xhr.onload = function() {
if (xhr.status === 200) {
var blob = new Blob([xhr.response], {type: "audio/mpeg"}),
oURL = (URL || webkitURL).createObjectURL(blob);
callback(oURL);
}
else {console.log("Loading error:" + xhr.statusText)}
};
xhr.send();
}

1

Источник

Accepted Answer

Если вы получаете содержимое файла mp3, вы можете использовать данные URI, источником является просто кодированное содержимое файла:

echo '<audio src="data:audio/mpeg;base64,'.base64_encode($sound_text).'"  autoplay="autoplay" controls ></audio>';

2