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

Question

我一直在尝试在 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

Answer 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 是需要不同值类型的不同属性。

Answer 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
  }
}

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

How to set srcObject on audio element with React

reactjs

web-audio-api