0.0.5 • Published 9 years ago

react-kinetophone v0.0.5

Weekly downloads
13
License
MIT
Repository
-
Last release
9 years ago

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"));
0.0.5

9 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago