Synth : React-ready export
Opened this issue · 4 comments
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 🚀
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
I finally got around to publishing an npm package! Does this package satisfy your requirements?
https://www.npmjs.com/package/beepbox