
Show HN: Make your web page dance with Rythm.js - Okazari
https://okazari.github.io/Rythm.js/
======
jim_d
This made me smile. Good work.

ps: a nice big demo button beside 'View on Github' and 'Release Notes' would
be a nice tweak :)

~~~
jarrettch
I got confused because I was clicking the boxes and nothing was happening.
They should definitely put a demo button towards the top. But yes this was
cool!

~~~
BraveKenny
Yeah, also it doesn't help that the boxes look like checkboxes!

------
crispinb
It's fun for a demo. But if I ever find it used on a web page I visit, I shall
track the owner down and place them in isolation for life.

~~~
oliyoung
i dunno, in the right context, with discipline and restraint, some of those
would be fun for UX hints

~~~
crispinb
For sure. I was being a tad facetious. We are potentially in blink element
territory.

~~~
oliyoung
no, i'd be right behind you with the pitchforks for that ;)

~~~
efreak
Then you'll absolutely love the URLbar marquee[0]. Combine this with a page
title marquee and you can grab attention even if the browser is minimized.
(Can now only get results for maps to bars named Marquee...). Now just add
fartscroll.js[1] and you're set with the most annoying website.

[0] [https://grack.com/blog/2011/03/07/abusing-the-
html5-history-...](https://grack.com/blog/2011/03/07/abusing-the-
html5-history-api-for-fun-and-chaos/)

[1]
[https://github.com/theonion/fartscroll.js/](https://github.com/theonion/fartscroll.js/)

~~~
crispinb
A couple of Medium articles written cannily and then forwarded to appropriate
business influencers, and this could be made a fashionable thing ...

~~~
oliyoung
you're a bad person

;)

------
Etheryte
You should probably make the _" start demo"_ button more prominent, both my
own first reaction as well as that of my colleagues was _" I don't understand
what I'm supposed to look at here."_.

------
fowl2
was disappointed to see the music was just a mp3, not synthesised ;P

edit: the track appears to be "Kinetic (The Crystal Method vs Dada Life)"
<[https://www.youtube.com/watch?v=uHJyAZtRrOY>](https://www.youtube.com/watch?v=uHJyAZtRrOY>)

~~~
a1371
Has anybody done synthesised art on web yet?

The coolest thing I've seen so far was that guy who was exporting MIDIs from
JS and was playing them live in MIDI software. Edit: also the opening of
JSConf 2014 if I'm not making a mistake.

~~~
maeln
Look at Javascript demos on pouet.net[1] a lot of people synthesised art on
the web :) . And with WebGL you can do some really fun stuff nowaday.

