HaloWorld

World rhythms for a global hit

See live in https://haloworld.netlify.com/

Project Rules

No use of JS libraries or frameworks: pure Vanilla.

What I learned with this project:

• Data attributes & keyCodes;
• How to deal with audio files in JS (audio.play(), audio.pause(), volume control);
• Input type range;
• Take over code started by someone else (it's more interesting thank I thought);
• Fonts from Google Fonts can look quite different in Chrome and Firefox;
• Use classList;
• Clap when samai is playing is not as straightforward as you might think!

Main Challenge:

• When I first added pause, I was shown how to start/stop audio to a single audio track using let playing = false at the beggining of my script. After I decided to transform my project into something else than the original proposition, I needed to add pause to each track and leaving this let as is was not helpful. It took me a while to find an elegant solution, tbh. Eventually I've gone with an array of booleans that updates the assigned value to false/true when the relevant key is pressed.

What I added to the original idea from JavaScript30:

• Adition and control of a main track to the drum sounds;
• Play/Pause and volume control to each key;
• Background change on keypress;

What I would do if I had more time:

• Refactor my code;
• Make it mobile friendly (also accept touch instead of key presses only);
• Replace "african waltz" with kuduro or kizomba (as african waltz doesn't seem to be thing);
• Replace "hard rock" for an asian rhythm;
• Add a box with brief info about the rhythm selected by user;

Thanks to Chris Meah for presenting us to JavaScript 30 and for guidance when I got stuck :)