Rockr — A loopstation for the web browser: Devlog episode 4

TL;DR: Go to Rockr and mess around.

But keep in mind: Work in Progress!

You can find the previous entry of my devlog here

Updates

• Audio vizualization added
• Added folder and subfolder navigation
• +2 Audiopacks, totaling in now 57 Tracks
• Optimized user experience on mobile

Audioviz

The audioviz connects Pizzicato's AudioContext and uses requestAnimationFrame() to make drawcals at about 60 frames per second. The performance is surprisingly smooth, as web-audio works sparingly with resources. The original goal was a 3D animation, but I want Rockr to run smoothly on all devices, even those without a WebGPU.

Folders and Subfolders

Folder views are now accessible in the songlist. Although plenty of file explorer solutions exist in the npm index, I considered many of them quite invassive regarding the design. So I lent a hand myself.

The overall design looks a bit "Mirror's Edgy" now. Might become even more Mirror's edgy later on:

More Tracks

2 more Audiopacks are online: Villians Laughing und Transformer-Soundeffects.

Villians Laughing:

• Agent_smith
• barbossa_and_skeletons
• Barney_Stinson
• chucky
• DarkEmperor
• general_grievous
• Helmut
• Joker
• megatron
• Mojo_Jojo
• Patrick_Star
• Peter_Griffin
• plancton
• Prince
• principleSkinner
• robot
• Spongebob_Dennis
• timmys_dad
• tom_vs_jerry
• Vicky

Transformer Soundeffects:

• Transformers\Barricade
• Transformers\Blackout
• Transformers\Bonecrusher
• Transformers\Bumblebee
• Transformers\Frenzy
• Transformers\Ironhide
• Transformers\Jazz
• Transformers\Megatron
• Transformers\OptimusPrime
• Transformers\Ratchet
• Transformers\Starscream

Mobile Optimizations

The mobile experience was optimized. The idea with the vertically mirrored texts made sense for my very specific use case, but not for all other use cases. The window.trigger events will be adapted as soon as I have completed the optimisations for jQuery Mobile.

To Dos

According to my To Dos, I have achieved all my goals and implemented more features than originally planned. New planned features include:

• [ ] 100+ audio packs
• [ ] Cooler audio visualisation
• [ ] Provide parameters for sound effects
• [ ] Revision of the user interface
• [ ] RDF & Sparql implementation
• [X] Reiterate on the tracklist
• [X] Audio-Visualization
• [X] Help Menu
• [X] Fonts: Source Code Pro and Orbitron
• [X] Responsive
• [X] Hotkeys
• [X] Metadata

Markus