Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
May 24, 2026 - @978.47 (what is this?)
Activity rating: Four Stars Posts & Arts: 52/1k.beats Random | Recent Posts | Guild Recents
News: :wizard: You can make anything on the web! :wizard: Guild Events: Spring Themed Projects

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Custom sound for Chattable.


« previous next »
Pages: [1] Print Embed
Author Topic: Custom sound for Chattable.  (Read 64 times)
WhiteFelineWonder
Jr. Member ⚓︎
**
View Profile WWWArt


Indie web FTW!
⛺︎ My Room
StatusCafe: whitefelinewonder

Guild Memberships:
Artifacts:
Sash LilacPaintbrushSapphireCup o' JaneJoined 2025!
« on: May 23, 2026 @116.35 » Embed

For everybody and anybody that uses Chattable, I'm trying to get a custom notification sound working but I have no idea where the snippet goes. I've read through the documentation multiple times yet it is still unclear to me. Where does the snippet for a custom sound go specifically?
Logged

https://ericscorner.nekoweb.org/splashname.png

Artifact Swap: A coin!Pink DSSMK MarioPatrick StarSquidwardOnekoCherryCameraMusical KeyboardArtist's PalettePencilYellow and Magenta Gem
mrparker
Casual Poster ⚓︎
*
View Profile WWW

⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2026!
« Reply #1 on: May 23, 2026 @417.42 » Embed

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:

Code
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):

Code
brew install ffmpeg

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:

Code
<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:

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:

Code
<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!
Logged
WhiteFelineWonder
Jr. Member ⚓︎
**
View Profile WWWArt


Indie web FTW!
⛺︎ My Room
StatusCafe: whitefelinewonder

Guild Memberships:
Artifacts:
Sash LilacPaintbrushSapphireCup o' JaneJoined 2025!
« Reply #2 on: May 23, 2026 @525.36 » Embed

I'm guessing this goes into the CSS file for Chattable then apart from (likely) the last code snippet (which looks to be for HTML), right?

also wow, i had no idea there's more to this than what the chattable documentation said :O
« Last Edit: May 23, 2026 @528.37 by WhiteFelineWonder » Logged

https://ericscorner.nekoweb.org/splashname.png

Artifact Swap: A coin!Pink DSSMK MarioPatrick StarSquidwardOnekoCherryCameraMusical KeyboardArtist's PalettePencilYellow and Magenta Gem
mrparker
Casual Poster ⚓︎
*
View Profile WWW

⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2026!
« Reply #3 on: May 23, 2026 @543.80 » Embed

No, the code I provided is javascript, not CSS - you have to put it in the page in which you are going to use this in.

Also, I read the docs - it seems like I over complicated this quite a bit. I am not too familiar with chattable, and I immediately looked at the javascript instead.

In your page, in the <head> tag - you can add this CSS, and it will customize the sound:

Code
:root {
  --notification-sfx: https://example.com/path/to/audio.mp3;
}

You can put it inside a style tag, and it should work (of course change the URL provided).
Logged
WhiteFelineWonder
Jr. Member ⚓︎
**
View Profile WWWArt


Indie web FTW!
⛺︎ My Room
StatusCafe: whitefelinewonder

Guild Memberships:
Artifacts:
Sash LilacPaintbrushSapphireCup o' JaneJoined 2025!
« Reply #4 on: May 23, 2026 @555.58 » Embed

Those three lines in the snippet are confusing me greatly.... X_X

The way I have it set up on my site is that there's an HTML page specifically with the chat room's iframe. Does it go in the HTML file of the page or the Chattable CSS? It's still confusing me.... :sad:
Logged

https://ericscorner.nekoweb.org/splashname.png

Artifact Swap: A coin!Pink DSSMK MarioPatrick StarSquidwardOnekoCherryCameraMusical KeyboardArtist's PalettePencilYellow and Magenta Gem
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
MelonLand @000

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net