react-kinetophone
v0.0.5
Published
React-based player for the Kinetophone library
Downloads
7
Readme
React Kinetophone
React Kinetophone is a React-based UI for Kinetophone instances that contain audio and images.
Installation
React Kinetophone is available on npm:
npm install [--save] react-kinetophone
You can then require it as normal:
var ReactKinetophone = require("react-kinetophone");
React Kinetophone also works with browser module bundlers like Browserify and webpack.
React Kinetophone requires React and Kinetophone to be installed separately.
Example
React Kinetophone works with Kinetophone channels that contain audio clips or images.
Audio timings must contain the following data in the timing's data
key:
{
src: "/path/to/audio/file.mp3"
}
Image timings must contain the following data in the timing's data
key:
{
src: "/path/to/image.jpg"
}
Here's a simple end-to-end example.
// Create our simple Kinetophone
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var imageChannel = {
name: "images",
timings: numbers.map(function(number, index) {
return {
start: 1000 * index,
duration: 1000,
data: {
src: "/media/image" + number + ".png"
}
};
})
};
var audioChannel = {
name: "audio",
timings: numbers.map(function(number, index) {
return {
start: 1000 * index,
duration: 1000,
data: {
src: "/media/audio" + number + ".mp3"
}
};
})
};
var kinetophone = new Kinetophone([imageChannel, audioChannel], 10000);
var App = React.createClass({
render: function() {
return (
<div>
<div>
<ReactKinetophone.ControlBar kinetophone={this.props.kinetophone} />
<ReactKinetophone.TimeDisplay kinetophone={this.props.kinetophone} />
</div>
<ReactKinetophone.ImageOutput kinetophone={this.props.kinetophone} channel="images"
className="images-channel" />
<ReactKinetophone.AudioOutput kinetophone={this.props.kinetophone} channel="audio" />
</div>
);
}
});
React.render(<App kinetophone={kinetophone} />, document.getElementById("app"));