Sound for the notifications system. for Javascript experts...

I thinking in adding a notify sound when the toolbar (the notifications system) receives a new notification, any ideas?
I did not find any correct answer for this feature so far.

Hello Ahmed,

I have written up a draft code which you can test.

Administration panel > modules > javascript codes management > create a new script

Title : what you wish
Placement : in all the page
Paste the code below und save :

Code:

var audioFile = 'http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3';

notifChecker = setInterval('checkNotif()',500);
function checkNotif() {
    if ($('.fa_notification').length > 0) {
        window.clearInterval(notifChecker);
        alertNotif();
    }
};

dispCheck = setInterval('removeNotif()',500);
function removeNotif() {
    if ($('.fa_notification').css('display') == 'none') {
        $('.fa_notification').remove();
        $('.audioElem').remove();
        notifChecker = setInterval('checkNotif()',500);
    }
};

function alertNotif() { $('body').append('<audio class="audioElem" style="display:none;" controls autoplay><source src="'+audioFile+'" type="audio/mpeg"></audio>'); };

You can change the audio file by modifying the variable at the top of the script :

Code:

var audioFile = 'http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3';

Ange Tuteur wrote:Hello Ahmed,

I have written up a draft code which you can test.

Administration panel > modules > javascript codes management > create a new script

Title : what you wish
Placement : in all the page
Paste the code below und save :

Code:

var audioFile = 'http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3';

notifChecker = setInterval('checkNotif()',500);
function checkNotif() {
    if ($('.fa_notification').length > 0) {
        window.clearInterval(notifChecker);
        alertNotif();
    }
};

dispCheck = setInterval('removeNotif()',500);
function removeNotif() {
    if ($('.fa_notification').css('display') == 'none') {
        $('.fa_notification').remove();
        $('.audioElem').remove();
        notifChecker = setInterval('checkNotif()',500);
    }
};

function alertNotif() { $('body').append('<audio class="audioElem" style="display:none;" controls autoplay><source src="'+audioFile+'" type="audio/mpeg"></audio>'); };

You can change the audio file by modifying the variable at the top of the script :

Code:

var audioFile = 'http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3';

hi ange
this code really nice i test it on my test forum
but i have one thing to ask
can this code work with out the forum toolbar
i use my own bar and i will make this bar in English and i will send it as tuto
 

This checks for the fa_notification, if you have a dynamic element for notifications then you need only change fa_notification to your selector.

Ange Tuteur wrote:This checks for the fa_notification, if you have a dynamic element for notifications then you need only change fa_notification to your selector.

 
th toolbar i use dose not have any notification mode
its a HTML code im about to start to translate this toolbar
i will try make it fast
 
Edit
i have just done the toolbar and sent a PM i hope my tuto is to be good
 

Hi Ange, It does not work. You have a PM.

works in all versions?

GyGu wrote:works in all versions?

i make test on phpbb2 work fine
but i guess it should be fine with other versions like phpbb3 or punbb

No, does not work here.

Ahmed.K wrote:No, does not work here.

are you sure that the forum toolbar is active if not the code will not work
also i make test on all versions works on phpbb2 and phpbb3 also the punbb and invision the most needed thing is tick all pages and the toolbar of forum is active

Michael_vx wrote:

Ahmed.K wrote:No, does not work here.

are you sure that the forum toolbar is active

Of course.

Ahmed.K they are not talking about your toolbar but the default Forumotion toolbar. I am just saying this so no mistakes are made!

Marios94 wrote:Ahmed.K they are not talking about your toolbar but the default Forumotion toolbar. I am just saying this so no mistakes are made!

Yes, I know. I am using the default Forumotion toolbar too.

Anyway, waiting for an answer from Ange about that code.

I have checked your forum and could not seem to find the script installed on it, so I could look for any errors.

If you can, provide the following information please.

• The browser you're using + version of the browser
  

I installed it again. take a look on it. I get many errors.

You have wrapped the code I gave you with :

Code:

$(document).ready(function () { });

There is no need to launch the function with jQuery, as the check is set in half a second intervals to see if the notif exists and if its display state changes. Wrapping the code with jQuery is causing the errors you're seeing thrown in the console, so remove that and just add the code in as :

Code:

var audioFile = 'http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3';

notifChecker = setInterval('checkNotif()',500);
function checkNotif() {
    if ($('.fa_notification').length > 0) {
        window.clearInterval(notifChecker);
        alertNotif();
    }
};

dispCheck = setInterval('removeNotif()',500);
function removeNotif() {
    if ($('.fa_notification').css('display') == 'none') {
        $('.fa_notification').remove();
        $('.audioElem').remove();
        notifChecker = setInterval('checkNotif()',500);
    }
};

function alertNotif() { $('body').append('<audio class="audioElem" style="display:none;" controls autoplay><source src="'+audioFile+'" type="audio/mpeg"></audio>'); };

Done. and still does not work.

I cannot look into this closer as you've set a limit on the posts needed before sending private messages.

Ok, you can send private messages now.

I tested and the audio file appended and played :


Could you provide info on the browser you're using ?

Thank you.

Opera 22.0

That is your problem.

I will need to add another file which Opera supports. When it is done I'll let you know.

Hmmm...Which format i should add? Wav or what?

Yes, wav.

I have added another variable. One is for MP3s the other is for WAVs.

Code:

var audioFileMP3 = 'http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3';
var audioFileWAV = '';

notifChecker = setInterval('checkNotif()',500);
function checkNotif() {
    if ($('.fa_notification').length > 0) {
        window.clearInterval(notifChecker);
        alertNotif();
    }
};

dispCheck = setInterval('removeNotif()',500);
function removeNotif() {
    if ($('.fa_notification').css('display') == 'none') {
        $('.fa_notification').remove();
        $('.audioElem').remove();
        notifChecker = setInterval('checkNotif()',500);
    }
};

function alertNotif() { $('body').append('<audio class="audioElem" style="display:none;" controls autoplay><source src="'+audioFileMP3+'" type="audio/mpeg"><source src="'+audioFileWAV+'" type="audio/wav"></audio>'); };

Just add the sound you want to play with a MP3 and WAV file.

Yes, i found this, HTML <audio> Tag - Browser compatibility:
http://www.w3schools.com/tags/tag_audio.asp
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats

It doesn't work when I login and i find new notifications.

But it works fine when i be online and i get a new notification.

any ideas?

Unfortunately this will only work while you're logged in. The reason is because of the live notification which pops up while logged in, so if you're logged in and this live notification pops up a sound will play.

Now if I were to change this to play audio when there is a notification number(for new notifs) it will constantly play each time you change a page until it is read.

Ange Tuteur wrote:Unfortunately this will only work while you're logged in. The reason is because of the live notification which pops up while logged in, so if you're logged in and this live notification pops up a sound will play.

Now if I were to change this to play audio when there is a notification number(for new notifs) it will constantly play each time you change a page until it is read.

looks good idea to me can you make something like that to play audio also when there is notification already too and when live notification come wil play also sound this will be better to me