Question

我有一个使用'react-sound'（使用soundmanager2）的组件来播放文件。当我暂停时，文件会暂停，当我按下播放时，它会从我离开的位置开始。

然而，我试图实现一个按钮，它总是回到我之前暂停的位置。所以我会暂停文件，然后再听5秒钟，按下replay按钮，然后从我暂停的最后一个位置再听一遍。至少是这个想法。

我在下面实施的内容确实有用。然而，有时候（并不总是，在我看来），它不会进入精确位置，而是提前开始一点点。

为什么会这样？我首先认为mp3可能不是最精确的文件格式，但我也有.wav文件＆amp;更重要的是，只要按下播放/暂停，它就会不。

// Import React
import React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import Sound from 'react-sound';

class AudioPlayer extends React.Component{

  constructor(props) {
    super(props);

    this.state = {
       playStatus: Sound.status.STOPPED,
       elapsed: 0,
       total: 0,
       playFromPosition: 0,
       lastPause: 0,
     }
  }

  togglePlay() {
    if(this.state.playStatus === Sound.status.PLAYING){
     // Pause if playing
     this.setState({playStatus: Sound.status.PAUSED})

     this.setState({playStatus: Sound.status.PAUSED, lastPause: this.state.elapsed});
   } else {
     // Resume if paused
     this.setState({playStatus: Sound.status.PLAYING})
   }
  }

  repeat() {
    if(this.state.playFromPosition != this.state.lastPause) {
        this.setState({playFromPosition: this.state.lastPause});
    } else {
        var newPos = this.state.lastPause + 0.0001;
        this.setState({playFromPosition: newPos});
    }
  }

  forward(){
    this.setState({playFromPosition: this.state.elapsed + 1000*10});
  }

  backward(){
    this.setState({playFromPosition: this.state.elapsed - 1000*10});
  }

  handleSongPlaying(audio){
     this.setState({
                      elapsed: audio.position,
                      total: audio.duration})
   }

  render() {
    return (
      <div className="row handle">
        <Sound
            url="./sound.mp3"
            playStatus={this.state.playStatus}
            onPlaying={this.handleSongPlaying.bind(this)}
            playFromPosition={this.state.playFromPosition}
            />

        <button onClick={this.togglePlay.bind(this)}>Play / Pause</button>
        <button onClick={this.repeat.bind(this)}>Replay</button>
        <button onClick={this.backward.bind(this)}>Rewind 2 sec</button>
        <button onClick={this.forward.bind(this)}>Forward 2 sec</button>
      </div>
    );
  }
}
...

React-Sound - 回到保存位置似乎不精确？

0 个答案: