Question

在我的反应应用程序中使用SC.stream，我只是尝试从soundcloud API播放一首曲目。这是我的代码：

SC.initialize({
    client_id: '12xxx' // my client ID
  });

//[...]

console.log(this.props.track.trackId); // I get here successfully the trackId from the song I'd like to play

SC.stream('/tracks/'+this.props.track.trackId, function(track){
  track.play();
  console.log(track); // I successfully get the track object here. playState attribute is on 1 
});

不幸的是，曲目永远不会开始播放。我在控制台中没有错误。

编辑：问题仅在Chrome上，它在firefox和safari上运行完美。我现在更加困惑。

编辑2 ：它似乎与不在Chrome上运行的HTML5播放器相关联：当您在chrome：// plugins /上重新启用Flash播放器时，通过选中“始终允许运行”，它的工作原理

Answer 1

我不确定代码是什么＆＃34;跟踪＆＃34;指的是你有track.play（）。如果它是音频div，那么这应该有帮助。

＆＃13;

class PlayerCtrlRender extends React.Component {
   render() {
    let index = this.state.playIndex;
    let currentTrack = this.state.randomOn ? this.state.shuffledQueue[index] : this.props.queue[index];
    let source = 'http://192.168.0.101:3950/play/' + currentTrack.location;
    let title = currentTrack.title;

    let progressData = {count: this.state.progressCount * 100, index: this.state.progressIndex * 100};
    return (
      <div id='PlayerCtrlSty' style={PlayerCtrlSty}>
        <div className='FlexBox'>
          <div style={timerLeftSty}>{this.state.progressIndex}</div>
          <PlayerActions playing={this.state.isPlaying} clickHandler={this.clickHandler}/>
          <div style={timerRightSty}>{this.state.progressCount}</div>
        </div>
        <JProgressBar data={progressData} position='none' />
        <div id="title" style={{textAlign: 'center'}}>{title}</div>
        <audio
          ref="audioDiv"
          src={source}
          onDurationChange={this.onDurationChange}
          onTimeUpdate={this.onTimeUpdate}
          onEnded={this.nextSong}
        />
      </div>
    );
  }
}

export default class PlayerCtrl extends PlayerCtrlRender {
  constructor() {
    super();
    this.state = {
      playIndex: 0,
      queueLength: 1,
      isPlaying: false,
      progressCount: 0,
      progressIndex: 0,
      shuffledQueue: [{title: '', location: ''}],
      randomOn: false
    };
  }

  componentDidMount = () => {
    let queue = knuthShuffle(this.props.queue.slice(0));
    this.setState({queueLength: queue.length, shuffledQueue: queue});
    this.refs.audioDiv.volume = .1;
  }
  clickHandler = (buttonid) => {
    this.refs.audioDiv.autoplay = false;
    switch (buttonid) {
      case 'play': this.refs.audioDiv.play(); this.setState({isPlaying: true}); break;
      case 'pause': this.refs.audioDiv.pause(); this.setState({isPlaying: false}); break;
      case 'back': this.refs.audioDiv.currentTime = 0; break;
      case 'next': this.nextSong(); break;
      case 'random': this.refs.audioDiv.autoplay = this.state.isPlaying;
          this.setState({randomOn: !this.state.randomOn}); break;
    }
  }
  nextSong = () => {
    this.refs.audioDiv.autoplay = this.state.isPlaying;
    this.refs.audioDiv.currentTime = 0;
    let newIndex = this.state.playIndex + 1;
    if (newIndex == this.state.queueLength) newIndex = 0;
    this.setState({playIndex: newIndex});
  }
  onDurationChange = () => {
    let duration = this.refs.audioDiv.duration;
    duration = getTime(Math.floor(duration));
    this.setState({progressCount: duration})
    this.setState({progressIndex: 0})
  }
  onTimeUpdate = () => {
    let currentTime = this.refs.audioDiv.currentTime;
    currentTime = getTime(Math.floor(currentTime));
    this.setState({progressIndex: currentTime})
  }
}

＆＃13;

调用play（）时，Soundcloud流，soundmanager2对象永远不会在Chrome上开始播放

1 个答案: