Code Monkey home page Code Monkey logo

beepbox's Introduction

BeepBox

BeepBox is an online tool for sketching and sharing instrumental melodies. Try it out here!

All song data is packaged into the URL at the top of your browser. When you make changes to the song, the URL is updated to reflect your changes. When you are satisfied with your song, just copy and paste the URL to save and share your song!

BeepBox is a passion project, and will always be free to use. If you find it valuable and have the means, any gratuity via PayPal would be appreciated!

BeepBox is developed by John Nesky. This source code is available under the MIT license.

Compiling

The code is written in TypeScript, which requires Node & npm so install those first. To contribute changes, you'll also need git. Then to build this project, open the command line and run:

git clone https://github.com/johnnesky/beepbox.git
cd beepbox
npm install
npm run build

Code

The code is divided into several folders.

The synth/ folder has just the code you need to be able to play BeepBox songs out loud, and you could use this code in your own projects, like a web game. After compiling the synth code, open website/synth_example.html to see a demo using it. To rebuild just the synth code, run:

npm run build-synth

The editor/ folder has additional code to display the online song editor interface. After compiling the editor code, open website/index.html to see the editor interface. To rebuild just the editor code, run:

npm run build-editor

The player/ folder has a miniature song player interface for embedding on other sites. To rebuild just the player code, run:

npm run build-player

The website/ folder contains index.html files to view the interfaces. The build process outputs JavaScript files into this folder.

Dependencies

Most of the dependencies are listed in package.json, although I'd like to note that BeepBox also has an indirect, optional dependency on lamejs via jsdelivr for exporting .mp3 files. If the user attempts to export an .mp3 file, BeepBox will direct the browser to download that dependency on demand.

beepbox's People

Contributors

forrcaho avatar fpesari avatar gtrxac avatar jcreedcmu avatar johnnesky avatar zoadt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

beepbox's Issues

Deprecation of ScriptProcessorNode

There's a deprecation message for synth.ts on Chrome browser:
[Deprecation] The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)

Is that something that can be addressed?

Exportable Instruments

The ability to export/import instruments into .json files to eg use it for another masterpice

Can't hear any sound [Linux]

When trying to play some tunes, I don't hear any sound. Playing the same tune on another PC with Windows works.
Songs that worked in older versions, also cannot be heard now.

The tab is showing a speaker icon, so the application is trying to play something but fails...
JS console doesn't output anyting.

I'm using Google Chrome 89.0.4389.114 on Debian GNU/Linux 10 (buster) x86_64 (don't know if that's necessary)

Synth : React-ready export

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 🚀

Add translations to other languages

Your project is just AMAZING (maze-generator too)

I'm from Russia and often use it project to make music for my games

How about translations to other languages?
[English, Русский, and other]

If you decide to add translations, how will you do it:

Using something like this:

<select id="languages">
  <option value="en">English</option>
  <option value="ru">Русский</option>
  ...
</select>

Or you create new pages:

https://www.beepbox.co/en/ or `https://www.beepbox.co/` - for English
https://www.beepbox.co/ru/ - for Russian 
...

COPYRIGHT RELATED - "Commercial" use?

I do not know where to ask this, and I do not use twitter, so I will ask this here. If this question is answered on the site, I have not been able to find it (and I'm not counting the "it's free to use" as in "you can use it to make money", although it does sloghtly imply it but i want to be absolutely certain).

The question is basically: Can someone export a song raw from Beepbox and ask for money when resharing it?

I will absolutely add credits and links to beepbox regardless if I'm able to accept money with the music from it or not, as it's a super helpful, but I also want to keep the song in the style of the Beepbox instrumentsm so I want to ask if it would be within basically the TOS of the site to ask for money for my music that's created by this project. Cannot say for certain if I will ask for money, but I want to know before I finish the soundtrack / album, just in case I do decide to put it up for purchase on bandcamp (either as a pay what you want or with a base price). I will also try to donate back to Beepbox if I get excess money (that's not going to, like, getting equipment for future music endeavors or IRL rent / food). If it's not within the TOS / if it violates copyright, I will simply use another program later to convert the song into later on, or just... Make another variation of the song available for purchase.

