Last active
May 17, 2018 14:55
-
-
Save lesterzone/1551bd5b541d15d7edf6 to your computer and use it in GitHub Desktop.
React.js Html5 audio tag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.audio { | |
position: relative; | |
} | |
.audio > canvas { | |
position: absolute; | |
top: 0; | |
left: 0; | |
pointer-events: none; | |
} | |
.audio-play { | |
display: block; | |
border: 1px solid #ddd; | |
width: 50px; | |
height: 50px; | |
line-height: 50px; | |
text-align: center; | |
border-radius: 50%; | |
box-shadow: 0 0 0 2px #f7f7f7, inset 0 0 1px white; | |
text-decoration: none; | |
color: #494949; | |
} | |
.audio a:before { | |
content: "\25B6"; | |
} | |
.audio.playing a:before { | |
content: "\25AE\25AE"; | |
} | |
.audio-play:hover { | |
color: #1b1b1b; | |
background: #fbfbfb; | |
text-decoration: none; | |
} | |
.audio-play:active { | |
background: #f5f5f5; | |
text-decoration: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* All credits to: https://github.com/component/audio | |
* Simple HTML5 <audio> tag | |
* Used with base64 encoded string as source for audio | |
* Usage: | |
* var AudioTag = require('./pat_to_this_file'); | |
* <AudioTag src={your_base64_string} /> | |
*/ | |
'use strict'; | |
var React = require('react'); | |
module.exports = React.createClass({ | |
getInitialState: function() { | |
return { | |
audio: new Audio(this.props.src), | |
isPlaying: false | |
}; | |
}, | |
componentDidMount: function() { | |
this.state.audio.addEventListener('timeupdate', this.ontimeupdate); | |
}, | |
ontimeupdate: function() { | |
var el = this.state.audio; | |
var number = el.currentTime / el.duration * 100; | |
this.update(number); | |
if (number === 100) { | |
return this.setState({ | |
isPlaying: false | |
}); | |
} | |
}, | |
toggle: function(event) { | |
event.preventDefault(); | |
var state = this.state.audio; | |
var isPlaying = this.state.isPlaying; | |
this.setState({ | |
isPlaying: !isPlaying | |
}); | |
if (isPlaying) { | |
return state.pause(); | |
} | |
return state.play(); | |
}, | |
update: function(progress) { | |
var context = this.refs.manager.getDOMNode().getContext('2d'); | |
var percent = Math.min(progress, 100); | |
var ratio = window.devicePixelRatio || 1; | |
var size = this.refs.manager.getDOMNode().width / ratio; | |
var half = size / 2; | |
var x = half; | |
var y = half; | |
var rad = half - 1; | |
var angle = Math.PI * 2 * (percent / 100); | |
context.clearRect(0, 0, size, size); | |
context.strokeStyle = '#00bbff'; | |
context.beginPath(); | |
context.arc(x, y, rad, 0, angle, false); | |
context.stroke(); | |
}, | |
render: function() { | |
var className = this.state.isPlaying ? 'audio playing' : 'audio paused'; | |
return React.DOM.div({ | |
className: className | |
}, [ | |
React.DOM.a({ | |
href: '#', | |
onClick: this.toggle, | |
className: 'audio-play' | |
}), | |
React.DOM.canvas({ | |
width: 57, | |
height: 57, | |
ref: 'manager', | |
size: 53 | |
}) | |
]); | |
} | |
}); |
I'll like to hear about any improvements or suggestions.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As I mentioned in source code comments, All credits to: https://github.com/component/audio