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

Eri*_*rik 8 reactjs web-audio-api

我一直在尝试src在React中设置音频标签的属性,但是轨道永远不会播放.

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

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

当我检查chrome调试器时,它显示音频标签已[MediaStream]设置为其源,但没有播放,所有控件都保持灰色.

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

const audio = document.querySelector('audio')
audio.srcObject = stream
Run Code Online (Sandbox Code Playgroud)

Fuz*_*ree 15

如果不需要在状态中存储流,则可以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 />
    )
}
Run Code Online (Sandbox Code Playgroud)

如果您确实需要从该州访问流,您可以尝试这样做

<audio ref={audio => { audio.srcObject = this.state.stream }} />
Run Code Online (Sandbox Code Playgroud)

原因src={this.state.stream}不起作用是因为src期望一个字符串表示音频资源的url同时this.state.stream是一个MediaStream对象.

audio.src并且audio.srcObject是期望不同值类型的不同属性.

  • 使用您的示例时,我得到音频为空,我是否想在用作参考之前在其他地方定义音频? (2认同)
  • @AJ_ 可能在构造函数上你需要 `this.audio = React.createRef();` ? (2认同)

Ale*_*lov 6

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

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
  }
}
Run Code Online (Sandbox Code Playgroud)