reactjs - 如何使用 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 是不同的属性，需要不同的值类型。