Show HN: Make your web page dance with Rythm.js | Hacker News Reader

Show HN: Make your web page dance with Rythm.js

okazari.github.io

183 pointsOkazari72 comments

This made me smile. Good work.

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

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!

Agreed about the confusion and that this is cool.

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

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.

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

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

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

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-...

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

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

you're a bad person

;)

Plenty of muscicians and DJs have blogs and also it wouldn't be out of place on a site like Soundcloud, if used sparingly.

Think of big fun parties with large displays. If what you project there dances with the tunes played in there, It will be interesting

The first actual use case that came to mind is using it as an April fools joke.

The links sliding from under the cursor. Right when you were about to click.

This could be used in specific cases. Eg: To show association or relation between elements when one of it is clicked. We can "pulse" or colorize the related element.

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.".

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>

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.

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...

Wow awesome link ! I will try this out for sure :p !

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.

This will be everywhere on April Fools 2018.

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.

Spelling issue there with 'rhythm'.

I (charitably) assumed it was deliberate because of a name clash with something.

You're right :), Rhythm.js were taken and Rythm is close to the initial french spelling.

Sorry my bad didn't google it properly first, not a spelling nazi - it just makes my brain hurt to look at it.

js library names has become like domains now - everything already taken, boing.js, bounce.js, pulse.js, throb.js, even wubwub.js - hey how about palp.js? meh...no rythm.js is better :) there were too many haches in that word anyway.

Rhythm

Has

Your

Two

Hips

Moving

I'm sure my English teacher would be so proud to know that I still remember that one, nearly 25 years later...

LOL. As a musician, I find something particularly irksome about 'rhythm' being spelled incorrectly. Perhaps because I have seen so many variations of the spelling over the years...

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.

"Never eat cress, eat salmon sandwiches and remain young" has stuck with me for life for "necessary", if that helps (almost certainly not!).

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

What word here has no vowel ?

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

https://en.wikipedia.org/wiki/Vowel

https://simple.wikipedia.org/wiki/Vowel

Indeed, I did not know that, thanks.

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

None of it works on mobile.

Works fine for me on Firefox nightly.

Works great on Android N for both webview and chrome.

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)

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

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

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

Did it work as you expected ?

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".

Not working on Desktop Safari 10.1.2

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 :)

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...

[1] https://github.com/Okazari/Rythm.js/blob/4693385a2d854f0c5f1...

[2] https://github.com/Okazari/Rythm.js/blob/c054c475e6e758878db...

-- edit: formatting

The other answer show exactly the good code lines.

To describe it fast : I keep an history of frequency (size customable) and compare the subscribed frequency range to its relative history max / min value. I get a percentage out of it that i give to the dance function associated to this specific class.

Is this supposed to work on mobile?

Works on my Android. You do have to press the "start demo" button at the bottom.

Not on iOS Safari for me.

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

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.

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.

Working on Firefox Nightly on Android for me.

somehow not working here

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

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

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 ;)

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.

Could you fill up an issue on github with all your specifications ? I think this is worth investigating.

For some reason I love this.

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

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.

take my updoot

That is possibly the most grating of all redditisms.

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

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

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

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

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)

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)

Reply on news.ycombinator.com