Skip to content

Instantly share code, notes, and snippets.

@ikouchiha47

ikouchiha47/audioPlayer1.html

Last active November 26, 2015 03:24
Show Gist options
  • Save ikouchiha47/25160a17b96ae1a460be to your computer and use it in GitHub Desktop.
Save ikouchiha47/25160a17b96ae1a460be to your computer and use it in GitHub Desktop.
Download ZIP
Raw
audioPlayer1.html
<html>
<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
<style>
/* Styles go here */
.player {
width: 300px;
background-color: #000;
color: #fff;
padding: 10px;
}
.seek {
height: 5px;
background-color: #aaa;
width: 80%;
margin: 10px auto 0;
position: relative;
}
.seekbar {
display: inline-block;
background-color: #fff;
height: 100%;
position: absolute;
}
.controls {
list-style: none;
text-align: center;
padding: 0;
}
.controls li {
margin: 0;
display: inline-block;
padding: 0 10px;
border: 1px solid #ccc;
}
</style>
<body>
<div id="container"></div>
<script type="text/jsx">
var MediaTracks = React.createClass({
renderTracks: function() {
return this.props.tracks.map(function(track) {
return <li onClick={ this.props.onClick.bind(null, track.id) } key={track.id}>{ track.text }</li>;
}.bind(this))
},
render: function() {
return (
<ul className="plWrap"> { this.renderTracks() } </ul>
);
}
});
var MediaPlayer = React.createClass({
getInitialState: function() {
return {
currentIndex: 0,
progress: 0,
isPlaying: true,
}
},
handleClick: function(id) {
this.setState({
currentIndex: +id,
restart: true
});
},
handlePause: function() {
'use strict'
let audio = React.findDOMNode(this.refs.audio);
if(this.state.isPlaying) {
audio.pause();
} else {
audio.play();
}
this.setState({ isPlaying: !this.state.isPlaying });
},
componentDidMount: function() {
'use strict';
let audio = React.findDOMNode(this.refs.audio);
audio.ontimeupdate = this.timeUpdate;
},
componentWillUpdate: function(nP, nxtState) {
'use strict';
if(nxtState.restart) {
let audio = React.findDOMNode(this.refs.audio);
audio.pause();
}
},
componentDidUpdate: function(prvProps, prvState) {
'use strict';
if(this.state.restart) {
let state = { restart: false, isPlaying: true };
let audio = React.findDOMNode(this.refs.audio);
audio.ontimeupdate = this.timeUpdate;
audio.play()
this.setState(state);
}
},
timeUpdate: function(e) {
'use strict';
let t = e.target;
this.setState({ progress: Math.floor(t.currentTime / t.duration) * 100 });
},
render: function() {
console.log(this.state.currentIndex);
return (
<div className= "wrapper">
<h1> Player </h1>
<audio preload="true"
ref="audio"
key={this.state.currentIndex}
src= { this.props.audios[this.state.currentIndex].url}
autoPlay />
<div className="player">
<div className="seek">
<span className="seekbar" style={{ width: this.state.progress + "%" }}/>
</div>
<ul className="controls">
<li><a>&lt;&lt;</a></li>
<li><a onClick={this.handlePause}>{this.state.isPlaying ? "||" : ">"}</a></li>
<li><a>&gt;&gt;</a></li>
</ul>
</div>
<MediaTracks tracks={this.props.audios} onClick={this.handleClick}/>
</div>
);
}
});
var audios = [{
id: 0,
url: "http://www.archive.org/download/bolero_69/Bolero.mp3",
text: "Bolero"
}, {
id: 1,
url: "http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3",
text: "Beethnoven"
}, {
id: 2,
url: "http://www.archive.org/download/CanonInD_261/CanoninD.mp3",
text: "CanoninD"
}, {
id: 3,
url: "https://archive.org/details/mythium/SSB___11_03_TFTake_2.mp3",
text: "Forsaken"
}];
React.render(
<MediaPlayer audios={audios}/>,
document.getElementById('container')
);
</script>
</body>
</html>
Raw
audioPlayer2.html
<html>
<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
<style>
/* Styles go here */
.player {
width: 300px;
background-color: #000;
color: #fff;
padding: 10px;
}
.seek {
height: 5px;
background-color: #aaa;
width: 80%;
margin: 10px auto 0;
position: relative;
}
.seekbar {
display: inline-block;
background-color: #fff;
height: 100%;
position: absolute;
}
.controls {
list-style: none;
text-align: center;
padding: 0;
}
.controls li {
margin: 0;
display: inline-block;
padding: 0 10px;
border: 1px solid #ccc;
}
</style>
<body>
<div id="container"></div>
<script type="text/jsx">
var MediaTracks = React.createClass({
renderTracks: function() {
return this.props.tracks.map(function(track) {
return <li onClick={ this.props.onClick.bind(null, track.id) } key={track.id}>{ track.text }</li>;
}.bind(this))
},
render: function() {
return (
<ul className="plWrap"> { this.renderTracks() } </ul>
);
}
});
var Audio = React.createClass({
componentDidMount: function() {
'use strict';
let audio = React.findDOMNode(this.refs.audio);
audio.addEventListener('timeupdate', this.handleTimeUpdate);
audio.addEventListener('ended', this.handleEnded);
},
componentWillRecieveProps: function(nxtProps) {
'use strict';
const isPlaying = this.props.isPlaying;
if(nxtProps.isPlaying != isPlaying) {
let audio = React.findDOMNode(this.refs.audio);
isPlaying ? audio.play() : audio.pause();
}
},
componentWillUnmount: function() {
'use strict';
let audio = React.findDOMNode(this.refs.audio);
audio.removeEventListener('timeupdate', this.handleTimeUpdate);
},
handleTimeUpdate: function() {
'use strict';
let t = e.target;
this.props.onTimeUpdate(Math.floor(t.currentTime / t.duration) * 100);
},
handleEnded: function() {
this.props.onEnded();
},
render: function() {
return (
<audio preload="true"
ref="audio"
src= { this.props.trackUrl }
autoPlay />
);
}
});
var MediaPlayer = React.createClass({
getInitialState: function() {
return {
currentIndex: 0,
progress: 0,
isPlaying: true,
}
},
handleClick: function(id) {
this.setState({
currentIndex: +id,
restart: true
});
},
handlePause: function() {
this.setState({ isPlaying: !this.state.isPlaying });
},
handleNextTrack: function() {
if(this.currentIndex < this.props.audios.length)
this.setState({ currentIndex: this.state.currentIndex + 1 });
},
handleTimeUpdate: function(progress) {
this.setState({ progress: progress });
},
render: function() {
return (
<div className= "wrapper">
<h1> Player </h1>
<Audio
trackUrl={this.props.audios[this.state.currentIndex].url}
key={this.state.currentIndex}
isPlaying={this.state.isPlaying}
onTimeUpdate={this.handleTimeUpdate}
onEnded={this.handleNextTrack}/>
<div className="player">
<div className="seek">
<span className="seekbar" style={{ width: this.state.progress + "%" }}/>
</div>
<ul className="controls">
<li><a>&lt;&lt;</a></li>
<li><a onClick={this.handlePause}>{this.state.isPlaying ? "||" : ">"}</a></li>
<li><a>&gt;&gt;</a></li>
</ul>
</div>
<MediaTracks tracks={this.props.audios} onClick={this.handleClick}/>
</div>
);
}
});
var audios = [{
id: 0,
url: "http://www.archive.org/download/bolero_69/Bolero.mp3",
text: "Bolero"
}, {
id: 1,
url: "http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3",
text: "Beethnoven"
}, {
id: 2,
url: "http://www.archive.org/download/CanonInD_261/CanoninD.mp3",
text: "CanoninD"
}, {
id: 3,
url: "https://archive.org/details/mythium/SSB___11_03_TFTake_2.mp3",
text: "Forsaken"
}];
React.render(
<MediaPlayer audios={audios}/>,
document.getElementById('container')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment