Sound Notifications

Go down

Tutorial Sound Notifications

Post by APE on 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

Installation:
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.

Code:
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').text('notifications'); 
                    $('#alarm').css('color', alarm_color_on); 
                    $('#alarm').attr('title', alarm_title_on); 
                    DeskInstallNotify();
                } else { 
                    $('#alarm').text('notifications_off'); 
                    $('#alarm').css('color', alarm_color_off); 
                    $('#alarm').attr('title', alarm_title_off);
                }
                alarm = al;
            };
       
            function SwitchAlarm() {
                SetAlarm(!GetAlarm());
            };
       
            prevunread = -1;
            _DeskSoundNotify = function() { 
                  $.ajax({
                    url: '/notification.forum',
                    dataType: 'json',
                    success: function(data, txt, xhr) {
                        if (alarm) {
                            if (data.unread > prevunread) {
                                if (prevunread >= 0)
                                    $('#sound').get(0).play();
                                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.

Templates:
Admin Panel → Display → Templates → Templates option → General → overall_header
Find:
Code:
<head>

After the code add the following line.
Code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
Find:
Code:
<body>

After the code add the following line.
Code:
    <audio id="sound">        <source src="you_sound"/>      </audio>
Replace the word
Code:
you_sound
with a link to the sound.

Here is some sounds you may want to use:
Code:
https://s1.vocaroo.com/media/download_temp/Vocaroo_s12lFH1cG3Km.mp3
Code:
http://illiweb.com/fa/fdf/future.mp3
Code:
http://illiweb.com/fa/fdf/hal.mp3
Code:
http://illiweb.com/fa/fdf/secret.mp3
Code:
http://illiweb.com/fa/fdf/zelda.mono.mp3

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.



Sound Notifications Left1212Sound Notifications Center11Sound Notifications Right112
Sound Notifications Ape_b110
Sound Notifications Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14405
Reputation : 1558
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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