Creating Moody - A minimalistic Brown noise player for focusing

TL;DR
Simply try the application here from my project source code.

Background of creating an app.

Everything started with the intention of building a personalized Brown Noise app last year in October, nothing special.

It's just an ordinary day scrolling through the news when I find out about Brown Noise on BBC News. We all know about White Noises, but this one is rather new and eye-catching for me, especially when I was rather burnt out of my work at that time.

I couldn't find the exact article I read now, but the idea is that the low frequency Brown noise provides better calming and concentrating effects than white noise. Moreover, studies showed that the Brown noise is able to calm ADHD as well.

I decided to give it a try, but disappointedly, most Brown Noise apps in the AppStore don't really suit my taste. Some were too complicated with too many different audios and it could be hard to find the brown noises hidden deep, some were simply too buggy. In this case, I mean it wasn't even possible to play in the background.

I was thinking about learning iOS development at first and making myself a customised app, engineered for a minimalistic app that I wanted.

My idea is rather simple - open the app and play the brown noise, that's it. Well, I admit that I wished for a few more practical features, like playing in the background and setting a timer to stop when I'm going to sleep.

Getting started with ChatGPT.

Since I'm not really a developer myself, all these thoughts are just thoughts before ChatGPT came out in November. I didn't really try as soon as it came out, but since ChatGPT became more and more popular, my thoughts about creating the app came back.

Why not ask ChatGPT to code me one? If I could list all the requirements that I needed, it shouldn't be that hard to make a simple app. And well, nothing could go worse than just playing with ChatGPT and doing nothing really.

The first implementation was really simple, it's just a play and stop button and nothing else.

So I tried to add my Brown noise audio to the directory to see if the codes really work, and it did! I had a little time messing through the directory path and file format, but I guess it wasn't a problem caused by ChatGPT.

After the most basic part seemed workable, I made it endlessly repeating so that the Brown noise would continue again and again until I pressed the "Play/Stop" button.

The changes are pretty simple, just add a "loop" behind the name of the audio file and that's it. ChatGPT even provided me with an explanation of the code, so I might learn through the way I'm making the app.

Refining the user interface.

Now the application is really too simple at this time. Let's add some design to it to make it sleeker.

I started with a prompt to ask ChatGPT if I could turn the background black and make it remain at the center no matter how I resize the screen. In the GPT-4 model, you can simply ask this in a natural-speaking voice and ChatGPT will serve you well. I believe the legacy GPT-3.5 model can do similar things as well, and sometimes, even faster.

Then, I asked ChatGPT to help me change the not so beautiful play and stop button into an image. The image is not generated by ChatGPT though, but it is easy to get one from Flaticon.

The request that I asked ChatGPT is a little bit more complex than before. Instead of just changing the button into an image, the button actually shifts between play and pause when the audio is playing. The end result basically looks like this:

A play button appears when the Brown noise pauses:

A pause button appears when the Brown noise plays:

Sometimes, we know that ChatGPT might generate buggy codes. But it's OK to ask him to fix the bug and regenerate the code again.

For example, the play image didn't show up initially when ChatGPT wrote the code and I asked him why. He finds out that there was a bug and fixed it right away.

Brainstorming for improving features.

Sometimes, even if I had some features in mind, it could be quite vague and I might not be able to express it in the right way. When I asked ChatGPT if it could help me add more features to the application, it did suggest a list of useful features.

1. Volume control: Add a volume slider or buttons to allow the user to adjust the volume of the Brown noise. You can use the volume property of the audio element to set the volume level.
2. Looping: Add a loop button to allow the user to loop the Brown noise indefinitely. You can use the loop property of the audio element to loop the audio playback.
3. Speed control: Add a speed slider or buttons to allow the user to adjust the playback speed of the Brown noise. You can use the playbackRate property of the audio element to set the playback rate.
4. Presets: Add preset buttons or a dropdown menu to allow the user to select from different Brown noise presets, such as "Deep Sleep," "Focus," or "Relaxation." You can use different Brown noise audio files for each preset, and update the src property of the audio element accordingly.
5. Timer: Add a timer or countdown feature to automatically stop the Brown noise after a specified duration, such as 30 minutes or 1 hour. You can use the setTimeout function to schedule a callback function to stop the audio playback after a specified amount of time.
6. Background color: Add a feature to allow the user to change the background color of the web app, to customize the look and feel of the app. You can use the document.body.style.backgroundColor property to set the background color.

Debugging the buggy codes.

Since I've already had the looping and the background color features, I started off improvising the Brown noise player with a timer.

I asked ChatGPT to help me make the timer feature, and the code it gave doesn't work smoothly. In some of these cases, my prompts could be too vague for ChatGPT and it might misunderstand what the requirements are, or sometimes it just produces some buggy code that needs to be debugged.

In my opinion, ChatGPT tends to run into error more when the code becomes more and more complex. Moreover, it will stop halfway in the middle while writing some really long codes.

I have several approaches to these issues:

Refreshing ChatGPT with the latest code.

Although ChatGPT has a conversation history, sometimes it tends to lose its focus just like us humans do. When you're working on a long project on ChatGPT with a long conversation history, try to refresh ChatGPT's memory by providing the latest code you're working on, especially if you've done some of your own modifications.

Generate modified code snippet.

ChatGPT can easily be stuck halfway due to its server burden or other limitations. For best result, you can just ask ChatGPT to generate the modified code snippet only, so that the answer will be much shorter. And oftentimes, more descriptions will be given to these shorter answers, so you can easily learn from these descriptions and make further modifications to the features.

And if you want to make ChatGPT generate the full code you're working on, and double check if both of you are on the same code, you can still ask ChatGPT to do it for you.

Simply prompt ChatGPT with "Generate the current [JavaScript] code." and leave ChatGPT handle the rest.

In this case, ChatGPT might stop halfway when it is generating a long code, but there are still ways to let him get the rest of the job done. You can do it as simply as: Regenerate the JS file starting from this line "const stopAudio = () => {".

After a few tries on ChatGPT, I finally produced a workable minimalistic Brown noise player that suits what I want. It is rather simple, but you can feel free to modify them anytime. The URL for the source code is here.

Final thoughts.

I know some of you may be tired of seeing just another project done with ChatGPT, or maybe even struggling with the recent rumors of ChatGPT replacing jobs.

As someone with minimal programming experience, the ChatGPT is kinda awesome at helping me to get my ideas realized. And to some extent, it feels even better to use ChatGPT than some of the no-code platforms because there are much more spaces for personalization.

Although ChatGPT really did make a huge impact on different sectors, I still hold the optimistic view that these tools would always make our work and life much easier.

Have fun trying with Moody (I named it because the pause button and the slider bar looks moody), and good luck having a calm day ahead!