{"id":17239014,"url":"https://github.com/binarymuse/react-kinetophone","last_synced_at":"2025-07-29T09:32:39.146Z","repository":{"id":27794360,"uuid":"31283326","full_name":"BinaryMuse/react-kinetophone","owner":"BinaryMuse","description":"React-based player for the Kinetophone library","archived":false,"fork":false,"pushed_at":"2016-03-17T15:35:41.000Z","size":6753,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-30T08:41:53.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"tsevans/tsevans.github.io","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BinaryMuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-24T21:38:31.000Z","updated_at":"2018-06-24T21:43:42.000Z","dependencies_parsed_at":"2022-08-31T00:01:25.090Z","dependency_job_id":null,"html_url":"https://github.com/BinaryMuse/react-kinetophone","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-kinetophone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-kinetophone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-kinetophone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-kinetophone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BinaryMuse","download_url":"https://codeload.github.com/BinaryMuse/react-kinetophone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228006288,"owners_count":17854990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T05:47:30.150Z","updated_at":"2024-12-03T21:42:07.572Z","avatar_url":"https://github.com/BinaryMuse.png","language":"JavaScript","readme":"React Kinetophone\n=================\n\nReact Kinetophone is a React-based UI for [Kinetophone](https://github.com/BinaryMuse/kinetophone) instances that contain audio and images.\n\nInstallation\n------------\n\nReact Kinetophone is available on npm:\n\n    npm install [--save] react-kinetophone\n\nYou can then require it as normal:\n\n    var ReactKinetophone = require(\"react-kinetophone\");\n\nReact Kinetophone also works with browser module bundlers like Browserify and webpack.\n\nReact Kinetophone requires React and Kinetophone to be installed separately.\n\nExample\n-------\n\nReact Kinetophone works with Kinetophone channels that contain audio clips or images.\n\nAudio timings must contain the following data in the timing's `data` key:\n\n```javascript\n{\n  src: \"/path/to/audio/file.mp3\"\n}\n```\n\nImage timings must contain the following data in the timing's `data` key:\n\n```javascript\n{\n  src: \"/path/to/image.jpg\"\n}\n```\n\nHere's a simple end-to-end example.\n\n```javascript\n// Create our simple Kinetophone\nvar numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\nvar imageChannel = {\n  name: \"images\",\n  timings: numbers.map(function(number, index) {\n    return {\n      start: 1000 * index,\n      duration: 1000,\n      data: {\n        src: \"/media/image\" + number + \".png\"\n      }\n    };\n  })\n};\n\nvar audioChannel = {\n  name: \"audio\",\n  timings: numbers.map(function(number, index) {\n    return {\n      start: 1000 * index,\n      duration: 1000,\n      data: {\n        src: \"/media/audio\" + number + \".mp3\"\n      }\n    };\n  })\n};\n\nvar kinetophone = new Kinetophone([imageChannel, audioChannel], 10000);\n\nvar App = React.createClass({\n  render: function() {\n    return (\n      \u003cdiv\u003e\n        \u003cdiv\u003e\n          \u003cReactKinetophone.ControlBar kinetophone={this.props.kinetophone} /\u003e\n          \u003cReactKinetophone.TimeDisplay kinetophone={this.props.kinetophone} /\u003e\n        \u003c/div\u003e\n        \u003cReactKinetophone.ImageOutput kinetophone={this.props.kinetophone} channel=\"images\"\n                                      className=\"images-channel\" /\u003e\n        \u003cReactKinetophone.AudioOutput kinetophone={this.props.kinetophone} channel=\"audio\" /\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nReact.render(\u003cApp kinetophone={kinetophone} /\u003e, document.getElementById(\"app\"));\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinarymuse%2Freact-kinetophone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinarymuse%2Freact-kinetophone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinarymuse%2Freact-kinetophone/lists"}