https://github.com/binarymuse/react-kinetophone

React-based player for the Kinetophone library
https://github.com/binarymuse/react-kinetophone

Last synced: 29 days ago
JSON representation

React-based player for the Kinetophone library

• Host: GitHub
• URL: https://github.com/binarymuse/react-kinetophone
• Owner: BinaryMuse
• Created: 2015-02-24T21:38:31.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-17T15:35:41.000Z (over 8 years ago)
• Last Synced: 2024-10-11T10:48:35.169Z (about 1 month ago)
• Language: JavaScript
• Size: 6.44 MB
• Stars: 3
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React Kinetophone

=================

React Kinetophone is a React-based UI for [Kinetophone](https://github.com/BinaryMuse/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:

```javascript

{

  src: "/path/to/audio/file.mp3"

}

```

Image timings must contain the following data in the timing's `data` key:

```javascript

{

  src: "/path/to/image.jpg"

}

```

Here's a simple end-to-end example.

```javascript

// 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 (

      


        


          

          

        

        

        

      

    );

  }

});


React.render(, document.getElementById("app"));

```