The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Sound Notifications

2 posters

Go down

Tutorial Sound Notifications

Post by Ape January 22nd 2019, 5:14 pm

Install Sound Notifications  
Some of you have asked for our forums to have sounds play when you get a Notification.

Today I am proud to announce this great new plug in.

Compatible with the following version's
 PunBB, phpBB2, phpBB3, Invision, ModernBB, AwesomeBB,

This may have problems if you have made a lot of change to your templates.

Screen shot's
Sound Notifications Off12
Sound Notifications On12

Admin Panel → Modules → HTML & JAVASCRIPT → Javascript codes management : Yes → Sound Notifications Captu124
Admin Panel → Modules → HTML & JAVASCRIPT → Javascript codes managementSound Notifications Captu123

Title * : Notification sound
Placement : All pages
Javascript Code * : Copy and paste all of the code below.

alarm_color_on = "white";
            alarm_color_off = "#806060";
            alarm_title_on = "Turn off sound notifications";
            alarm_title_off = "Enable sound notifications";
            update_timer = 1000;
            function GetAlarm() {
                var al = localStorage.getItem('alarm');
                return al === "1";
            alarm = false;
            function SetAlarm(al) {
                localStorage.setItem('alarm', al ? "1" : "0");
                if (GetAlarm()) {  
                    $('#alarm').css('color', alarm_color_on);  
                    $('#alarm').attr('title', alarm_title_on);  
                } else {  
                    $('#alarm').css('color', alarm_color_off);  
                    $('#alarm').attr('title', alarm_title_off);
                alarm = al;
            function SwitchAlarm() {
            prevunread = -1;
            _DeskSoundNotify = function() {  
                    url: '/',
                    dataType: 'json',
                    success: function(data, txt, xhr) {
                        if (alarm) {
                            if (data.unread > prevunread) {
                                if (prevunread >= 0)
                                prevunread = data.unread
                }).always(function() {
                    setTimeout(_DeskSoundNotify, update_timer)
            function DeskInstallNotify() {
                setTimeout(_DeskSoundNotify, update_timer * 2);
            $(function() {
                $(function() {
                    if ($('#mNotificationBtn').length == 0 && _userdata["session_logged_in"] > 0) {      
                        alarm = GetAlarm();      
                        $('<span id="notify_alarm" onclick="SwitchAlarm();" style="font-size: 20px; cursor: pointer;" ><i title="' + (alarm ? alarm_title_on : alarm_title_off) + '"class="material-icons" style="font-size: 18px; position: relative; top: 5px; color:' + (alarm ? alarm_color_on : alarm_color_off) + '" id="alarm">' + (alarm ? 'notifications' : 'notifications_off') + '</i></span>')           .insertBefore($('#fa_hide'));                
                        if (alarm) DeskInstallNotify();        
Then Sound Notifications Captu124

VariableString in scriptWhat does
alarm_color_on1The color of the bell when the sound notification is on.
alarm_color_off2The color of the bell when the sound notification is off.
alarm_title_on3Hover cursor for notifications enabled.
alarm_title_off4Hover cursor for disabled notifications.
update_timer5Status check interval in milliseconds.

Admin Panel → Display → Templates → Templates option → General → overall_header


After the code add the following line.
<link href="" rel="stylesheet"/>


After the code add the following line.
    <audio id="sound">        <source src="you_sound"/>      </audio>
Replace the word

with a link to the sound.

Here is some sounds you may want to use:

once you have added your sound file you need to save and publish your template.

This tutorial was made by a member of the Russian support forum,
Translated by: Ivan Ivanov.
Reworked by: @APE
If you have any problems with the Tutorial please make a thread in the support forum and link this thread to it.

Last edited by Ape on October 7th 2020, 6:27 pm; edited 1 time in total

Sound Notifications Left1212Sound Notifications Center11Sound Notifications Right112
Sound Notifications Ape_b110
Sound Notifications Ape1010

Male Posts : 19211
Reputation : 2001
Language : fluent in dork / mumbojumbo & English haha

TonnyKamper and KimiD56 like this post

Back to top Go down

Tutorial Re: Sound Notifications

Post by skouliki February 11th 2020, 10:26 am

This code was updated to fit in with the new HTTPS address

updated 11.02.2020 by skouliki

Female Posts : 15247
Reputation : 1703
Language : English,Greek
Location : Greece

TonnyKamper and KimiD56 like this post

Back to top Go down

Back to top

- Similar topics

Permissions in this forum:
You cannot reply to topics in this forum