This content originally appeared on DEV Community and was authored by Augusta Igboama
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.
This was a really easy project. It was also fun finally getting to use audio in an actual project.
Live Demo: View on GitHub Pages
Source Code: GitHub Repository
On to Day 10 🎉
This content originally appeared on DEV Community and was authored by Augusta Igboama
Augusta Igboama | Sciencx (2025-10-23T17:53:01+00:00) Day 9 | 50 Projects in 50 Days. Retrieved from https://www.scien.cx/2025/10/23/day-9-50-projects-in-50-days/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.