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

Я использую php для сценариев на стороне сервера. По умолчанию я использую тег «аудио» для воспроизведения аудиофайлов, потому что мой вызов 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 с типом содержимого: audio/mpeg для получения содержимого данных. Он возвращает необработанные данные формата mp3. Итак, как мы можем воспроизвести аудиофайл в браузере? Есть ли какой-нибудь плеер для прямого преобразования данных формата mp3 в данные проигрывателя? и я попробовал другой способ, но я не смог сохранить файл формата mp3 в php. мы можем создать файл mp3 с помощью php? например:

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

мой ответ на завиток выглядит следующим образом:

ID3#TSSELavf56.15.102��8�Infora !#%*,.0357<>@BEGIMPRTVY[adfhjmqsuxz|~��������������������������������������������������Lavc56.13$a5Cwc��8�"#�p7I<��Z���<ѣF� ��HP���.uN{P�! �{�����������]�D�DDwww��������"'����_���";�������=��B""�������


php file-writing audio-streaming php-curl html5-audio
person Mj.    schedule 20.04.2015    source источник
comment
Чем первый образец отличается от второго? Что ты пытаешься сделать? Почему нельзя использовать аудиотег?   -  person Brad    schedule 21.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

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

echo '<audio src="data:audio/mpeg;base64,'.base64_encode($sound_text).'"  autoplay="autoplay" controls ></audio>';
person n-dru    schedule 20.04.2015

arrow_upward
1
arrow_downward

Data-URI

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

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

Большой двоичный объект + URL-адрес объекта

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

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

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

Пример

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

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

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();
}
person Community    schedule 20.04.2015