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

Question

我正在使用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播放器（（可以在os通知区域中访问）

这两个播放器完全同步，但是如果浏览器播放器暂停，本机播放器将继续。同样，如果在浏览器播放器上的时间轴上拖动点，它们将变得不同步，并且彼此交谈。

有趣的是，当未启用自动播放功能，但用户必须手动按下将播放道具设置为true的按钮时，如果在浏览器中暂停，则本地音频播放器和浏览器播放器控件会相互影响两者都暂停，如果通知区域中的暂停既暂停又保持同步。

我该如何解决？

更新：

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

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();
    }
  }
},

Answer 1

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

我们的应用程序是使用reacte-react-app创建的，由于锁定的环境以及使用react-scripts进行构建和webpack配置等，我们遇到了无休止的问题。很难获得控制权和了解配置如何工作。我们决定从creat-react-app中退出该应用，而现在我们使用另一个webpack配置和构建脚本。这消除了我们的许多问题，包括这个特定问题。

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

所以我不能说这为什么起作用，但是只能推荐遇到类似问题的任何人来进行从creat-react-app弹出的实验，如果您的应用程序是通过这种方式创建的。