[英]Manage Multiple Audio Sources in React
我有一个React组件,可以在单击按钮时播放/暂停音频。 它工作得很好,我一次在一个页面上渲染其中的大约5个。 但是,如果单击“播放”,然后单击“播放”,则两个音频都在播放,这不是很好。 这是我的组件代码:
import React from 'react';
import playIcon from './images/play.png';
import pauseIcon from './images/pause.png';
class Music extends React.Component {
constructor(props) {
super(props);
this.state = { 'play': false };
this.url = props.src;
this.audio = new Audio(this.url);
this.audio.preload = 'none';
this.togglePlay = this.togglePlay.bind(this);
}
togglePlay() {
this.setState({'play': !this.state.play}, () => {
this.state.play ? this.audio.play() : this.audio.pause();
});
}
componentWillUnmount () {
this.audio.pause();
}
render() {
return (
<div style={this.props.style} className={this.props.className}>
{this.state.play
? <button className="audio-button" aria-label="Pause" onClick={this.togglePlay}><img src={pauseIcon} width="34" height="34" alt="Pause"></img></button>
: <button className="audio-button" aria-label="Play" onClick={this.togglePlay}><img src={playIcon} width="34" height="34" alt="Play"></img></button>}
</div>
);
}
}
export default Music;
我已经做了一些环顾四周,一个潜在的解决方案是使用redux或其他一些状态管理库。 我想避免这种情况,因为我在这个网站上没有必要这样做。 我已经研究了事件监听器(即这里提出的解决方案 )但是当我做一个document.getElementsByTagName('audio')
我得到了一个空的HTMLCollection
。 这个解决方案更接近,但我无法弥合它在jQuery中的实现与我在React中使用的实现之间的差距。
有没有办法识别播放音频并在播放新音频之前从React组件暂停播放? 任何和所有建议都表示赞赏。
import React from 'react';
import audio1 from './audio1.mp3';
import audio2 from './audio2.mp3';
class AudioList extends React.Component {
constructor (props) {
super(props);
this.audios = props.list.map(audio => new Audio(audio));
}
getCurrentAudio () {
return this.audios.find(audio => false === audio.paused);
}
toggle (nextAudio) {
const currentAudio = this.getCurrentAudio();
if (currentAudio && currentAudio !== nextAudio) {
currentAudio.pause();
}
nextAudio.paused ? nextAudio.play() : nextAudio.pause();
}
render () {
return (
<div>
{ this.audios.map((audio, index) =>
<button onClick={() => this.toggle(audio) }>
PLAY AUDIO { index }
</button>
) }
</div>
)
}
}
export default () => <AudioList list={[ audio1, audio2 ]} />;
PS: new Audio(url)
返回HTMLAudioElement 。
创建一个处理音频的模块。 将播放,暂停,恢复等方法暴露给Music
,并跟踪您拥有的所有五个Music
实例中的不同音频。 每当播放新音频时,暂停旧音频。
得到了马学正和TheIncorrigible1的一些重要提示。 基本上将音频移动到它自己的模块中。 从中导出play
和pause
方法,并在该模块中跟踪currentlyPlaying
play
。
我将我的Music
组件调整为这样
import React from 'react';
import playIcon from './images/play.png';
import pauseIcon from './images/pause.png';
import globalAudio from './globalAudio';
class Music extends React.Component {
constructor(props) {
super(props);
this.state = { 'play': false };
this.name = props.src;
this.togglePlay = this.togglePlay.bind(this);
}
togglePlay() {
this.setState({'play': !this.state.play}, () => {
this.state.play ? globalAudio.play(this.name) : globalAudio.pause(this.name);
});
}
componentWillUnmount () {
globalAudio.pause(this.name);
}
render() {
return (
<div style={this.props.style} className={this.props.className}>
{this.state.play
? <button className="audio-button" aria-label="Pause" onClick={this.togglePlay}><img src={pauseIcon} width="34" height="34" alt="Pause"></img></button>
: <button className="audio-button" aria-label="Play" onClick={this.togglePlay}><img src={playIcon} width="34" height="34" alt="Play"></img></button>}
</div>
);
}
}
export default Music;
我的新模块globalAudio
:
import audio1 from './audio1.mp3';
import audio2 from './audio2.mp3';
import audio3 from './audio3.mp3';
import audio4 from './audio4.mp3';
import audio5 from './audio5.mp3';
const audios = {
'audio1': new Audio(audio1),
'audio2': new Audio(audio2),
'audio3': new Audio(audio3),
'audio4': new Audio(audio4),
'audio5': new Audio(audio5)
};
let currentlyPlaying = null;
const play = (name) => {
if (currentlyPlaying) {
audios[currentlyPlaying].pause();
}
audios[name].play();
currentlyPlaying = name;
};
const pause = (name) => {
currentlyPlaying = null;
audios[name].pause();
};
export default {
pause,
play
};
感谢所有的建议,他们都非常有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.