blumia/private-music-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix audio promise error

Browse Source
This commit is contained in:
Zijin Xiao
2017-02-13 20:38:40 +08:00
parent 63a704e49c
commit 6e1c6a5dd1
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
player.jsx
View File

@ -40,7 +40,6 @@ class Player extends React.Component {
loop: false, loop: false,
order: false, order: false,
playIcon: 'caret-right', playIcon: 'caret-right',
percent: 0,
curTime: 0, curTime: 0,
totTime: 0, totTime: 0,
data: [], data: [],
@ -57,7 +56,7 @@ class Player extends React.Component {
this.audio = document.getElementsByTagName('audio')[0]; this.audio = document.getElementsByTagName('audio')[0];
this.fetchPlaylist(); this.fetchPlaylist();
this.audio.ontimeupdate = () => { this.audio.ontimeupdate = () => {
this.setState({curTime: this.audio.currentTime, totTime: this.audio.duration, percent: this.audio.currentTime * 1.0 / this.audio.duration * 100.0}); this.setState({curTime: this.audio.currentTime, totTime: this.audio.duration});
}; };
this.audio.onpause = () => { this.audio.onpause = () => {
this.setState({playIcon: 'caret-right'}); this.setState({playIcon: 'caret-right'});
@ -102,8 +101,10 @@ class Player extends React.Component {
this.audio.pause(); this.audio.pause();
this.audio.src = this.state.source + this.currentFolder + '/' + filename; this.audio.src = this.state.source + this.currentFolder + '/' + filename;
this.audio.load(); this.audio.load();
this.audio.play(); this.audio.oncanplay = () => {
this.setState({playing: filename}); this.audio.play();
this.setState({playing: filename});
}
}; };
onRowClick = (record,index) => { onRowClick = (record,index) => {
this.audio.pause(); this.audio.pause();
@ -169,11 +170,11 @@ class Player extends React.Component {
}; };
onProgressChange = (value) => { onProgressChange = (value) => {
this.audio.currentTime = value; this.audio.currentTime = value;
this.setState({percent: value * 1.0 / this.state.totTime,curTime: value}); this.setState({curTime: value});
}; };
onAfterChange = (value) => { onAfterChange = (value) => {
this.audio.currentTime = value; this.audio.currentTime = value;
this.setState({percent: value * 1.0 / this.state.totTime,curTime: value}); this.setState({curTime: value});
}; };
render() { render() {
return ( return (
@ -219,8 +220,8 @@ class Player extends React.Component {
<Col style={{ width:'calc(100% - 340px)', padding:5 }}> <Col style={{ width:'calc(100% - 340px)', padding:5 }}>
<Slider value={this.state.curTime} min={0} max={this.state.totTime} step={1} onChange={this.onProgressChange} tipFormatter={formatTime} style={{ borderTop:'4px solid #494949', borderBottom:'4px solid #494949' }} /> <Slider value={this.state.curTime} min={0} max={this.state.totTime} step={1} onChange={this.onProgressChange} tipFormatter={formatTime} style={{ borderTop:'4px solid #494949', borderBottom:'4px solid #494949' }} />
</Col> </Col>
<Col style={{width:30, color:'#fff'}}> {formatTime(this.state.totTime)} </Col> <Col style={{ width:30, color:'#fff' }}> {formatTime(this.state.totTime)} </Col>
<Col style={{overflowY:'hidden', width:280, display:'block'}}> <Col style={{ overflowY:'hidden', width:280, display:'block' }}>
<ButtonGroup> <ButtonGroup>
<Button type="primary" size='large' icon="step-backward" onClick={this.onPrevClick}/> <Button type="primary" size='large' icon="step-backward" onClick={this.onPrevClick}/>
<Button type="primary" size='large' icon={this.state.playIcon} onClick={this.onPlayClick} /> <Button type="primary" size='large' icon={this.state.playIcon} onClick={this.onPlayClick} />