ReactJS 未在首次渲染后正确渲染 HTML 音频

Question

我在 ReactJS 组件中有一个 HTML 音频标签。为每个不同的音频文件渲染一个组件。组件第一次正确呈现时，音频会随文件长度一起显示，但是当我 select 另一个要呈现的文件时，即使源代码指示该文件的路径，它也不会呈现我 selected.

<audio controls><source src={props.audio} type="audio/wav"></source></audio>

其中 "props.audio" 是音频文件的路径，这段代码在我的 ReactJS 组件中，每次用户 select 一个不同的文件时都会呈现。

例如，如果我有两个音频文件，一个 5 分钟，第二个 10 分钟，我 select 第一个音频，音频显示 5 分钟，我可以播放。但是，当我 select 第二个音频文件时，音频标签不会重新呈现，它仍然播放第一个音频文件。虽然当我检查源代码时，它确实是文件的正确路径。

这是怎么回事，以及为什么它在第一次后不能正确呈现新录音的任何想法？

Answer 1

根据这个question，显然问题是 audio.load() 应该在 audio.src 改变之后被调用，否则它不会 "detect" 改变。如果这是你唯一的问题，那么这里是解决方案：

解决方案

1) 确保你的音频组件只有 1 个道具，音频一个

这很重要，因为每次组件重新渲染时我们都会调用 this.refs.audio.load() 并且我们不想在它因 audio 属性以外的原因重新渲染时调用它改变。还有其他解决方法，但为了简单起见，让我们坚持使用这个方法。如果您当前的 Audio 组件有其他 props，请务必将其隔离在单独的组件中。

2) 渲染音频标签中的 ref

render() {
    return <audio ref="audio"/>;
}

3) 如果 audio 属性没有改变则阻止重新渲染

shouldComponentUpdate(nextProps, nextState) {
    return nextProps.audio != this.props.audio)
}

4) 组件更新时调用this.refs.audio.load

componentDidUpdate() {
    this.refs.audio.load();
}

Answer 2

找到 this 规格说明说明为什么会发生这种情况。如果在您选择的 UI 框架内调用 audio.load() 导致渲染循环 .

，请使用此解决方案

..modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly

<audio>
    <source src='./first-src'/>
</audio>

更改src

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

ReactJS 未在首次渲染后正确渲染 HTML 音频

ReactJS not rendering HTML Audio correctly after first render

html

javascript

html5-audio

reactjs

解决方案