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

Question

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

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

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

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

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

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

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

Answer 1

У вас может быть несколько источников: https://www.npmjs.com/package/react-player.

Тем не менее, он не будет делать то, что вы хотите. Прочитайте этот ответ: /questions/3118481/html-5-audio-tag-neskolko-fajlov/3118495#3118495. Я почти уверен, что использование нескольких источников делает то же самое, что и в <audio> element - вы даете ему несколько типов файлов одного и того же файла в случае, если один тип не может быть воспроизведен браузером. Будет сыгран только один. Несколько треков, хотя упоминается в документах чуть ниже нескольких источников, здесь не имеют значения, потому что <track>s это субтитры.

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

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

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

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

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