I have a podcast radio show and I use a steam game called "soundboard" to provide sound effects throughout the show. The problem is the layout is terrible and I can never find the sound I am looking for when I need it. So, I have been trying to make a very simple html code that uses javascript. Well, I am not that talented and keep messing up, plus making it responsive is way outta my abilities. So, I am here to see if someone can help me code it. Please see description but basically, I just want a nice looking soundboard that separates out my various sound effects.
So, please see below as I have made a graphic of what I am looking for. I also would like it responsive because sometimes I will want to run it from my phone and so I just want to go to the website and use it on my phone. I know this is all very possible because I have been playing with a few codes I got from
https://www.joeldare.com/wiki/html_5_soundboard_template and
https://blog.mozilla.org/webdev/2009/08/06/html5-audio-soundboard/
So, these sites make sense and work easily from mobile but each code doesn't quite do what I need so that is why I am here.
Ideally what I want is folders in my file structure that will hold audio files. For example: my folders would be ads, quick, songs, insult, funny, other. I would like to be able to drop either mp3 or wav files but if you can only make my site work with one or the other... that's okay I have an easy converter and I can do that. So, when I place a file in a folder, say adspot.mp3 is dropped in folder 'ads' - I want an auto generated button on my html page in the decided color for files in the 'ads' folder. So, please see the final image below for kind of what I want. Now, granted perhaps the empty buttons wouldn't be there since no file exists in those areas. The name on the button should just be the file name. Now I would have my sound effects laid out in color coded buttons and it would be VERY easy for me to find the needed sound quickly.
The white plus sign would be if I had more of that row but I have been thinking it would probably be better if this remains on one page and rows are added as needed, so no plus button would ever be needed.
So, can you do this job or do you have advice for me about what might make it easier or better?