Thank you for reading regardless of answer, and have a good day!

crackling sound when recording on linux/webkit/alsa

Expected behaviour:
Pressing CapsLock or Ctrl+Space, then ASDF etc lets me input notes in real time and hear the notes the same way as when clicking when they are being typed.

Actual behaviour:
Once you press a note in "piano mode" there's a very intrusive crackle on everything, it persists on everything (playback, clicking) until refreshing the page.

Steps to reproduce:
Uninstall or disable the pulseaudio daemon
Run a webkit browser on Linux
Open BeepBox from the url, press CapsLock then ASDF
Notice the loud crackle

Tried:
Enabling pulseaudio - it works - but that interferes with other programs that run fine without it

Possible solutions tests and workarounds:

  • I don't know for sure but it seems to me like something to do with buffering the audio frames. Maybe the piano mode feeds the sound system (alsa) real-time unbuffered audio frames and relies on there being a sound server running to sort out the underruns? Haven't looked into it yet. Maybe having an option in beepbox to use sound buffering when in "piano mode" is a way to go?
  • I could make it a point to use pulseaudio from now on but all audio in the browser works fine without it, even when recording from the mic so it feels like a workaround. to make it worse pulseaudio crashes every once in a while for unrelated reasons

Didn't notice any relevant errors in the dev console.

If you have any ideas please let me know. Thanks in advance.

Edit: works as expected in firefox (no pulseaudio), running beepbox in firefox in another window as a workaround (ideally would like it to work with webkit browsers though)

Copy & Paste Instrument Options are placed inconveniently

Sometimes, the "Random Instrument" option gives me an instrument so nice, that I either want to use it multiple times or use it as the base for another instrument in the piece.

Right now in Beepbox 3.0.9, I have to manually adjust the values on the target instrument while comparing them to the goal instrument.

If there were "Copy Instrument" and "Paste Instrument" buttons in the "Edit" menu, I'd no longer have to adjust instruments manually for the purpose of making an identical instrument.

What happened to pattern_format.txt?

I knew how outdated it was. It was very indescriptive to be able to understand anything out of it.

Can you look back at your code (that loads the "p" data in the URL) and try to write a better version?

Exportable Settings.

The ability to export settings in a file, because I use a Chromebook when I'm using beepbox, when I restart my Chromebook, it clears my settings, a feature where I don't have to re-enable/disable the settings again would be nice.

Different simultaneous note lengths

Posting this query/suggestion on behalf of my daughter, whom uses this and loves the new update...

"Is it possible for you to implement an instrument/channel playing two notes of different lengths at the same time? Idk if my wording makes sense, but right now beepbox automatically syncs note lengths/volume if they are above one another, and at times I've found myself wanting them to not be synced and the only work around I've found is to create another channel with the same instrument. Totally fine if this isn't enough of an issue for you to work on it or not possible, just asking since it would make things easier, since beepbox is the program i mainly use for music creation since everything else is pretty much perfect for me."

Add drag & drop json files to load it

I have a lot of json beepbox projects in different folders, so I have to press ctrl+O and find my file in system's file explorer again and again. That's a bit annoying. I think loading files by drop files in the window is much better.

[incredibly petty complaint] the bpm in exported .wavs is ever so slightly off

very original test track: https://beepbox.co/#8n10s7k2l00e0ot4Im0a7g0oj01i0r1o3T0v1L4u00q0d1f8y0ziC0w5c0h0bllllllllwp1tFE-a4R_irbWjnW4x8FE_qqHCZ7WPg
it should be exactly 40 seconds long (25 bars * 8 beats each / 300 bpm = 2/3 minutes = 40 seconds) but it ends up being 39 + 36900 samples, 7200 less than needed (aka missing 36 samples per beat)
that plus when you play a metronome next to it it goes noticeably off-sync within about 10 seconds
slower tempos make the problem less pronounced but it's still there (150 bpm goes off-sync in like 30 seconds which is not 2 * 10 seconds?)
not much of a problem usually, but when you wanna sync a video to it it can be pretty painful