[1]
[http://www.pouet.net/prodlist.php?platform[]=JavaScript&page...](http://www.pouet.net/prodlist.php?platform\[\]=JavaScript&page=1)

~~~
hanniabu
It'd be cool to have music synthesized from your html markup. And have a site
where you could enter a url and hear what type of tunes might be generated
from it's markup.

------
prawn
This will be everywhere on April Fools 2018.

------
CM30
This would have been amazing in the days of Myspace or Geocities. It fits the
aesthetic of that era very well.

Still, it's an interesting library, and has its uses on certain niche sites
(or for easter eggs). Just don't use it by default on a business page or
anything you want people to take seriously.

------
magamind
Spelling issue there with 'rhythm'.

~~~
Cthulhu_
It's one of the harder words to spell I'd say, just like (for me) necessary
and irrelevant and err. A few others like that.

~~~
train_robber
Trivia: It's also the longest English word without a vowel.

~~~
jrimbault
What word here has no vowel ?

~~~
bshimmin
"rhythm" (or "rhythms" to get a bonus extra letter). "y" is a _vowel sound_
but is not considered to be a vowel in English.

~~~
jrimbault
[https://en.wikipedia.org/wiki/Vowel](https://en.wikipedia.org/wiki/Vowel)

[https://simple.wikipedia.org/wiki/Vowel](https://simple.wikipedia.org/wiki/Vowel)

Indeed, I did not know that, thanks.

------
JuggaloJohnnie
We have MARQUE tags back!jk .. but feels like a techno-boogie version of it
for the web 2.0 generation! Freegen rocks.

------
magic_beans
None of it works on mobile.

~~~
Twirrim
Working fine for me on Firefox and Chrome on android. Note there's a small
"start demo" button down on the bottom right that you need to press (took me a
while to spot that one)

------
instakill
Awesome stuff. You know you've made something great when most of the HN
comments about your project are positive :)

------
blairanderson
I don't know what it is but I like it!!!

------
harel
Turned on microphone, started finger drumming on laptop. This was more fun
than I expected it to be.

~~~
Okazari
Did it work as you expected ?

~~~
harel
Better than expected! I've never finger drummed anywhere and got immediate
VISUAL feedback. Usually I get an aural feedback in the form of "STOP THAT
TAPPING".

------
zaf
Not working on Desktop Safari 10.1.2

------
gorg75
First I thought the script just made things bounce at intervals, but then I
noticed the different boxes for base, mid and high range sounds actually
follow the changes in the music. How do they do this? - I guess I should read
the source code :)

~~~
mhasbini
It uses AnalyserNode[0] to get frequency data and moves the elements based on
the frequency ratio[1][2].

[0] [https://developer.mozilla.org/en-
US/docs/Web/API/AnalyserNod...](https://developer.mozilla.org/en-
US/docs/Web/API/AnalyserNode/getByteFrequencyData)

[1]
[https://github.com/Okazari/Rythm.js/blob/4693385a2d854f0c5f1...](https://github.com/Okazari/Rythm.js/blob/4693385a2d854f0c5f1a98bbd22dc364464a691a/src/Analyser.js#L20-L32)

[2]
[https://github.com/Okazari/Rythm.js/blob/c054c475e6e758878db...](https://github.com/Okazari/Rythm.js/blob/c054c475e6e758878db30381674f1b0623470342/src/rythm.js#L45-L54)

\-- edit: formatting

------
revicon
Is this supposed to work on mobile?

~~~
amigoingtodie
Not on iOS Safari for me.

~~~
Xoros
There's a start demo button at the bottom. Worked on my iPhone on Safari

~~~
CodeWriter23
I could only get the basic beat after tapping Start Demo on my iPad. I
couldn't mix in with the selection buttons :( I could see some toggled on,
couldn't toggle them off and vice-versa, whether the demo was started or
stopped.

~~~
throwaway2016a
Those aren't toggles. They are just the elements that get animated during the
demo. Each one is a demo of the CSS to the right of them. The ones that are
colors are just that way because the demo won't work well with empty shapes.

I made the same mistake.

------
anotheryou
somehow not working here

edit: didn't see the "start demo" button...

~~~
tw1010
Yeah, I kind of think it should be turned on by default.

------
kixpanganiban
Fun idea, but as soon as I hit `Start Demo` my CPU usage spiked up. Good way
to exhaust a laptop/mobile device's battery ;)

~~~
saganus
That's strange. My (somewhat) old Core i7 laptop goes not higher than 4%.

I'm guessing different browsers make a difference? I'm using Chrome
60.0.3112.113 on Win7.

------
vuldin
For some reason I love this.

~~~
always_good
Is it really a mystery why you or anyone else might love this?

~~~
kagamine
Coming soon to HN, other reddit tropes such as "i'm so confused right now"
when nothing is in the least bit confusing, and also memes, thousands of
memes.

~~~
emerongi
take my updoot

~~~
3131s
That is possibly the most grating of all redditisms.

------
throwaway2016a
Needs an option to enable only when the Konami Code is entered.

~~~
Okazari
There is library to make easter eggs using konami code. My company did use it
along with rythm.js if you want to check it out.
[https://www.zenika.com](https://www.zenika.com)

------
tribby
It's missing variable fonts with animated font-variation-settings

...I'll see myself to the door :)

~~~
Okazari
Why don't you try to contribute by adding this kind of dance ? Could be
challenging but really fun ! (Check out the "Contributing" part README, adding
a dance should be easy)

~~~
tribby
bookmarked the README to look at later. challenging part would be a polyfill
using snap.svg or something like that for browsers that dont support otvar
well (basically all of them except chrome canary and the webkit nightly)

