Ahri-珊
day18将分享React音乐播放器歌词滚动的制作。
歌词滚动
实现歌词滚动需要从store获取当前播放时间,然后根据时间渲染歌词。
代码:
class Lrc extends React.Component {
constructor(props) {
super(props)
this.state = {
lrcs_now: '',
lrcs_pre:'',
}
}
componentDidMount() {
this.timerID = setInterval(
() => this.updateLrc(),
1
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
updateLrc(){
var bling = document.getElementById('lrc_p').firstChild;
if(bling)
{
bling.style.color = "#bce672";
}
var notime = [];
var p = 0;
if(this.props.lrc[Math.round(this.props.currenttime)]||this.props.currenttime===0)
{
const lrcs = this.props.lrc.map((key,index)=>
{
if(key)
notime.push(key);
return <p key={index}>{key}</p>;
});
var lrcs_now = lrcs.slice(Math.round(this.props.currenttime),lrcs.length);
//console.log(this.props.currenttime)
this.setState({
lrcs_now: lrcs_now
});
}
}
render() {
const { text,lrc,currenttime } = this.props;
return (
<div className="lrc">
<div className="lrc_box">
<img src={text.img} alt={text.title} />
</div>
<div id="lrc_p" className="lrc_p">
{this.state.lrcs_now}
</div>
</div>
);
}
}
Comments