i'm guessing there's some sort of rounding error, where the smallest beat subdivision is defined to be an integer amount of samples (while for perfect bpm compliance™ you'd have to calculate directly from the bpm every time i think? like if you wanted to have 1000 subdivisions per second (44.1 samples) you'd have to do round(44100 * subdivision_count / 1000) and not round(44100 / 1000) * subdivision_count so the rounding happens as late as possible)
when recording via stereo mix the problem doesn't seem to be present, probably because it uses the system clock or something

i don't expect this to get fixed because honestly that's too much effort for too little benefit probably

flac files of the export and the manual recording just in case: exported vs recorded via stereo mix.zip

How do you delete EQ filter points on mobile?

Is it just me or is it actually impossible to remove filter points from an instrument?

On desktop, you click on a point to remove it, but on mobile, tapping to remove doesn't seem to work. Do you have to be very precise?

feature request: tracker mode/view

Everything working the same way as now but now with an extra optional alternate text grid view in which the exact same note data is represented through numbers as if on a spreadsheet. On the horizontal axis it's channels, on the vertical axis it's time. The entries correspond to all editable attributes of notes that are currently achievable via clicking or recording.

Motivation - an alternative angle, a different insight into the music. More convenient for some types of editing. Less for others.

I don't really know so apologies but I'm guessing that it should be relatively easier to implement than the piano roll as it's basically an editable debug dump. Could be a semi-hidden for-now-just-for-debug-and-testing feature if it's too intrusive.

Great program by the way, I use it a lot.

Allow disabling/reducing compressor

The global compressor in BeepBox has irked me for a while now. It'd be cool if it was possible to reduce it's strength or entirely disable it, that'd be great.

(Aside from the obvious issue of being unable to create a difference between loud and quiet parts, I myself have (thanks to its simple interface and appropriate JSON export format) have appropriated BeepBox to generate data for a chiptune playroutine. Getting proper dynamics would be helpful in that use case).

Relatedly, the volume of BeepBox as a whole is always very low. Kindof annoying when I turn up my amp to use it and then get my ears blasted out when I forget to turn it down again.

Adding a new instrument type

I checked EditorConfig.ts and noticed every instrument has some settings and I guess that is how the sounds are created(?). Is there a way I can find easily find the setting for the instrument, Harmonium?

Instrument Type Dropdown Box

Mainly for the instrument type dropdown box, it is annoying to scroll down to select the instruments below the selected one.

BeepBox Not Building

This may be a stupid question, since I haven't used shell scripts before, but whenever I try to build BeepBox, it doesn't work. This is what appears in my console. I'm assuming it's an issue with the distro I picked for WSL (Ubuntu), and if so I was wondering what distro is required in order to build.

Any help would be appreciated 😄

Kick drum problem, I think...

It seems like an attack time of the drum channel is inconsistent, which bothers me the most with a kick drum sound.

Request

This isn't a issue, but a request.

Could you make an Android version?

BeepBox on mobile is very laggy and one note play various notes at a time. If you cant fix this you could make an Android version.

Changing beats per bar always effects the whole song

I'm trying to make a chiptune version of a song that's mostly in 4/4 but that has one 9/8 bar right before every verse, and I can't make a bar have 9 beats instead of 8 without changing the whole song, which is not what I want. I've tried changing the setting while having a bar selected, but that still affects the whole song. Is there a way to change the beat count of a single bar without affecting the others?

Add "export every single channel"

When selecting wav/mp3/mid in exporting menu, show an extra checkbox says "export every single channel" (or "split channels" for short)
So I won't have to export each channel one by one

On-play pattern creation

It would be useful to have a feature to create patterns by playing them on keyboard, like real synthesizer.

Edit box value exceeding

I noticed on the twitter feed on the site that you asked about someone exceeding the limits of channels. Well, I found out how, but I honestly think it's a neat little bug. For example, if you go to channel settings and set a value to way past its max, eg the number of drum channels to 17, and only press enter without leaving the edit box, you can apply it without the max/min getting applied. Same goes for song length and beats per measure. If it could be a toggle or some kind of "extra expert" feature, I bet that would be really cool, as to not distract from the sole purpose of the program and be simple, but also be very flexible.

Dunno if that helps or not.

