动态启动音频（自动播放）时，控件在 html5 音频播放器和 android 本机播放器之间不起作用答案

【问题标题】：Controls not working between html5 audio player and android native player when audio is started dynamically (autoplay)动态启动音频（自动播放）时，控件在 html5 音频播放器和 android 本机播放器之间不起作用
【发布时间】：2020-06-04 14:53:03
【问题描述】：

我正在使用 npm react-player 在 react 应用程序中播放一些音频和视频文件。我已允许用户切换音频的自动播放功能。

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 通知区域可以访问）

这两个播放器完全同步，但如果浏览器播放器暂停，则本机播放器会继续播放。此外，如果在浏览器播放器的时间线上拖动点，它们会变得不同步并互相交谈。

有趣的是，当自动播放没有打开，但用户必须手动按下将播放属性设置为true 的按钮时，如果在浏览器都会暂停，如果在通知区域暂停，则会暂停并保持同步。

我该如何解决这个问题？

更新：

我还没有尝试更多。我没有在渲染组件之前将playing 设置为true，而是尝试在componentDidMount() 中获取html 元素并在那里使用play() 函数。不幸的是，这具有相同的行为，它似乎启动了 2 个独立的播放器，最终将变得不同步:(

componentDidMount () {
  const player = document.getElementById(this.state.id);
  if (player) {
    const audio = player.getElementsByTagName('audio');
    if (audio && audio.length > 0) {
      this.state.autoplay && player.firstElementChild.play();
    }
  }
},

【问题讨论】：

标签： javascript android reactjs html5-audio react-player

【解决方案1】：

我仍然不清楚幕后到底发生了什么，所以我不知道为什么这解决了这个问题的技术细节，但是......

我们的应用程序是使用reacte-react-app 创建的，由于锁定环境以及使用react-scripts 进行构建和webpack 配置等，我们遇到了无穷无尽的问题。获得控制权非常困难并了解配置的工作原理。我们决定从creat-react-app 中弹出应用程序，而我们现在使用另一个webpack 配置和构建脚本。这解决了我们的很多问题，包括这个特殊问题。

我无法在 codesandbox.io 沙盒上重现该问题，我安装了 react-player 并复制了音频播放器并使用了相同的音频文件。在这里，内部和外部参与者是一致的。现在我们正在构建与creat-react-app 完全无关的应用程序，这个问题也从我们的应用程序中消失了。

所以我不能说为什么这会奏效，但只能推荐遇到类似问题的任何人进行从creat-react-app 弹出的实验，前提是您的应用是以这种方式创建的。

【讨论】：