So, it seems like natively it doesn't support adding sounds on messages - but, we can do that ourselves thankfully.
When looking at the source, it appears to expose events - these events include when a message is received.
I would personally use mp3, due to it's wide support - and it also works on iOS.
If you don't care about supporting mobile (or more specifically, iOS) - then use a format like ogg, which is better suited for the web - smaller in size, and more widely supported by browsers.
Use ffmpeg to convert it, like so:
ffmpeg -i some_file.mp3 some_file.ogg
Most platforms have it in their package managers (Linux) or is available via package managers like
brew (macOS, Linux):
Windows has winget - although, be careful about using winget - packages aren't as vetted.
Once you have the javascript for chattable imported on the page, we can use the chattable.on() method to listen for messages:
<script>
// other code in your page above
let sound = new Audio("/path/to/audio.mp3") // We do this once, otherwise it will attempt to load the audio every time a message is sent - we don't want that!
chattable.on("message", () => {
sound.play()
})
</script>
This does potentially have some downsides, such as if a chat is particularly active - the sound won't play fully, cause every message sent restarts the audio. If this behavior is undesired, modify the code to include a check if the audio is currently playing in the event code:
chattable.on("message", () => {
if (!sound.paused) return; // if sound is playing, simply not re-play
sound.play()
})
However, the downside to this method is it won't play for every single message sent - it only will play again when it is done playing.
If maximum chaos is your goal, and you don't necessarily care about bandwidth (or, you're certain your cache-control headers are set properly for static assets), you can greatly increase max chaos by simply creating a new audio every message:
<script>
// other code in your page above
chattable.on("message", () => {
let sound = new Audio("/path/to/audio.mp3") // WARNING: listening to nuke music may damage your ear drums - *and hurt your soul*
sound.play()
})
</script>
Regardless of the amount of messages a second, it will play the sound each message - to the point it layers on top of each other. Again, only if you want max chaos!