React Player и загрузка нескольких источников URL

Question

У меня есть быстрый вопрос относительно того, чтобы взять массив аудиофайлов и объединить их в один аудиофайл для воспроизведения.

Я использую React Player и подумал, что было бы возможно добавить несколько источников вПроигрыватель через опору URL и то, что это будет работать, но, к сожалению, до сих пор это не имело место.

Я получаю свои аудиофайлы от API, который возвращает файлы примерно так ...

Я добавляю местоположение комментария в потоковую передачу своих приложенийURL-адрес, который определен в файле конфигурации, поэтому файл, URL-адрес которого передается в React Player, будет выглядеть следующим образом: http://localhost/media/dump/comments/xxxxxxx.mp3

У кого-нибудь есть какие-либо советы / предложения о том, как я смогуобъединить такие файлы в один файл, который я мог бы просто воспроизвести?Или есть способ загрузить несколько источников в React Player с помощью URL?

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

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

Answer 1

Вы можете определенно иметь несколько источников: https://www.npmjs.com/package/react-player#multiple-sources-and-tracks.

Однако, это не будет делать то, что вы хотите.Прочитайте этот ответ: https://stackoverflow.com/a/18282461/8315348. Я почти уверен, что использование нескольких источников выполняет то же самое, что и в элементе <audio> - вы предоставляете ему несколько типов файлов одного и того же файла в случае, если один тип не можетиграть в браузере.Будет сыгран только один.Несколько дорожек, хотя они упоминаются в документах чуть ниже нескольких источников, здесь не имеют значения, поскольку <track> s являются субтитрами.

Вы можете увидеть, как создатель ReactPlayer использовал несколько источников в своей demo .Если вы нажмете на кнопку в правом нижнем углу с надписью «Несколько», вы увидите, каково это иметь несколько источников.Он не воспроизводит три видео, которые он помещает в массив - он просто проигрывает одно из них.Проверьте его исходный код , чтобы убедиться в этом.

Несмотря на это, я знаю другой вариант.Обратите внимание, что в демоверсии вы можете переключаться между звуковыми дорожками и видео по желанию.Вы можете просто создать массив источников, прослушать событие игрока onEnded и установить URL-адрес игрока к следующему источнику после его окончания.

Сменить источник плеера сложно, но это можно сделать.Единственный способ, которым я мог бы это сделать, это подражать тому, как работает демо-версия: сохранить URL-адрес в this.state вашего компонента, изменить его на this.setState(), а когда вы включаете проигрыватель, написать что-то вроде:

<ReactPlayer url={ this.state.url } playing={ this.state.playing } />

Не удалось сохранить URL-адрес в this.props, хотя в других случаях изменение реквизита вызывает повторный рендеринг.