The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

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

View previous topic View next topic Go down

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

Post by Ahmed.K on May 4th 2014, 3:26 am

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.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 5th 2014, 8:19 am

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Michael_vx on May 5th 2014, 8:30 am

@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
Very Happy

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 5th 2014, 8:35 am

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Michael_vx on May 5th 2014, 8:46 am

@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.
Sad
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
Hello


Last edited by Michael_vx on May 5th 2014, 9:40 am; edited 1 time in total (Reason for editing : add new info)

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 5th 2014, 1:49 pm

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

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by GyGu on May 5th 2014, 4:45 pm

works in all versions?

GyGu
New Member

Posts : 13
Reputation : 1
Language : Portuguese

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Michael_vx on May 5th 2014, 5:18 pm

@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

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 5th 2014, 7:12 pm

No,does not work here.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Michael_vx on May 5th 2014, 7:30 pm

@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
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 5th 2014, 8:41 pm

@Michael_vx wrote:
@Ahmed.K wrote:No,does not work here.
are you sure that the forum toolbar is active
Of course.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Luffy on May 5th 2014, 8:45 pm

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






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 5th 2014, 8:57 pm

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! Wink
Yes, I know. I am using the default Forumotion toolbar too.

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

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 6th 2014, 4:50 am

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 6th 2014, 5:25 am

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

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 6th 2014, 5:43 am

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>'); };

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 6th 2014, 5:46 am

Done. and still does not work.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 6th 2014, 5:49 am

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 6th 2014, 5:52 am

Ok, you can send private messages now.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 6th 2014, 6:19 am

I tested and the audio file appended and played :


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

Thank you.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 6th 2014, 6:20 am

Opera 22.0

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 6th 2014, 6:55 am

That is your problem. Wink

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 6th 2014, 7:03 am

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

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 7th 2014, 12:11 am

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ahmed.K on May 7th 2014, 1:35 am

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?

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Ange Tuteur on May 7th 2014, 2:33 am

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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Sound for the notifications system. for Javascript experts...

Post by Michael_vx on May 7th 2014, 4:45 am

@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
Laughing

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

View previous topic View next topic Back to top


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