team-thyme / soundboard

Team Thyme's based soundboard

Soundboard

More like knäckebröd, har jag rätt?

Features

• Responsive search.
• Direct linking to samples without giving a clue on what's about to play.
• Backend that can be used separately and includes a Telegram API.
• Contains maximum overkill.

See https://viller.men/soundboard for the example. Samples not included!

Contrails

• Enter while focused on the search bar to play a random visible sample.
• Hold Shift to play samples simultaneously.
• Hold Ctrl to play samples on a loop.
• Press Space while not focused on the search bar to stop all playing samples.
• Right click on a sample for all options, like copying the direct link.

Requirements

• Node.js with NPM for building the frontend.
• PHP with Composer for the backend.
• Apache HTTP Server is recommended for hosting the files as .htaccess files are provided.

Browser support

The soundboard's frontend works in true browsers. This means that at least recent versions of Chrome and Firefox are fully supported. Other browsers give mixed results, but who uses those anyway?

How to deal with it?

1. Download the latest release or clone the current sources.
2. Enable production mode by copying .env.dist to .env and changing APP_ENV=prod.
3. Build the application using ./build.sh.
4. Make the public/ and public-api/ directories publicly accessible (E.g., by symlinking them from your web root).
5. Add some webm/ogg/mp3/wav samples to the samples/ directory.

You can adjust behavior of the soundboard by adjusting the environment variables in .env. Point to the right API base URL by adjusting API_BASE_URL. When hosting the frontend from a subdirectory you will have to change the BASE_URL variable.

Optional steps:

• Sample files can be served more efficiently using the Apache2 mod X-Sendfile. Install it using something like sudo apt install libapache2-mod-xsendfile and allow it to serve the samples by adding something similar to XSendFilePath /path/to/soundboard/samples to your Apache website configuration.
• Convert added samples to an efficient format by running ./convert-samples.sh (requires FFmpeg).
• Add webm/ogg/mp3/wav files to samples/ to instantly add them to the API.
• Have multiple samples with the same name by suffixing them with digits (they are stripped from the names).

Development

We've got you covered fam! Running ./build.sh --serve (with APP_ENV=dev) will install the project and set you up with a local PHP and JS server that will automatically rebuild the frontend.

API methods

The API is hosted on http://localhost:32658 by default. All calls listed here should be prefixed with this base URL.

/samples - Obtain an array with the info of all the available samples.

GET /samples

Example output:

{
  "samples": [
    {
      "url": "loop/yoshi's%20island.ogg",
      "name": "yoshi's island",
      "id": "3153b81e",
      "mtime": 1465334423,
      "categories": [
        "loop"
      ]
    },
    {
      "url": "loop/de%20huilende%20rappers/boutjes%20moertjes%20stekkertjes snoertjes.ogg",
      "name": "boutjes moertjes stekkertjes snoertjes",
      "id": "e6d4f390",
      "mtime": 1465333910,
      "categories": [
        "loop",
        "de huilende rappers"
      ]
    }.
    {
      "url": "voice/wow%20effect3.ogg",
      "name": "wow effect",
      "id": "68851e0f",
      "mtime": 1465670673,
      "categories": [
        "voice"
      ]
    }
  ]
}

/samples?query=[query] - Search in samples.

GET /samples?query=rappers|wow

Example output:

{
  "samples": [
    {
      "url": "loop/de%20huilende%20rappers/boutjes%20moertjes%20stekkertjes%20snoertjes.ogg",
      "name": "boutjes moertjes stekkertjes snoertjes",
      "id": "e6d4f390",
      "mtime": 1465333910,
      "categories": [
        "loop",
        "de huilende rappers"
      ]
    }.
    {
      "url": "voice/wow%20effect.ogg",
      "name": "wow effect",
      "id": "68851e0f",
      "mtime": 1465670673,
      "categories": [
        "voice"
      ]
    }
  ]
}

Separating query arguments with a space will perform an AND match, and separating them by a pipe will perform an OR match. This behavior mimics the frontend which does not use the API for this. API calls are time, and time is money.

/samples/[file.ogg] - Obtain sample data.

GET /samples/voice/wow%20effect.ogg

Telegram bot

Setting up a Telegram bot for your own soundboard is as simple as setting the bot's inline url to [your-api-base-url]/telegram.

soundboard's Issues

Spamclicking one sample with shift

It will not cut out even when shift is held.

ctrl+shift+enter on search bar no longer does the loop spams

Does work on clicks still

Move server src out of duplicate src directory

We get it already, it's the source.

Automatically focus search box

autofocus =)

Direct linking to soundbytes

Volume slider

Add a version number at the bottom of settings

Because all the cool applications do it, and our application is cool.

Instructions, somewhere...

Because people need to know how to spam the most.

Add contribution link to settings menu

As a temporary solution to a grand idea.

Theme does not default to anything

When it has not yet been selected, no styling will be shown at all.

