Skip to content

Gabixel/Soundboard

Repository files navigation

Soundboard

A soundboard for everyone!

This project is still very WIP. Everything is subject to change.

This is one of my first projects to be published on GitHub, so you can expect it to be less than perfect!

At the moment I am not very active on this project, partly due to the implementation of Discord's built-in soundboard, but I would like to get back into it at some point (since Discord's built-in one is quite limited anyway).

You can watch this small preview:

preview.mp4

Note

How do I use a Soundboard?

You can only use your soundboard to send tracks on your desired real output by default. If you want to send some sounds to a microphone and use it for online meetings, you must install a "virtual cable" (aka a driver). This cable is responsible for sending the audio output to a virtual input device. A common driver is VB-Cable (for Mac and Windows).

Programming

The project uses Electron as its core, TypeScript for JavaScript management and LESS for the CSS part (but still not very great for my expectations).

Debug 'n Run

To start debugging the app:

  • Open your terminal in the root directory of this project
  • To compile JavaScript (using TypeScript), run the following command: npm run tsc-all. This will compile all the .ts files present in the /app and /src/ts folders.
  • To compile CSS (using LESS), see the Easy LESS extension in VSCode (you can search mrcrowl.easy-less in the extensions list)
    • Go on each .less file and do CTRL + S to generate the .css format
    • (TODO: use official LESS npm compiler to make this process easier)
  • If you use VSCode, you can use the debug shortcut (by default, on Windows it should be F5).
    There are different debugging options available here. You can check them in the launch.json file and VSCode.
  • You can run the app by typing npm run debug.

Notes

  • There's an issue with antiviruses when the app tries to list the OS audio devices, probably because the logic attempts to filter out anything that is not output at the beginning:
    private static async refreshAudioDevicesArray(): Promise<void> {
    // Get audio output devices
    const devices = await navigator.mediaDevices.enumerateDevices();
    this._audioDevices = devices.filter(({ kind }) => kind === "audiooutput");
    }
    As a result, there's the risk that the app gets flagged for trying to access other types (like microphones and webcams). Here's the example on my end: avast one
  • For some reason, VB-Cable audio can sometimes be glitchy, with strange interference in the sound (and it only seems to happen with Discord, but I'm not sure). You can watch this tutorial which explains some functional remedies to solve the problem (sometimes only temporarily). I have written a script to make this step semi-automatic, but it still needs to be integrated into this soundboard and I would like to make it as automatic as possible.