8 ms·
Show HN: Make your web page dance with Rythm.js
- blairanderson 9y agoI don't know what it is but I like it!!!
- kixpanganiban 9y agoFun idea, but as soon as I hit `Start Demo` my CPU usage spiked up. Good way to exhaust a laptop/mobile device's battery ;)
- vuldin 9y agoFor some reason I love this.
- always_good 9y agoIs it really a mystery why you or anyone else might love this?
- prawn 9y agoThis will be everywhere on April Fools 2018.
- tribby 9y agoIt's missing variable fonts with animated font-variation-settings ...I'll see myself to the door :)
- Okazari 9y agoWhy 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 9y agobookmarked 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)
- throwaway2016a 9y agoNeeds an option to enable only when the Konami Code is entered.
- Okazari 9y agoThere 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
- magic_beans 9y agoNone of it works on mobile.
- Morizero 9y agoWorks fine for me on Firefox nightly.
- luke3butler 9y agoWorks great on Android N for both webview and chrome.
- Twirrim 9y agoWorking 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)
- JuggaloJohnnie 9y agoWe have MARQUE tags back!jk .. but feels like a techno-boogie version of it for the web 2.0 generation! Freegen rocks.
- fowl2 9y agowas 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 9y agoHas 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 9y agoLook 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=1 http://www.pouet.net/prodlist.php?platform[]=JavaScript&page...
- gorg75 9y agoFirst 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 9y agoIt 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/AnalyserNode/getByteFrequencyData https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNod... [1] https://github.com/Okazari/Rythm.js/blob/4693385a2d854f0c5f1a98bbd22dc364464a691a/src/Analyser.js#L20-L32 https://github.com/Okazari/Rythm.js/blob/4693385a2d854f0c5f1... [2] https://github.com/Okazari/Rythm.js/blob/c054c475e6e758878db30381674f1b0623470342/src/rythm.js#L45-L54 https://github.com/Okazari/Rythm.js/blob/c054c475e6e758878db... -- edit: formatting
- Okazari 9y agoThe 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.
- instakill 9y agoAwesome stuff. You know you've made something great when most of the HN comments about your project are positive :)
- zaf 9y agoNot working on Desktop Safari 10.1.2
- CM30 9y agoThis 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.
- Etheryte 9y agoYou 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.".
- harel 9y agoTurned on microphone, started finger drumming on laptop. This was more fun than I expected it to be.
- anotheryou 9y agosomehow not working here edit: didn't see the "start demo" button...
- tw1010 9y agoYeah, I kind of think it should be turned on by default.
- jim_d 9y agoThis made me smile. Good work. ps: a nice big demo button beside 'View on Github' and 'Release Notes' would be a nice tweak :)
- jarrettch 9y agoI 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!
- rnprince 9y agoAgreed about the confusion and that this is cool.
- BraveKenny 9y agoYeah, also it doesn't help that the boxes look like checkboxes!
- revicon 9y agoIs this supposed to work on mobile?
- tyingq 9y agoWorks on my Android. You do have to press the "start demo" button at the bottom.
- amigoingtodie 9y agoNot on iOS Safari for me.
- Xoros 9y agoThere's a start demo button at the bottom. Worked on my iPhone on Safari
- CodeWriter23 9y agoI 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 9y agoThose 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.
- Andrenid 9y agoWorking on Firefox Nightly on Android for me.
- crispinb 9y agoIt'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 9y agoi dunno, in the right context, with discipline and restraint, some of those would be fun for UX hints
- crispinb 9y agoFor sure. I was being a tad facetious. We are potentially in blink element territory.
- oliyoung 9y agono, i'd be right behind you with the pitchforks for that ;)
- efreak 9y agoThen 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-api-for-fun-and-chaos/ https://grack.com/blog/2011/03/07/abusing-the-html5-history-... [1] https://github.com/theonion/fartscroll.js/ https://github.com/theonion/fartscroll.js/
- crispinb 9y agoA couple of Medium articles written cannily and then forwarded to appropriate business influencers, and this could be made a fashionable thing ...
- 9y ago
- magamind 9y agoSpelling issue there with 'rhythm'.
- crispinb 9y agoI (charitably) assumed it was deliberate because of a name clash with something.
- Okazari 9y agoYou're right :), Rhythm.js were taken and Rythm is close to the initial french spelling.
- nthcolumn 9y agoSorry 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.
- Twirrim 9y agoRhythm 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...
- deleted 9y ago[deleted]
- cyberferret 9y agoLOL. 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...
- Cthulhu_ 9y agoIt'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.