Soundcloud流，soundmanager2对象在调用play(）时从未在Chrome上开始播放

Soundcloud stream, soundmanager2 object never starts playing on Chrome when calling play()

本文关键字：Chrome 播放 开始 soundmanager2 对象 play 调用 Soundcloud      更新时间：2023-09-26

在我的react应用程序中使用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：它似乎链接到HTML5播放器不在Chrome上工作：当你在上重新启用flash播放器时chrome://plugins/通过检查"始终允许运行"，它可以运行

我不确定当你有track.play（）时，从代码中"track"指的是什么。如果它是音频div，那么这应该会有所帮助。

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})
  }
}

相关文章：