Не работают элементы управления между html5 аудиоплеером и android собственным проигрывателем, когда звук запускается динамически (автозапуск)

Question

Я использую npm реагирующий проигрыватель для воспроизведения некоторых аудио и видео файлов в приложении реагирования. Я позволил пользователю переключать функцию автозапуска для звука.

const ReactPlayer = require('react-player').default;
const autoplay = true; // if user chose to enable autoplay

React.createElement(ReactPlayer, { playing: autoplay, url: 'some/audio.wav' })

Когда проигрыватель воспроизводится и начинает воспроизведение в браузере chrome android, он также запускает собственный проигрыватель android, (один доступен в области уведомлений os)

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

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

Как я могу это исправить?

Обновление:

Я не пробовал немного больше вокруг. Вместо установки playing в значение true перед отображением компонента, я попытался получить элемент html в componentDidMount() и использовать там функцию play(). К сожалению, у него такое же поведение, что и при запуске двух отдельных игроков, которые со временем станут несинхронными.

Answer 1

Мне до сих пор не ясно, что именно происходит за кулисами, поэтому я не знаю технических деталей, почему это решило проблему, но ...

Наше приложение было создано с помощью reacte-react-app, и у нас была бесконечная куча проблем из-за этой заблокированной среды и использования react-scripts для сборки и webpack конфигурации и т. Д. c. Было очень трудно получить контроль и понять, как работает конфигурация. Мы решили извлечь приложение из creat-react-app и вместо этого теперь используем другой webpack скрипт конфигурации и сборки. Это сняло много наших проблем, включая эту конкретную проблему.

Мне не удалось воспроизвести проблему в песочнице codeandbox.io, я установил react-player, реплицировал аудиоплеер и использовал тот же аудиофайл. здесь внутренние и внешние игроки были выровнены. И теперь, когда мы создаем наше приложение, совершенно не связанное с creat-react-app, эта проблема также исчезла из нашего приложения.

Поэтому я не могу сказать, почему это сработало, но могу рекомендовать только тех, кто сталкивается с подобным проблема для эксперимента по извлечению из creat-react-app, если ваше приложение было создано таким образом.