Звуковые уведомления

Выглядит так

Уведомления включены.


Уведомления выключены


Для изменения режима нужно нажать в колокольчик

Для установки нужно добавить скрипт:

Код:

alarm_color_on = "white";
alarm_color_off = "#806060";
alarm_title_on = "Выключить звуковые уведомления";
alarm_title_off = "Включить звуковые уведомления";
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();          
        };    
    });
});

В начале скрипта прописаны следующие переменные (можно настраивать по вкусу):
alarm_color_on - цвет колокольчика когда звуковые уведомления включены;
alarm_color_off - цвет колокольчика когда звуковые уведомления выключены;
alarm_title_on - всплывающая подсказка при наведении мышкой для включенных уведомлений;
alarm_title_off - всплывающая подсказка при наведении мышкой для выключенных уведомлений;
update_timer - интервал проверки статуса в миллисекундах;

А также в шаблоне overall_header нужно внести два изменения:
1. В секцию head  добавить ссылку на шрифт "Material Icons" гугла

Код:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

2. В начале секции body добавить ссылку на звук

Код:

 <audio id="sound">
    <source src="http://tgeek.ru/forum/notify.mp3"/>
  </audio>


ссылку можно (и нужно ) поменять на свой звуковой файл. Я не гарантирую что мой звук будет жить вечно