johnnesky/beepbox

Synth : React-ready export

Opened this issue · 4 comments

storycoding commented

I took a look at the README.md and the example use case of synth_example.html and attempted to replicate the import into my react app.

I don't want to add the script as an src at root level, as it will greatly impact the performance of my app, so I would rather import it only in the relevant components.

I created two scenarios, one close to what's already implemented, and the other is the react dev dream version 🤤

/* low effort */

import beepbox from 'src/beepbox';
import audio from "src/beepbox/audio";

const ComponentWithAudio = (track : string) => {
  const [Synth] = useState(new beepbox.synth(audio[track]));

  useEffect( () => {
    Synth.play();
    return () => {
      Synth.deactivateAudio();
    }
  },[])
}

export default ComponentWithAudio;


/* react dev wet dream */

import { Synth } from 'src/beepbox';
import audio from "src/beepbox/audio";


const ComponentWithAudio = (trackId : string) => {
  const [track] = useState(audio[trackId]);

  useEffect( () => {
    Synth.play(track);
    return () => {
      Synth.stop(track);
    }
  },[])
}

export default ComponentWithAudio;

The cherry on top would be to have the type definitions and description of the Synth themselves, so there's a clear understanding of what they do in the editor.

This player is excellent.
I believe this extra mile will greatly increase its adaptation by the dev community 🚀

johnnesky commented

Unfortunately it'll be a little while before I set up a proper NPM package distribution for BeepBox, but you can copy some version of the code into your project, or maybe use npm link to connect the projects: https://docs.npmjs.com/cli/v9/commands/npm-link

It looks like you're using TypeScript, in which case you can import directly from the TypeScript source code, maybe something like this:

import {Song, Synth} from 'beepbox/synth/synth.js';

Then you can construct a Synth and optionally one or more Songs.

// As a one-liner:
const synth = new Synth('9n31s0k....');

// More flexible:
const song1 = new Song('9n31s0k...');
const synth = new Synth();
synth.setSong(song1);

And from there you can control the synth:

synth.play();
synth.pause();
synth.snapToStart();
synth.playing; // boolean accessor
storycoding commented
johnnesky commented

I finally got around to publishing an npm package! Does this package satisfy your requirements?
https://www.npmjs.com/package/beepbox

storycoding commented