Day 9 | 50 Projects in 50 Days

#webdev #html #css #javascript

Sound Board

This project was to create a simple sound board that plays different sounds when you click the buttons.

This was my first time using the audio tag in HTML. None of the courses or tutorials I’ve watched had any project involving audio, which is understandable since they usually stick to the basics — the things you use most often.

So the first thing I did was read the MDN docs on the audio tag.

As I tried practicing with it, I noticed something strange: the download button under the three-dot menu in the audio controls wasn’t showing for my local audio file, but it appeared when I used an online file for example "https://www.w3schools.com/html/horse.mp3."

I asked ChatGPT why that was happening, and it explained that it’s because of how browsers treat files opened directly from your computer. For security reasons, some features behave differently or don’t work at all — like the download attribute, some JavaScript fetch requests, and even certain media options.

The fix was simple though: run the project from a live server.
Once I did that, everything worked perfectly because the browser now saw my files as coming from a web server, not directly from my system.

Anyway, that was a side story.

For the actual project, I added the audio files to the HTML and wrote the JavaScript that plays a sound when each button is clicked.