Как лучше всего записывать звук в браузере?

Question

[Никита Колосов]

Сейчас я пытаюсь записать аудио в браузере небольшими порциями с помощью RecordRtc js.

Я уже выяснил, что независимо от того какой кодек и формат я указываю в параметрах RecordRtc, хром будет записывать только webm;codecs=opus, Firefox хочет работать только с ogg, и только firefox знает, что это это вообще такое, мой android-mobile-webview записывает, внезапно, только wav (и я не проверял Ff, но хром определенно не будет работать с wav)

Есть ли кроссбраузерное решение для решения этой задачи? Или я должен быть готов перекодировать все форматы из одного в другой своими руками, если я хочу унифицировать работу с аудио в своем проекте.

Никакой обобщенной информации о взаимосоответствии кодеков и браузеров я не могу найти.

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

Не могли бы вы поделиться со мной каким-либо опытом или годными практиками в этой сфере? Можно ли как-то это дело унифицировать. И если нет, то какие будут самые простые короткие пути, на ваш взгляд, если мне придётся всё делать самому. Какие форматы всё же лучше использовать, как перекодировать на фронте или сервере, и т.д.

Answer 1

[Stalker_RED]

Я вот тут собрал разных форматов, да потестил в браузерах. И вы знаете - все всё поддерживают. Что я делаю не так?

Comments

[mletov]

Пожалуйста, не размещайте код в jsfiddle, он не работает в России.
Возьмите codeopen или еще что-нибудь.
PS прокси пользоваться все умеют, но тем не менее...

[Stalker_RED]

mletov,

<audio id="player" controls></audio>
<ul>
  <li data-src="https://file-examples.com/storage/fe1aa0c9d563ea1e4a1fd34/2017/11/file_example_WAV_1MG.wav">wav</li>
  <li data-src="https://upload.wikimedia.org/wikipedia/commons/d/de/Lorem_ipsum.ogg">ogg</li>
  <li data-src="https://uk7.internet-radio.com/proxy/0radio?mp=/live">mpeg</li>
  <li data-src="https://uk3.internet-radio.com/proxy/majesticjukebox?mp=/live">aac</li>
  <li data-src="https://radio2.liferadiolive.com:1700/stream">mp3</li>
  <li data-src="https://secure.live-streams.nl/opus.opus">opus</li>
</ul>
<script>
document.querySelector('ul').addEventListener('click', function(evt){
  player.src = evt.target.dataset.src;
  player.play();
});
</script>

[mletov]

Stalker_RED, Спасибо)

[Никита Колосов]

А как реализовать стрим, вроде тех что у вас в примере?

Я сейчас шлю пользователю по кусочкам записанное аудио и при помощи js у него же в браузере пытаюсь склеить используя MediaSource.souresBuffer. Это не работает так гладко, как хотелось бы.
Я не знал, что стрим можно напрямую поместить в атрибут src тега audio, но тогда вопрос где, и как, и какими технологиями он реализован?

[Stalker_RED]

Никита Колосов, вот вам список софта для стриминга, пускай и неполный https://en.wikipedia.org/wiki/Category:Streaming_s...
например в нем не упоминуется плагин для nginx, который вполне ок для небольшого количества пользователей.
(он и для большого ок, но нужно понимать как его правильно готовить)
Если же вы делаете очередную чатрулетку, то вам вообще не нужно что-то там записывать и стримить, а нужно открыть первый попавшийся webrtc videochat example и посмотреть что внутри. Связь браузер-браузер в несколько строчек кода делается, когда нет проблем с белым ip.

[Никита Колосов]

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

Спасибо за ссылку, поизучаю