https://github.com/rakannimer/react-soundfont-player

A React wrapper over https://github.com/danigb/soundfont-player
https://github.com/rakannimer/react-soundfont-player

Last synced: 2 months ago
JSON representation

A React wrapper over https://github.com/danigb/soundfont-player

• Host: GitHub
• URL: https://github.com/rakannimer/react-soundfont-player
• Owner: rakannimer
• Created: 2018-10-16T13:38:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-16T14:22:50.000Z (over 6 years ago)
• Last Synced: 2024-11-29T16:20:44.623Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 167 KB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## react-soundfont-player

Render & Interact with Musical Instruments & Notes.

A React wrapper over [soundfont-player](https://github.com/danigb/soundfont-player)

[![CircleCI][circleci-badge]][circleci-href]

[![NPM][npm-version-badge]][npm-href]

[![BundlePhobia][bundlephobia-badge]][bundlephobia-href]

### Install

```sh

yarn add react-soundfont-player

# Or

npm i react-soundfont-player

```

### Usage

```jsx

import * as React from "react";

import { render } from "react-dom";

import ReactSoundFontPlayer from "react-soundfont-player";

const App = () => {

  return (

    

      {({ instrument, isLoading, audioContext: ac }) => {

        return (

           {

              // Play A4 for 500 ms

              instrument.play("A4").stop(ac.currentTime + 0.5);

            }}

          >

            Play A4

          

        );

      }}

    

  );

};

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

```

[circleci-href]: https://circleci.com/gh/rakannimer/react-soundfont-player

[circleci-badge]: https://img.shields.io/circleci/project/github/rakannimer/react-soundfont-player.svg

[npm-href]: https://www.npmjs.com/package/react-soundfont-player

[npm-version-badge]: https://img.shields.io/npm/v/react-soundfont-player.svg

[npm-license-badge]: https://img.shields.io/github/license/rakannimer/react-soundfont-player.svg

[bundlephobia-badge]: https://img.shields.io/bundlephobia/minzip/react-soundfont-player.svg

[bundlephobia-href]: https://bundlephobia.com/result?p=react-soundfont-player