Поток Soundcloud, объект soundmanager2 никогда не начинает воспроизводиться в Chrome при вызове play()

Используя 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 
});

К сожалению, треки так и не начинают воспроизводиться. Я не получаю никаких ошибок в консоли.

Редактировать: проблема только в хроме, он отлично работает в firefox и сафари. Теперь я еще больше озадачен.

Редактировать 2: похоже, это связано с тем, что проигрыватель HTML5 не работает в Chrome: когда вы повторно включаете проигрыватель Flash в chrome://plugins/, установив флажок «всегда разрешено запускать», он работает


reactjs javascript soundcloud soundmanager2
person Arthur Rgr    schedule 11.11.2015    source источник
comment
У меня тоже есть эта проблема. И включение параметра «Всегда разрешено запускать» определенно работает. Еще одна вещь, которую я только что обнаружил, заключается в том, что если вы встраиваете проблемную страницу в iframe, она воспроизводится нормально, без необходимости изменять настройки плагина.   -  person alex    schedule 18.11.2015
comment
Стоит отметить, что в зависимости от вашего рынка (с точки зрения устройства), iOS не поддерживает стилизацию iframe, поэтому ожидайте искажения при просмотре на iphone и т. д.   -  person MrMarlow    schedule 18.11.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен из кода, что означает «дорожка», когда у вас есть track.play(). Если это аудио 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})
  }
}

person J. Mark Stevens    schedule 20.11.2015
comment
Большое спасибо @janaka-stevens, но моя проблема намного проще. Трек — это объект с некоторыми свойствами. включая идентификатор дорожки. Я просто пытаюсь заставить поток работать в его простейшей форме, давая ему trackId и все - person Arthur Rgr; 24.11.2015
comment
Я смотрел на Soundcloud API и заметил, что у них есть html5 и флеш-плеер. Если вы используете флеш-плеер, установлена ​​ли флеш-память на хроме? - person J. Mark Stevens; 24.11.2015