🔊 HTML5 Soundboard that pulls from a JSON file, plus PHP/Node code to build JSON.
This code creates a Soundboard on a single HTML page that loads a JSON file. It uses Javascript, JQuery, HTML5, and CSS. The JSON file can be created by hand or built using PHP. I was motivated to create this in 2015 when Soundboard.com ignored my two feature requests. This version is better than Soundboard.com in at least 4 ways:
The original version required PHP. Now you can use PHP to build the JSON file of your Soundboard files, but it is not required.
You can now filter the drops with the text input. It will search track titles and artists.
I created a Svelte version of the Simple Soundboard. Check it out!
The Soundboard JSON file is a collection of files. Each file will have a name, duration, and mp3 file path. Duration is not used at this time, but could be in the future. The files do not have to be local. Any valid URL pointing to an MP3 file will work, provided that the host allows direct linking to audio files.
{
"files": [
{
"name": "1 to 12 hour - Boca Britany Somers",
"mp3":
"/sounds/1-to-12-hour.mp3"
},
{
"name": "2 of the Dumbest White Men - Mike Reineri",
"mp3":
"/sounds/2-of-the-Dumbest-White-Men.mp3"
}
]
}
You can create the JSON file a few different ways.
There are 2 ways to build the JSON file using PHP.
The ID3 version is the better version to use. If you need a tool to help you edit the ID3 tags of your MP3 files so they all have titles, look into Mp3Tag. Artist is optional. Drops without an artist will not have a tooltip.
Filename: If you want the buttons to draw their names using the filename, use the json_filename.js page for your Simple Soundboard. To display a ? on the button use [Q] in the file name. Example: why[Q].mp3. From the node/ folder run node json_filename.js.
ID3: Not coded yet.
This is the Neil Rogers Soundboard built using this code. Let me know if you build a Soundboard you would like to share. You can email me ([email protected]) the link and I'll share it here for others to see.
Create Node.JS ID3 version
Move JQuery to Vanilla JS