Soundcloud stream, oggetto soundmanager2 non inizia mai a giocare su Chrome quando si chiama play()

Question

Utilizzando SC.stream nella mia app di risposta, sto semplicemente cercando di riprodurre una traccia da Soundcloud API. Ecco il mio codice:

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

Sfortunatamente, le tracce non iniziano mai a suonare. Non ho errori nella console.

Modifica: il problema è solo su chrome, funziona perfettamente su firefox e safari. Sono ancora più perplesso ora.

Edit 2: sembra essere legato al player HTML5 non funziona su Chrome: quando si ri-abilitare flash player su chrome: // plugins/controllando "sempre permesso di correre", funziona

Answer 1

Non sono sicuro dal codice a cosa si riferisce "traccia" quando si ha track.play(). Se è il div audio, questo dovrebbe aiutare.

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