Ionic 3: воспроизведение аудиопотока Icecast / Shoutcast - PullRequest
Новая
       37

Ionic 3: воспроизведение аудиопотока Icecast / Shoutcast

0 голосов
/ 04 сентября 2018

Я работаю над приложением интернет-радио, использующим платформу Ionic 3. Я придумал этот простой код, который использует аудио элемент HTML5. Многие полагают, что этот подход лучше, чем использование плагина @ ionic-native / streaming-media .

Следующая моя реализация:

HTML 

<audio id="audioStream" src="http://icecastserverIP:8000/icecastchannel" autoplay></audio>

<a href="#" id="player">
  <div class="btn-play" id="con-btn-play">
    <img src="assets/img/btn-play.png" alt="Play">
  </div>
</a>

JS 

$(document).ready(function(){

    var audio = $('#audioStream')[0]


    // Preloader animation

    audio.addEventListener('waiting', function () {
        $('#con-btn-play').html('<img src="assets/img/preloader.gif">');
    }, false);
    audio.addEventListener('playing', function () {
        $('#con-btn-play').html('<img src="assets/img/btn-pause.png">');
    }, false);


    // Play button behaviour

    $('#player').click(function(){
        if (audio.paused){
            audio.play();
            $('#con-btn-play').html('<img src="assets/img/btn-pause.png" alt="Pause">');
        }else {
            audio.pause();
            $('#con-btn-play').html('<img src="assets/imgs/btn-play.png" alt="Play">');
        }
    });

});

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

Мой вопрос: есть ли лучший способ обработки потоков Icecast? Сторонний плагин, который вы бы порекомендовали для лучшего управления буферизацией и опыта игры?

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Первое, что я бы порекомендовал, это в настройках вашего сервера Icecast увеличить значения <queue-size> и <burst-size>.

По умолчанию сервер отправляет клиентам только 64 КБ аудиопотока в качестве буфера при подключении, что для mp3-потока 320 Кбит / с меньше 2 секунд.

Если для тега предварительной загрузки элемента <audio> задано значение none, метаданные должны предотвращать бесконечную потоковую передачу данных в режиме паузы, в качестве альтернативы можно установить для параметра playbackRate значение 0.0 или изменить значение src на нулевое значение, а затем вызвать .load() на аудиоэлементе для отключения клиентов от потока при паузе.

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

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

Код на Github здесь , если вы хотите попробовать его.

0 голосов
/ 05 сентября 2018

Однако при малейшем падении соединения звук останавливается и не восстанавливается.

Вы можете восстановить соединение с вашим собственным кодом, обработав событие error в элементе Audio. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/onerror

Не говоря уже о том, что если я нажму паузу, поток продолжит использовать данные в фоновом режиме.

Да, вы захотите создать свой собственный интерфейс для управления этим элементом. Когда кто-то делает паузу, вам нужно вместо этого позвонить .stop(). По умолчанию аудиоэлемент принимает обычный аудиофайл, который заканчивается в какой-то момент.

Сторонний плагин ...

Плагин не требуется.

... лучшее управление буферизацией и игровой опыт?

С двумя предложениями, которые я сделал в этом ответе, вы можете получить полезный опыт для своих пользователей. Однако есть еще две проблемы, которые вы еще не затронули, с которыми вы можете столкнуться.

Во-первых, обычные метаданные ICY не запрашиваются и не декодируются браузером.

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

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

...