JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
<script src="http://fb.me/react-with-addons-0.5.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
/** @jsx React.DOM */
var myAudioObject = React.createClass({
play: function () {
var audio = this.getDOMNode();
audio.load();
audio.play();
},
render: function() {
return (
<audio id="mySoundClip" preload="auto">
<source src='http://restricted.broadchart.com/30sec64kbps/94/310153-02.01.mp3'></source>
Your browser does not support audio.
</audio>
);
}
});
var myPlayButton = React.createClass({
render: function() {
return (
<button onClick={this.props.handleClickPlay}>Play</button>
);
}
});
var App = React.createClass({
handleClickPlay: function() {
this.refs.audioObject.play()
},
render: function() {
return (
<div>
<myAudioObject ref="audioObject" />
<myPlayButton handleClickPlay={this.handleClickPlay} />
</div>
);
}
});
React.renderComponent(<App />, document.body);