reactjs进度条在持续时间内同步增加音乐

Question

我有一个像..

这样的组件

import React, { PropTypes, Component } from 'react'


class MusicProgress extends Component {

constructor(props) {
    super(props);
    this.state = {'progress': 1, 'progress_percent': 1}
}

get_music_progress_percent() {
    const { music } = this.props

    var progress = this.state.progress
    var self = this
    if(!(progress >= music.duration)){
        setTimeout(function(){ 
            progress += 2
            var progress_percent = ((progress / music.duration) * 100).toFixed()
            self.setState({'progress': progress})
            self.setState({'progress_percent': progress_percent})
        }, 2000)
        return this.state.progress_percent

    }
    return this.state.progress_percent


}

get_music_progress() {
    const { music, playing_music } = this.props
    var self = this

    $('#' + music.id).progress({
            percent: self.get_music_progress_percent()
    });
}

render() {
    const { music, playing_music } = this.props

    return (
        <div className="three wide column">
            <div className="ui small progress" id={music.id}>
                <div className="bar"></div>
            </div>
            {this.get_music_progress()}
        </div>
    )
}
}

export default MusicProgress

在这里，我只能使用music.duration获取音乐的持续时间。我现在想做一个进度条。

我的get_music_progress功能效果不佳

它应该每1或2秒增加一次。当持续时间结束时，进度条应该完成..

需要一些想法或帮助..

谢谢