(also note, this works on a lot of other beepbox branches, like jummbox. 2 other things, on jummbox you can use this to export as midi when it sometimes doesn't work, and oddly modbox is not affected by this. just thought i'd throw these in here too.)

Undo undoes the change AND switches the view

When I undo a change, I'd like to see what the change was (i.e. change an equalizer setting on a pitch channel). However, I can't always see it -- the view can switch back to an entirely different pitch channel/bar/etc that I was looking at, not the one where I made the change.

It would be great to at least have a setting to turn off this behavior, and keep viewing the exact place where I made the change.

Feature

It's not possible to do the following in Beepbox (Idk how to explain it properly):

image

Could you add the possibility of doing this? Thanks.

Question/suggestion: Ability to adjust timbre of chip noise drums

If I understand correctly, it seems when chip noise drums are used, a note doesn't always make the same sound. For example, if I export the same drum track twice, it might have 2 different sounds even if I haven't changed anything. So I'm guessing there's some random() calls there.

Ideally, I'd like to have some more control over the output sound -- not necessarily to make it deterministic, but just the timbre of the output. In my case, I keep getting drums that randomly sound like an 8-bit fart. So I have to keep exporting the same track over and over until the drums sound ok.

Suggestion: Increase SynthConfig.volumeRange a bit more

I see SynthConfig.volumeRange is set at 8. Would it be possible to increase this a bit -- maybe 16 or so? (edit: heck, even 32 if we wanna go crazy)

I have some instruments (a few 1/8 and 1/4 pulse chipwaves, and a retro drum preset) and I'm trying to balance the volume, but sometimes one instrument will seem unfixable with respect to the others -- a one-tick difference in the instrument volume slider will make it too loud, or too quiet, nothing in-between. It can sometimes be difficult to hear harmonies when this happens.

Track following when closing an info box

There is an issue with track following when opening an info box by clicking on any of the options on the right hand side. The current stage selection gets reset whenever an info box is closed while a track is playing.

To reproduce:

  1. Create a track and enable track following (Preferences > Auto Follow Track)
  2. Play the track and wait for it to get past the first stage (<1st box in the grid at the bottom)
  3. Click an option title on the right hand side to open an info box
  4. Close the info box before the time marker reaches the end of the stage
  5. Observe. The track following will be reset to either the first stage or a random one for the duration of the current stage

Once the time marker reaches the next stage, track following works as intended.

Expected outcome:
Track following should not be affected by the invocation of info boxes

Using >64 patterns per channel breaks BeepBox

The newest update (3.0.2) appears to have doubled the "Patterns per channel" limit from 64 to 128. However, when trying to use more than 64 patterns, BeepBox crashes.

Side note: My infamous BruceBox mod from two years ago (which was based on a very-old build of Modded BeepBox) has had a similar bug when I decided to double the limit.

feature: looped recording

Not sure if this is already implemented and I haven't figured out how to do it yet.

It would be nice for the looping to optionally also to work while recording so that new channels can be recorded (or recorded over) on the fly - almost like a continuous performance. This is in contrast to the default way in which you have to stop the recording when it goes over your loop, rewind, and record again.

Here's an example of what I mean (would like to be able to do something like this):
https://www.youtube.com/watch?v=5JYSWHjIU_Q

Feauture

It's not possible to have tuplets (other than triplets and sextuplets) could this possibly be added?

Theme selection

I'm a long-time user and creator of custom-made CSS styles for personal use. I made this theme for beepbox and I'm sure other people might have created themes too, It might be funny to make them available for other users with a "use an experimental theme" option somewhere, opening a selection menu with multiple theme options.

The theme is experimental right now because I had to use "sketchy" CSS code to make what I needed since I only have access to CSS for my styling, and because I made it to suit my needs, so it's made to be use in fullscreen mode. Plus, I'm the only one using/testing it and I used some advanced CSS properties that could not work on some machines/browsers. However, it could be made as a proper clean theme with some work.

Capture d’écran de 2020-05-07 02-03-58
Capture d’écran de 2020-05-07 02-26-55

If you don't like the concept or have other priorities, please ignore this, this is more like an enhancement idea, not something I need at all. BeepBox is my favorite audio tool yet, keep up the good work :) !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.