
Show HN: 8bars – Make Music in the Browser - amadeuspagel
https://8bars.app
======
ioseph
Nice work! One small suggestion to improve the UI would be to use cursor: col-
resize on the edges of the notes to show they are draggable and change the
length as the user drags to give visual feedback.

~~~
amadeuspagel
Thanks :) I've implemented cursor: col-resize, but due to the hacky way the
note grid works, it's kind of hard to implement visual feedback when dragging.

~~~
ioseph
Wow quick turn around!

------
iamcurious
Awesome. It seems to me the browser has eaten almost everything but music
creation. That is too bad, because each year sounds seems more important in
social networks.

------
parsecs
I suggest disabling autoplay when you open the link. I got startled pretty
badly with the very loud and unexpected beeping sounds

~~~
amadeuspagel
I think autoplay is important to draw people in, but I'll implement master
volume control, and set it to 50% by default.

EDIT: Done.

EDIT2: I've disabled autoplay anyway, because on some browsers it doesn't work
properly.

~~~
reitzensteinm
Until you click in Chrome, it's not allowing the playing of any sounds. At
which point, it plays _everything that 's been queued up_. Even at 50% volume,
dozens of sawtooth samples laid out on top of each other playing
simultaneously is not pleasant.

I think you could easily prevent both by just having a button that takes up
1/4 the screen that says something like "Play Demo ". After that, you get your
interaction event and people get their warning.

(That was meant to be a [https://emojipedia.org/musical-
note/](https://emojipedia.org/musical-note/) in the Play Demo button but
apparently HN strips these. Which makes sense!)

~~~
amadeuspagel
Wow that sucks. I've disabled autoplay.

------
atum47
this is really good. this is the second project about javascript music I've
seen on HN. I would love to learn more about music so I could take a shot at
creating procedural music for games.

------
snissn
I see a blank screen on iPhone. It’s fine if you don’t want to support all
browsers but you should show a message if the browser isn’t supported. For all
I know it’s still loading

Edit fixed! Works on iPhone now!

~~~
amadeuspagel
Could you check the console, and tell me if there's some kind of error
message?

And could you try checking the website without private browsing on? The
website requires localStorage, and if that doesn't work, I guess the execution
stops there, and it doesn't show anything. See:
[https://stackoverflow.com/questions/12630396/localstorage-
no...](https://stackoverflow.com/questions/12630396/localstorage-not-working-
on-ipad-and-iphone)

~~~
guessmyname
> _Could you check the console, and tell me if there 's some kind of error
> message?_

The error message → _“ReferenceError: Can 't find variable: AudioContext”_

You can’t do this in some browsers → “c = new AudioContext” [1]

You need to wrap this API in a condition like so [2]

[1]
[https://caniuse.com/#search=AudioContext](https://caniuse.com/#search=AudioContext)

[2]
[https://stackoverflow.com/a/29373891](https://stackoverflow.com/a/29373891)

~~~
amadeuspagel
Thanks, I implemented your suggestion. Hope it works now.

------
terrycody
Thanks, a really neat tool to create some interesting music piece.

------
_curious_
Thanks for making and sharing, fun!

