You are browsing as a guest. Sign up (or log in) to start making projects!

Who will pause the music ?

  • 4 Devlogs
  • 15 Total hours

I build "Who Will Pause the Music?" (sorry , i suck at naming) , It is a browser based game/web-app made for games like musical chair or any other Music based game which requires sudden pauses.

Ship #1

# 🎵 Shipping: Who Will Pause the Music? 🚀

Hey everyone! 👋

I made **Who Will Pause the Music?**, a retro-inspired web app where you can upload your own audio or choose from some preloaded songs, then set a **minimum** and **maximum** interval between which the music will stop randomly.

The idea is simple—it helps remove bias while playing games like **Musical Chairs** or any other game that involves music and requires random pauses. Instead of someone controlling the music, the web app does it for you.(or you could play musical chair with two person)🤧

Some of the features include:

* 🎵 Upload your own music
* 📀 Choose from preloaded songs
* ⏱️ Customizable minimum and maximum pause intervals
* 🤖 AUTO Mode that automatically starts the next round 8 seconds after the music stops
* 🌈 A real-time audio visualizer powered by the Web Audio API

The biggest challenge I faced while building this project was creating the audio visualizer. It was my first time working with the **Web Audio API** and the **Canvas API**, so understanding how to connect the audio data to an animated visualizer took some time.

Another challenge was preventing the AUTO feature from overlapping with other JavaScript functions and timers. Managing multiple `setTimeout()` calls without breaking the game logic turned out to be much harder than I expected, but it taught me a lot about asynchronous JavaScript.

Overall, this project helped me learn a lot about JavaScript, browser APIs, debugging, and building a complete web application from scratch.

Thanks for following along with the journey, and I hope you enjoy playing **Who Will Pause the Music!** 🎉

  • 4 devlogs
  • 15h
Try project → See source code →
Open comments for this post

7h 27m 55s logged

Devlog #3

Hello again everyone !
I finally finished working and the project is almost ready.
The project now has a working Auto feature finally and a audio visualizer on the background which actually respond to the music beats , (to the frequency of the music tbh). And I would not hide the fact that I used Claude to make these two features work , the auto feature and the visualizer.

Let me summarize the project feature :

  • You can upload your own muisc for random pauses
  • You can also choose some preloaded musics
  • finally the auto mode is working which auto start the palying after the random pauses (after 8 seconds of the random play)
  • the visualizer responding to the beat 😎.

Thank You !

2

Loading discussion…

0
83
Open comments for this post

3h 51m 15s logged

Devlog #2

Hello again!
After all those designing the HTML and CSS I finally started working on JavaScript.

Here are the features that actually work now :
You can click to upload or either Drag and drop to upload your audio file.
You know what ! You can also see the name of audio file on the card.

Listening audio being played for the first time made me feel like heaven fr.

Currently I am working on fixing the AUTO mode features(or bugs you could say -_-)
I am planing to fix the auto feature by the next time.

0

Loading discussion…

0
30
Open comments for this post

3h 18m 44s logged

Devlog #1

Hello everyone!
I am working on a project which I named “Who will pause the Music ?” .

Let me tell you about the project I will be working on . I got the idea of this project from the game “Musical Chair”. In this project I will be making a web-app or web-game where a user can upload any audio file and let you choose a duration between which the user wants the music to be paused randomly.

You may use this web-app not only for Musical Chair but any other game which might require random pauses.

Untill now I have written only the HTML and CSS . I still have JavaScript to work on .

For styling I have used the font= PressStart2P from google fonts .
And for the first time I used pseudo element to color.
I have made the container i name it wrapper though.
Also made something like a card like feature .
Thank you !

0

Loading discussion…

0
21

Followers

Loading…