Synth : React-ready export

[storycoding]

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]

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]

Thanks! I'll try that out and let you know how it goes 👍

On Thu, Mar 30, 2023 at 7:03 AM John Nesky @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/johnnesky/beepbox/issues/61#issuecomment-1489797900, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHHMP2B2FNNPZGELXWJXVHTW6UV3JANCNFSM6AAAAAAWL3TL7Y . You are receiving this because you authored the thread.Message ID: @.***>

[johnnesky]

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

[storycoding]

You're a legend for getting back to me on this.

I've been pretty busy working full time for LEGO these days, but I'm inspired to take that project back from the shelf and try your package out.

All the best, John Nesky!

Kind regards, Nuno Neves

On Wed, Aug 28, 2024 at 4:01 AM John Nesky @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/johnnesky/beepbox/issues/61#issuecomment-2313940445, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHHMP2BMT3TSHVG65F3LB63ZTUVOBAVCNFSM6AAAAABNHIPYVGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJTHE2DANBUGU . You are receiving this because you authored the thread.Message ID: @.***>