https://github.com/unkleho/reactronica

React audio components for making music in the browser
https://github.com/unkleho/reactronica

react tonejs

Last synced: 3 months ago
JSON representation

React audio components for making music in the browser

• Host: GitHub
• URL: https://github.com/unkleho/reactronica
• Owner: unkleho
• License: mit
• Created: 2018-07-15T02:11:22.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T08:38:22.000Z (almost 2 years ago)
• Last Synced: 2024-11-14T04:41:59.267Z (3 months ago)
• Topics: react, tonejs
• Language: TypeScript
• Homepage: https://reactronica.com
• Size: 14.5 MB
• Stars: 463
• Watchers: 10
• Forks: 34
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Reactronica

[https://reactronica.com](https://reactronica.com)

React audio components for making music in the browser.

React treats UI as a function of state. This library aims to treat **_music_** as a function of state, rendering sound instead of UI. Visual components live side by side with Reactronica, sharing the same state and elegantly kept in sync.

Uses [ToneJS](https://tonejs.github.io/) under the hood. Inspired by [React Music](https://github.com/FormidableLabs/react-music).

> Warning: Highly experimental. APIs will change.

## Install

```bash

$ npm install --save reactronica

```

Note: Use React version >= 16.8 as [Hooks](https://reactjs.org/docs/hooks-intro.html) are used internally.

## Template

To get started quickly with Create React App and Reactronica, just run the command below:

```bash

$ npx create-react-app my-app --template reactronica

```

## Documentation

[https://reactronica.com](https://reactronica.com/#documentation)

### Components

- [Song](https://reactronica.com/#song)

- [Track](https://reactronica.com/#track)

- [Instrument](https://reactronica.com/#instrument)

- [Effect](https://reactronica.com/#effect)

## Demos

- [Digital Audio Workstation](https://reactronica.com/daw)

- [Music chord, scale and progression finder](https://music-toolbox.now.sh)

## Usage

```jsx

import React from 'react';

import { Song, Track, Instrument, Effect } from 'reactronica';

const Example = () => {

  return (

    // Top level component must be Song, with Tracks nested inside

    

       {

          console.log(step, index);

        }}

      >

        

        {/* Add effects chain here */}

        

        

      

      

         {

            // Runs when all samples are loaded

          }}

        />

      

    

  );

};

```

## Thanks

- https://tonejs.github.io/

- https://github.com/FormidableLabs/react-music

- https://github.com/jaredpalmer/tsdx

- https://github.com/crabacus/the-open-source-drumkit for the drum sounds

## License

MIT © [unkleho](https://github.com/unkleho)