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

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

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

如果不需要将流存储在状态中，那么您可以更新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需要一个表示音频资源 url 的字符串，而this.state.stream is a MediaStream object.

audio.src and audio.srcObject是期望不同值类型的不同属性。