Simple Soundboard

2025年6月：我将音板重写为渐进式Web应用程序（PWA）。 Soundboard PWA

简单的单页音板

此代码在加载JSON文件的单个HTML页面上创建了一个音板。它使用JavaScript，jQuery，HTML5和CSS。 JSON文件可以手工创建或使用PHP构建。当Soundboard.com忽略了我的两个功能请求时，我有动力在2015年创建这个问题。这个版本至少在4种方面比Soundboard.com好：

1. 加载速度更快。
2. 平板电脑和移动友好。
3. 自动按字母顺序排列。
4. 您可以同时玩多滴。 （选修的）

原始版本需要php。现在，您可以使用PHP来构建音板文件的JSON文件，但这不是必需的。

2019年更新

现在，您可以使用文本输入过滤掉落。它将搜索曲目标题和艺术家。

2020更新

我创建了一个Simple Soundboard的Svelte版本。一探究竟！

入门

1. 创建一个新文件夹，然后将所有希望在音板上放置的MP3滴剂放置。对于此存储库，我添加了20滴以使您入门。
2. 使用声音下降创建或构建JSON文件。我将在此README的下一部分中解释格式。
3. 在音板页面上的JSON文件添加链接。 （例如：url：“ ./inc/json/soundboard.json”）
4. 将变量playonlyonesoundatatime设置为javaScript中的true或false。
5. 部署到任何Web服务器。

JSON格式

Soundboard JSON文件是文件集合。每个文件将具有名称，持续时间和MP3文件路径。目前尚未使用持续时间，但可能会在将来使用。这些文件不必是本地。指向MP3文件的任何有效的URL都可以使用，前提是主机允许直接链接到音频文件。

 {
  \"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\"
    }
  ]
} 

创建JSON文件

您可以以几种不同的方式创建JSON文件。

1. 手工。使用任何编辑器，您可以输入描述您的音板的JSON文件。如果您想托管音板不支持服务器端代码，这是完美的。
2. 与PHP。此存储库中包含的是PHP代码，它将为您构建JSON文件。 Web主机广泛支持PHP。
3. nodejs。文件名版本现已完成。 ID3版本尚未编码。

用php构建JSON

有两种使用PHP构建JSON文件的方法。

1. 文件名：如果您希望按钮使用文件名绘制其名称，请使用buildjson_filename.php页面进行Simple Soundboard 。显示？在“文件名”中使用[q]在按钮上。示例：为什么[q] .mp3 。
2. ID3：如果您的MP3文件在ID3标签中定义了标题，则您需要将buildjson_id3.php页面用于Simple Soundboard 。该代码将使用GetID3库在音板上绘制按钮以阅读标题和艺术家。 ID3标题将用于按钮文本，并且艺术家将用于鼠标上的工具提示。

ID3版本是更好的版本。如果您需要一个工具来帮助您编辑MP3文件的ID3标签，以便它们都具有标题，请查看MP3TAG。艺术家是可选的。没有艺术家的掉落将没有工具提示。

用nodejs构建JSON

1. 文件名：如果您希望按钮使用文件名绘制其名称，请使用JSON_FILENAME.JS页面进行Simple Soundboard 。显示？在“文件名”中使用[q]在按钮上。示例：为什么[q] .mp3 。从节点/文件夹运行节点JSON_FILENAME.JS。

2. ID3：尚未编码。

您的音板的一些想法

1. 搜索“ CSS按钮生成器”以创建您自己的自定义超级凉爽的按钮。将CSS放入SB.CSS文件中。
2. 如果您有很多滴滴或滴剂是更大的文件以改善加载时间，则将预加载力设置为无。如果您有少量的滴剂或知道您的用户都具有快速连接，请将预加载设置为自动。

资源

1. ID3版本的Soundboard使用了James Heinrich的GetID3。
2. ID3版本使用ballon.css用于鼠标工具提示。
3. 在CSS按钮生成器的帮助下创建了音板按钮的样式。

演示和分享

这是使用此代码构建的Neil Rogers音板。让我知道，如果您构建了要分享的音板。您可以通过电子邮件将链接发送给我（digitalColony@gmail.com），我将在这里分享它供其他人查看。

未来的发展

1. 创建Node.js ID3版本

2. 将jQuery移至Vanilla JS