Как использовать условный рендеринг для воспроизведения аудио из аудио-тега HTML? - PullRequest
0 голосов
/ 20 апреля 2019

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

Сначала я подумал, что источник звука не работает, но когда я рендерил аудио-тег с атрибутом «controls» ивоспроизводил звук так, он воспроизводился очень хорошо (однако звук не воспроизводился мгновенно, потребовалось несколько минут для буферизации).

Затем я подумал, что, возможно, звук просто не воспроизводится, поэтому я добавилатрибут «autoplay» для аудио тега, но это тоже не сработало.

Затем я подумал об атрибуте «preload», но добавление его также не решило мою проблему.

{this.state.isPlaying === true ? <audio autoplay src="http://166.62.119.4:8000/stream" preload="auto"></audio> : <p>not playing</p>

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

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

...