🔊 HTML5 Soundboard that pulls from a JSON file, plus PHP code to build JSON.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
inc
php
sounds
.gitignore
README.md
index.html

README.md

Simple Single Page Soundboard

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:

  1. Loads way faster.
  2. Tablet and Mobile friendly.
  3. Sorts alphabetically automatically.
  4. You can play multiple drops simultaneously.

The original version required PHP. Now you can use PHP to build the JSON file of your Soundboard files, but it is not required.

Getting Started

  1. Create a new folder and place all the MP3 drops you wish to have on the soundboard. For this repo, I've added 20 drops to get you started.
  2. Create or build a JSON file with the sound drops. I'll explain the format in the next section of this README.
  3. Add a link to the JSON file on the Soundboard page. (EX: url: "./inc/json/soundboard.json")
  4. Deploy to any web server.

JSON Format

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",
      "duration": "0:00:03",
      "mp3":
        "/sounds/1-to-12-hour.mp3"
    },
    {
      "name": "2 of the Dumbest White Men - Mike Reineri",
      "duration": "0:00:07",
      "mp3":
        "/sounds/2-of-the-Dumbest-White-Men.mp3"
    }
  ]
}

Creating the JSON file

You can create the JSON file a few different ways.

  1. By hand. With any editor, you can type up your own JSON file that describes your Soundboard. This is perfect if where you want to host the Soundboard does not support server-side code.
  2. With PHP. Included in this repo is PHP code that will build the JSON file for you. PHP is widely supported with web hosts.
  3. NodeJS. (future development)

Building the JSON with PHP

There are 2 ways to build the JSON file using PHP.

  1. Filename: If you want the buttons to draw their names using the filename, use the buildJSON_filename.php page for your Simple Soundboard. To display a ? on the button use [Q] in the file name. Example: why[Q].mp3.
  2. ID3: If your MP3 files have Titles defined in the ID3 tags, you will want to use the buildJSON_id3.php page for your Simple Soundboard. The code will draw the buttons on the soundboard using the getID3 library to read the title and artist. The ID3 title will be used for the button text and the artist will be used for a tooltip on mouseover.

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.

Some Ideas For Your Soundboard

  1. Search for "CSS Button Generator" to create your own custom super cool looking buttons. Place that CSS into the sb.css file.
  2. Set the preload to none if you have a lot of drops or the drops are larger files to improve load time. If you have a small number of drops or know that your users all have fast connections, set the preload to auto.

Resources

  1. The ID3 version of the soundboard uses getID3 from James Heinrich.
  2. The ID3 version uses Ballon.CSS for the mouseover tooltips.
  3. The styling for the soundboard buttons were created with help from CSS Button Generator.

Demo and Sharing

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 the link and I'll share it here for others to see.

Future Development

  1. Create Node.JS version

  2. Move JQuery to Vanilla JS