setTime(e,flag){ let audio = this.refs.audio; let targetPoint = e.touches[0].pageX-this.state.playedLeft if(flag){ targetPoint = e.touches[0].pageX- this.state.detailPlayedLeft var newWidth = targetPoint/this.refs.detailProgress.offsetWidth; }else{ var newWidth = targetPoint/this.refs.progress.offsetWidth; } this.refs.played.style.width = newWidth*100 + "%"; audio.currentTime = newWidth*audio.duration }
componentDidMount(){ let audio = this.refs.audio; let played = this.refs.played; let totalVolume = this.refs.totalVolume; audio.addEventListener('canplay',()=>{ //获取总时间 let totalTime = parseInt(audio.duration); this.setState({ totalTime:this.getTime(totalTime), playedLeft:played.getBoundingClientRect().left, volumnLeft:totalVolume.getBoundingClientRect().left }); }); //设置初始音量 this.refs.volumeProgress.style.width = "50%"; audio.volume = 0.5 }
//点击设置进度条 setTimeOnPc(e,flag){ let audio = this.refs.audio; if(audio.currentTime !== 0) { let audio = this.refs.audio; let targetPoint = 0; let newWidth = 0; if(flag){ targetPoint = e.pageX - this.state.detailPlayedLeft newWidth = targetPoint / this.refs.detailProgress.offsetWidth; }else{ targetPoint = e.pageX - this.state.playedLeft; newWidth = targetPoint / this.refs.progress.offsetWidth; } this.refs.played.style.width = newWidth * 100 + "%"; audio.currentTime = newWidth * audio.duration; } }