如何使用 React 在音频元素上设置 srcObject答案

【问题标题】：How to set srcObject on audio element with React如何使用 React 在音频元素上设置 srcObject
【发布时间】：2018-07-14 04:15:58
【问题描述】：

我一直在尝试在 React 中设置音频标签的 src 属性，但该曲目从不播放。

playTrack(track) {
    const stream = new MediaStream()
    stream.addTrack(track)
    this.setState(() => ({ stream }))
}

render() {
    return (
        <audio src={this.state.stream || null} controls volume="true" autoPlay />
    )
}

当我签入 chrome 调试器时，它显示音频标签已将 [MediaStream] 设置为其源，但没有播放任何内容，所有控件仍然灰显。

这样做而不是设置状态有效，但我认为这在 React 中是非常不受欢迎的。

const audio = document.querySelector('audio')
audio.srcObject = stream

【问题讨论】：

标签： reactjs web-audio-api

【解决方案1】：

如果不需要将流存储在状态中，那么您可以使用ref 更新srcObject 属性：

playTrack(track) {
    const stream = new MediaStream()
    stream.addTrack(track)
    this.audio.srcObject = stream;
}

render() {
    return (
        <audio ref={audio => {this.audio = audio}} controls volume="true" autoPlay />
    )
}

如果你确实需要从状态访问流，你可以试试这个

<audio ref={audio => { audio.srcObject = this.state.stream }} />

src={this.state.stream} 不起作用的原因是因为src 需要一个表示音频资源 url 的字符串，而 this.state.stream 是一个 MediaStream 对象。

audio.src 和 audio.srcObject 是不同的属性，需要不同的值类型。

【讨论】：

我在使用你的例子时得到音频为空，我想在用作参考之前在其他地方定义音频吗？
@AJ_ 可能在你需要this.audio = React.createRef();的构造函数上？
是的，就是这样。
如果我有流数组并使用该数组我必须创建音频标签怎么办？

【解决方案2】：

对于那些使用道具并且不喜欢在每个渲染上创建函数的人：

constructor(props) {
  super(props)
  this.videoRef = React.createRef()
}

render() {
  return <video ref={this.videoRef}/>
}

componentDidMount() {
  this.updateVideoStream()    
}

componentDidUpdate() {
  this.updateVideoStream()
}

updateVideoStream() {
  if (this.videoRef.current.srcObject !== this.props.stream) {
    this.videoRef.current.srcObject = this.props.stream
  }
}

【讨论】：