Octave Compass | Hacker News Reader

Octave Compass

octavecompass.com

134 pointsleephillips41 comments

There's a comment from the author here: https://news.ycombinator.com/item?id=25344091.

I actually invited him to repost his Show HN but it looks like a different mod added the current submission to the second-chance pool (https://news.ycombinator.com/item?id=11662380), which is also fine.

Thanks dang!

I've been trying to build something like this last month or so. I was studying the source code of beepbox: https://github.com/johnnesky/beepbox

Does anyone know if there is an easier, higher level abstraction library for audio backend? The approach in beepbox is rather low level and you can make really interesting sounds, with the trade-off being your backend being really complex (literal sound waves).

I searched for MIDI output on web with sound font support but couldn't find anything helpful.

Maybe tone.js will be helpful. https://tonejs.github.io/

You’ll need to leave the browser to do useful audio and MIDI work.

That's the entire point though, I was trying to do this in browser. I already know how to do it on linux.

The browser can't do everything. Not yet at least. It's an inappropriate platform for real time software, like audio.

You can do all sorts of realtime audio in the browser! Especially now that audio worklets are a thing.

What are you trying to say? It's definitely possible, I even gave a link: https://www.beepbox.co

The problem is can we do this using a higher level library instead of sending sound waves to sound driver.

I mean you can do trivial little toys in the browser sure, but low-latency, real-time audio rendering can't be done in a garbage collected environment (unless the GC is running concurrently and guaranteed not to stall the audio rendering thread). Which the browser does not provide you.

You can get away with it because the complexity is low. When you begin dealing with higher complexities (like even a modest amount of polyphony in a decent synthesizer) you will push up against the limits of what the browser is capable of. That's what I'm trying to say. There are products like bandlab that do incredibly things in the browser, but their competitors do far more with less just by leaving it.

As for higher level APIs... sure you can do it. There are things like WebAudio, Supercollider, Max/MSP, Pure Data, the new SOUL language posted recently, etc. But ultimately what every app needs is an API where they pick which samples to fill a buffer with (what you're calling "sound waves to the sound driver" I think). Mostly because the high level APIs sound bad and you will eventually need non-naive DSP.

Look - everyone knows low level APIs and languages kinda suck to program against. But it's not for lack of trying that serious audio software isn't running in the browser or in managed languages.

> Which the browser does not provide you.

WebAudio does indeed provide it. The audio data doesn't live in the JS VM, and isn't GC'ed like regular JS.

You might try `wasgen` (which I maintain). Basically you pass it an object that describes your audio graph, and a frequency/duration/volume, and it creates/disposes all the audio nodes.

https://github.com/andyhall/wasgen

Making the sound program objects isn't trivial if you're unfamiliar with low-level audio, but the live demo has examples for all MIDI instruments: https://andyhall.github.io/wasgen/

That's honestly exactly what I was looking for. Either my google-fu is rusty or Google/github is not great for finding repos without thousands of stars.

Even when I google it verbatim it's often not the first hit ;) Feel free to open an issue if anything isn't clear.

This was fun to play around with, but I wish that there was also a mode to arrange the notes in the circle of fifths, since that places similar key centers next to each other. In the chromatic layout when you perform a chord progression (e.g. try C E- F G7 C) the movement is very slight on the circle of fifths but jumps around here.

I like this one:

https://guitardashboard.com/

Thanks for the feedback! I really like the circle of fifths too, especially since my primary instrument is accordion, which has the left-hand side arranged in the circle of fifths. Part of the concept for this app was to illustrate the way that polygons can be used to (1) place a pattern of intervals within the set of all chromatic notes and rotate it to shift modes, and (2) fit chords into scales at different positions. The Scale Editor demonstrates these concepts, and it's a bit hard for me to imagine how that polygon-rotating would work with the circle of fifths. Perhaps you just wouldn't be able to rotate anything? I'm open to ideas here!

Nice. Sadly, audio is clipping a lot on Linux, both on Firefox and Chrome.

It is on windows too.

And Mac. Either the notes(frequencies) are not being filtered, causing all sorts of harmonic noise, especially when added together (most likely), or (probably and) the individual tones are not being normalized before being added together, and its clipping. edit: it's also possible the tones are looped over a short period and there are discontinuities between the loops (filtering will also fix if this is the case)

Awesome concept though, I really love to see stuff like this, and it's great to experiment with and find new (to me) "synergies" between notes/chords.

Or, more likely, the gain is just too high.

Yes, but that doesn't explain how to fix it. The signal is clipping (slight distinction from too much gain, because too much gain causes clipping) if you notice, one note is mostly clear, but the more notes played, the worse it sounds. He’s adding all the tones together, and not re-normalizing them before his addition. Which i suppose could be thought of as “not adjusting individual gain down” before adding signals together. Also filtering really would work wonders if he's just generating pure tones (sine waves).

Thanks for your detailed thoughts and feedback! I think you're correct about the need to normalize the gains. I've opened this ticket to track progress on doing that (or whatever else needs to be done to fix the clipping): https://github.com/seancolsen/octave-compass/issues/80 Pull requests welcome! There are some notes in there pointing others to the relevant part of the code if anyone else wants to take a stab at fixing!

Same on Mac, with Firefox.

Thanks for pointing this out! I've noticed that too, but haven't gotten around to fixing it. It's helpful to hear that it's problematic for other people. I've opened this ticket to track progress on the issue: https://github.com/seancolsen/octave-compass/issues/80 Pull requests welcome! There are some notes in there pointing others to the relevant part of the code if anyone else wants to take a stab at fixing!

Very beautiful and very helpful for choosing chord progressions for songs. Have been looking for something like this for a long time. Sure, there is a little chop on the playback (overload?) but it's usable as-is for creating very lovely chord progressions. My hat is off to the creator! May you always be surrounded by glorious and loving sounds.

This is pretty nice! Something interesting to note is that it seems to use Shepard tones[1] or something similar so that the scale can be played continuously while still staying in range.

[1]: https://en.wikipedia.org/wiki/Shepard_tone

Yes! When I was playing around with it, i wondered how it knew to just go down instead of up an octave when I wanted it to. It was an illusion all along!

strongly related: https://ianring.com/musictheory/scales/

Great resource! Almost mathy

I think this is great (which is why I submitted it). It’s make with Svelte; I found out about it by glancing over a Svelte newsletter.

On my box, chromium on Ubuntu, it works when I click, but they keyboard does not produce sound.

Thanks for the feedback, and the submission :)

When you say "keyboard does not produce sound", are you saying that you'd expect to hear sound when pressing a physical key on your computer keyboard, like "C" or "1"? Or are you saying that you're clicking an element in the page and not hearing sound? I really like the idea of responding to physical key presses. If you're into Svelte, perhaps you'd want to take a stab at adding that feature... wink wink. I actually already have a ticket for it here: https://github.com/seancolsen/octave-compass/issues/74 My thought was to use the number keys to play the scale degrees, but I'm open to other ideas.

I wish I could play the chords via key presses. Made some pretty cool sequences with my laptop's touch pad. This would make a neat minimalist synth app/gadget. Just needs a loop making/recording feature.

You never see the modes of the harmonic minor in these things - always the major modes ( aside from the relative natural minor of course ), as a metal head it'd be useful to see one. Still very cool.

I retract that - if you use the search bar you can get modes of any scale you want, this is fantastic!

This looks great, but being musically-limited, I have no idea what most terminology is. Seems very extensible. Would be neat to see a midi being played. Gets a bit crowded on a small screen.

Very nice! I created this a while ago: https://fretty.app

How do I play using the keyboard? Why not link notes the letters and chords to digits or something like that?

Very cool!

I came here to make the same comment. Wow. Super fun!

Doesn’t make any sound?

Reply on news.ycombinator.com