Reset to default settings

Link-like button in settings modal footer

Stop all

Because when I loop/spam a lot, I want to be able to stop everything at once.

Maybe with space?

Do titling in JavaScript

Used to be done in PHP:

    $this->boardNames = [
      'music',
      'spam',
      'crack',
      'shit',
      'originality',
    ];

    $this->postNames  = [
      'amirite',
      'correct',
      'no',
      'you see',
      'eh',
      'hmm',
    ];

public function getPageTitle() {
    return 'More like ' . $this->boardNames[array_rand($this->boardNames)] . 'board, '
      . $this->postNames[array_rand($this->postNames)] . '?';
  }

Make sample take up same height if it doesn't have categories

Configuration file for frontend

E.g. for google doc id.

Page argument to loop

You're gonna need it.

Cirkeltrek thema

Class for config?

Because an array is so meh.

When playing a file it is looked up in /samples/amples

Seems to be Windows only.

Don't loop samples that aren't looped initially

When playing multiple samples of the same time with Shift, and after that you press one with Shift and Ctrl, all of the previous ones (that haven't yet ended) will be looped. This is because loop is set on the howl property instead of the group.

Theoretically this would be fixed by setting the loop property like this:

    const howlerId = sample.howl.play();
    sample.howl.loop(loop, howlerId);

This will not make the sample loop at all however. I wonder if it might be a bug in Howler.

Show changelog when version is clicked

In a new modal. Obviously polled from GitHub, because then an older version will show newer versions too. A list like:

• v13.37 - generic sample name
  • Change 1
  • Change 2
• v13.37 - generic sample name
• v13.37 - generic sample name
• v13.37 - generic sample name

Versions are collapsible, and the current one (if available) is expanded by default.

Streaming audio vs fully loading

Streaming is obviously faster, but has the downside that duration isn't accurate. Fully loading enabled modulation (do we need that?), but increases the loading time significantly.

Return object instead of array in JSON response

I finally found out why you told me. 😄

Add array of categories to sample info

Theme selector

Looping play option

New theme color specification

For applying colors in other places, I was thinking of making the color names more generic:

• headers-background and text (headers and buttons)
• input-background and text (search and modal body)
• body-background, accent and text (for sample container and samples, where sample backgrounds would be accent)
• footer-background and text (or maybe this could be just the header and input mixed)

Contribution system

Post your ideas here!

Gulp watch doesn't include the client config, build does

Have not investigated why, might be simple.

Failed to decode downloaded font

Not sure if already solved, so here ya go.

Gulp does not show errors on build/watch

It just doesn't output or refresh script.js.

Thyme theme needs at least 10% more lime

And then they say it wouldn't make it prettier. 😆

But in all seriousness. MORE LIME UGLIER?!??! SHAME (3x), BELL.

But actually in all seriousness, I want the sample text to be lime too.

Create separate install script/task

Instead of putting everything in postinstall, which is really just for NPM. Especially composer install in postinstall is nasty.

This could be an NPM script (not postinstall), a gulp task, or something else entirely.

We need to take our lovely japanese intern out back

She should resume her English training soon, otherwise she will never be accepted as our receptionist.

Set mobile status bar color with theme

<meta name="theme-color" content="#444444">

maakTaakbalkKleurWeer

Search in categories as well for client

Allow for slashes in soundboard url argument

It didn't quite work with <base href="/" />, so we're having our future selves deal with it.

Sometimes samples start playing but immediately stop

On both mobile and desktop, and happens arbitrarily. Once in every like 10 tries or so. Does not happen to samples that have already been played, even the once that had this bug occur to. So second click will always play, regardless of whether it errored before. Makes me think it is a howler bug (on 2.0.0-beta14), also happened on beta13.

Sorting behavior setting

newrandom, fullrandom, mtime

Scroll to random sample on Enter

Allow model and controller to receive config values some way

Allow searching for soundbytes from api

Because the soundboard will get very popular and will require searches from third party applications.

/api/samples?query=[you name it]

Audio doesn't stop when returning to state without id

Translation: Going back to /soundboard doesn't stop audio.

Do sample sorting in JavaScript

Used to be done with PHP:

    usort($samples, function ($sample1, $sample2) {
      if ($sample1->mtime > $this->sortLimit || $sample2->mtime > $this->sortLimit) {
        return $sample2->mtime - $sample1->mtime;
      }

      return 2 * mt_rand(0, 1) - 1;
    });

Playing using submit does not replace state

Settings modal overflows width on mobile

Because the themes do not wrap I guess.

CRLF/LF is fucked

.editorconfig says LF
files are CRLF

Reliably determine id from url

Right now it throws an error because no sample was found with the id.

Best way to solve this, to my knowledge, is by ignoring the result when no sample was matched.

Update Howler

To get this fixed: goldfire/howler.js#534

Enter in search box no longer works

Might be related to #47.