音频未在渲染时播放 - React

Question

我让这个组件在页面被渲染时播放音频文件。

class Audio extends Component {

  randomTrack(){
        [...]
  }

  componentDidMount() {
    const audioEl = document.getElementsByClassName("audio-element")[0]
    audioEl.play()
  }

  render() {
      var trackname=this.randomTrack();
    return (
      <div>
        <audio className="audio-element">
          <source src={trackname}></source>
        </audio>
      </div>
    )
  }
}
export default Audio;

每次浏览器窗口在保存代码更改后重新加载时，都会播放音频。

但是，如果我手动刷新窗口，或者如果我将代码部署到站点然后打开该站点，它将无法播放。 我知道这与此错误有关，然后我进入控制台：

Audio.js:12 Uncaught (in promise) DOMException: play() failed 因为 用户没有先与文档进行交互。

但是，为什么它在重新加载时播放？ 是否有可能让它在页面加载时自动播放？

提前致谢！

Answer 1

你可以这样试试

class Audio extends Component {

  randomTrack(){
        [...]
  }

  render() {
    let trackname=this.randomTrack();
    return (
      <div>
        <audio autoplay className="audio-element">
          <source src={trackname}></source>
        </audio>
      </div>
    )
  }
}
export default Audio;

使用标准解决方案播放音频的更好方法。