web-dev-qa-db-ja.com

Reactでオーディオ要素にsrcObjectを設定する方法

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
reactjsweb-audio-api
8
Erik

ストリームを状態に保存する必要がない場合は、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}が機能しないのは、this.state.streamがsrcオブジェクトであるのに対し、MediaStreamはオーディオリソースのURLを表す文字列を想定しているためです。

audio.srcとaudio.srcObjectは、異なる値タイプを期待する異なるプロパティです。

14
FuzzyTree

小道具を使用し、各レンダリングで関数を作成したくない人のために：

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
  }
}
2
Alexander Danilov