Звук не воспроизводится (с помощью HowlerJ на iOS, Safari и Chrome) - PullRequest
Новая
       27

Звук не воспроизводится (с помощью HowlerJ на iOS, Safari и Chrome)

0 голосов
/ 30 января 2019

Я пытался создать сайт, который воспроизводит аудиофайлы, которые хранятся удаленно (и не являются общедоступными).Я воспроизводил аудио следующим образом:

  1. Получить аудио с сервера через XMLHttpRequest
  2. Сохранить это аудио в BLOB-объекте
  3. Воспроизвести аудио с помощью Howler.js

Я выполняю это с помощью следующего кода: 

//Get the audio file from the API 
var request = new XMLHttpRequest();
request.addEventListener("load", loadMusic);
request.responseType = "blob";
request.open("GET", root+"getmusic/"+path);
request.send();

//Function that catches the data, and plays the audio 
function loadMusic(data) {
    var objectUrl = window.URL.createObjectURL(data.currentTarget.response);
    var howler = new Howl({
         autoplay: true,
         src: [objectUrl],
         format: ["mp3"]
         });
    howler.play();
}

Это прекрасно работает в моих настольных браузерах Chrome, Safari и Firefox (воспроизведение аудио).Однако при открытии страницы на моем телефоне (iPhone 6s, iOS) в iOS Safari или в мобильной версии Chrome звук не воспроизводится, и я не получаю никаких ошибок в консоли разработчика, чтобы дать мне подсказкуотносительно того, почему.Что меня больше всего озадачивает, так это то, что он работает в браузере моего компьютера, а не в мобильной среде.

Есть ли способ это исправить?Или маршруты отладки, которые я должен использовать?

Некоторая дополнительная информация:

  • Пользователь должен нажать кнопку, чтобы загрузить / запустить аудио, чтобы они взаимодействовалисначала с DOM.
  • Аудио файлы в формате mp3.

1 Ответ

0 голосов
/ 24 мая 2019

Итак, в конце концов я решил эту проблему следующим образом:

  • Звук не воспроизводился на мобильных устройствах, главным образом из-за того, что я не отправлял правильные заголовки ответа с данными.
  • В конце концов я отказался от Howler.js и просто поместил BLOB-объект в качестве источника аудиоэлемента, например <audio id="audioplayer" src=<blob url here set via javascript> controls type="audio/mpeg">

Используемый мной бэкэнд Laravel был необходим для отправки следующих заголовков с аудиофайлом (rawданные), как показано ниже: 

        $data = Storage::get("audio/".$path);

        header('Content-Transfer-Encoding: binary');
        header('Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3');
        header('Content-Length: ' . strlen($data));
        header('Content-Disposition: attachment; filename="somefile.mp3"');
        header('X-Pad: avoid browser bug');
        header('Cache-Control: no-cache');

        echo $data;
...