[英]React - play audio when fully loaded
我想只在满载时播放音频。 因此,如果有人网络连接速度慢,它就不会口吃。 我的组件看起来像这样:
class MusicLoop extends Component {
state = {
isLoaded: false
}
componentWillReceiveProps(nextProps) {
if (nextProps.song !== this.props.song) {
this.setState({
isLoaded: false
});
}
}
playSong = () => {
this.setState({
isLoaded: true,
});
}
render() {
const { song } = this.props;
const { isLoaded } = this.state;
return (
<div>
{ isLoaded ? 'Playing' : 'Loading' }
<audio
preload="auto"
src={require(`../static/songs/${song}.mp3`)}
loop="true"
autoPlay={false}
onLoadedData={() => this.playSong()}
/>
</div>
);
}
};
如果我将Chrome DevTools中的网络选项卡中的限制设置为GPRS(50 kb / s),它将开始逐个播放音频,这很糟糕:/。
如何在完全加载时播放音频?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.