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

如果要求将流存储在状态中，则可以使用srcObject更新ref属性：

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需要一个表示音频资源网址的字符串，而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

2 个答案: