Using js audio instead of html5, should fix #293

src/js/components/PlaybackControls.js

@@ -21,12 +21,46 @@ class PlaybackControls extends React.Component{
 
 	constructor(props){
 		super(props)
-
+		this.stream = null;
 		this.state = {
 			expanded: false
 		}
 	}
 
+	componentDidMount(){
+		if (this.props.http_streaming_enabled){
+			this.playStream();
+		}
+	}
+
+	playStream(props = this.props){
+		
+		if (!this.stream){
+			this.stream = new Audio();
+		} else {
+			this.stream.src = null;
+		}
+
+		if (!props.current_track || !props.http_streaming_enabled || !props.http_streaming_url){
+			return false;
+		}
+
+		var url = props.http_streaming_url+"?cache_buster="+props.current_track.uri;
+
+		console.log("Playing stream: "+url);
+
+		this.stream.src = url;
+		this.stream.play();
+	}
+
+	componentWillReceiveProps(nextProps){
+		if (!this.props.current_track && nextProps.current_track ||
+			this.props.current_track && nextProps.current_track && this.props.current_track.uri !== nextProps.current_track.uri){
+
+			this.playStream(nextProps);
+		}
+	}
+
 	renderPlayButton(){
 		var button = <a className="control play" onClick={() => this.props.mopidyActions.play()}><Icon name="play_circle_filled" type="material" /></a>
 		if (this.props.play_state == 'playing'){
@@ -73,10 +107,6 @@ class PlaybackControls extends React.Component{
 		return (
 			<div className={(this.state.expanded ? "expanded playback-controls" : "playback-controls")}>
 
-				{this.props.http_streaming_enabled && this.props.play_state == 'playing' ? <audio id="http-streamer" autoPlay preload="none">
-					<source src={this.props.http_streaming_url} type={"audio/"+this.props.http_streaming_encoding} />
-				</audio> : null}
-
 				{this.props.next_track && this.props.next_track.images ? <Thumbnail className="hide" size="large" images={this.props.next_track.images} /> : null}
 				
 				<div className="current-track">