Author Topic: Audible alert sound in ShoutBox. (Read 33202 times)

N.E.Media · « **on:** November 06, 2009, 08:04:52 PM »

I had been using the Ajax Chat/Shout package, in which both had a little alert tone each time a new entry was made.

I installed SP and love it - and started using the SP shout block because it meshes seamlessly with the rest of SP, and switched off the Ajax shoutbox.

Problem is, we're missing that feature because no one realized how handy that alert tone was until it was gone.

No one notices a new shout now until they happen to look - if at all.

Would love to get that feature added to the SP shoutbox.

Any ideas?

Does it already exist and I just haven't found it?

I really have searched it.

THANKS!!!

Dan

homer09001 · « **Reply #1 on:** November 08, 2009, 08:23:27 AM »

I'll take a look tonight it should be easy enough to do.

I don't use the shoutbox on my site so can you tell me does it automatticaly update itself in the browser without reloading the page?

N.E.Media · « **Reply #2 on:** November 08, 2009, 09:46:37 AM »

Thank you very much!

And yes, updates are live - not just between refreshes.

Every time someone makes a new comment, a little tone would be great - makes you look.

Dan

homer09001 · « **Reply #3 on:** November 08, 2009, 11:42:53 AM »

Right not a problem like I said should be easy enough to do, I'm finished work in 2 hours so I'll take a look at the code this evening.

homer09001 · « **Reply #4 on:** November 08, 2009, 02:27:38 PM »

Forgot to add which version of SMF and SP are you using?

N.E.Media · « **Reply #5 on:** November 08, 2009, 04:04:08 PM »

Quote from: homer09001 on November 08, 2009, 02:27:38 PM

Forgot to add which version of SMF and SP are you using?

smf 1.1.10

SP 2.3.1

Thanks again!

Dan

homer09001 · « **Reply #6 on:** November 08, 2009, 04:43:29 PM »

right i've spent the last 2-3 hours and im at a total block so far, the only way i can think of doing this so far is to check the time that has elapsed since the last post was made, if it is within the last 10 seconds play the sound.

Now, i can work the elapsed time out, but i can't work it out every time the shoutbox reloads itself?

so if anyone else can help me here it would be a great help

Nathaniel · « **Reply #7 on:** November 08, 2009, 05:15:29 PM »

Find the code below in your '/Themes/default/portal.js' file:

Code: [Select]

setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);
I suggest that you put any code that plays the sound, straight after that code. Any code there, will be run whenever the shoutbox is updated and there is a new shout.

homer09001 · « **Reply #8 on:** November 08, 2009, 06:28:43 PM »

Quote from: Nathaniel on November 08, 2009, 05:15:29 PM

Find the code below in your '/Themes/default/portal.js' file:
Code: [Select]
setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);
I suggest that you put any code that plays the sound, straight after that code. Any code there, will be run whenever the shoutbox is updated and there is a new shout.

if i try to put any code after that part everytime i click the refresh icon on the shoutbox it take me to the history?

Nathaniel · « **Reply #9 on:** November 08, 2009, 11:17:50 PM »

That indicates that there is an error with the JS that is being run when that button is clicked. Can you post the code that you are trying to add there?

homer09001 · « **Reply #10 on:** November 09, 2009, 03:04:35 AM »

Doesn't matter sorry got it working so to speak, just trying to get the sound to play in the browser ATM rather than in media player?

Nathaniel · « **Reply #11 on:** November 09, 2009, 04:58:11 AM »

Basically, you were using the method which just passes the file straight to the browser right? That doesn't work as intended, I have had a go at this, using the SoundManager2 library to implement it so that it works properly.

I might package this up as a mod sometime, but for now, here are some instructions for adding this.

1) Download the attached archive, extract the files into your '/Themes/default/' folder.
2) Perform these edits to your '/Themes/default/portal.js' file.

Code: ("Find") [Select]

setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);

Code: ("Replace") [Select]

            setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);
            soundManager.play('refresh_shoutbox');

Code: ("Find") [Select]

shoutbox_indicator(shoutbox_id, false);

Code: ("Replace") [Select]

    var sp_date = new Date; // Generic JS date object
    var unixtime_ms = sp_date.getTime(); // Returns milliseconds since the epoch
    document.getElementById("last_refresh_" + shoutbox_id).value = parseInt(unixtime_ms / 1000);

    shoutbox_indicator(shoutbox_id, false);

3) Perform these edits to your '/Themes/default/PortalShoutbox.template.php' file.

Code: ("Find") [Select]

sp_refresh_shout(', $shoutbox['id'], ', 0);

Code: ("Replace") [Select]

sp_refresh_shout(', $shoutbox['id'], ', last_refresh_', $shoutbox['id'], '.value);

Code: ("Find") [Select]

<input type="hidden" name="shoutbox_id" value="', $shoutbox['id'], '" />

Code: (Replace) [Select]

        <input type="hidden" id="last_refresh_', $shoutbox['id'], '" value="', time(), '" />
        <input type="hidden" name="shoutbox_id" value="', $shoutbox['id'], '" />

Code: ("Find") [Select]

<script language="Javascript" type="text/javascript"><![CDATA[';

Code: ("Replace") [Select]

    <script type="text/javascript" src="', $settings['theme_url'], '/soundmanager.js"></script>
    <script language="Javascript" type="text/javascript"><!-- // --><![CDATA[
        var last_refresh_', $shoutbox['id'], ' = document.getElementById("last_refresh_', $shoutbox['id'], '");
        soundManager.url = \'', $settings['theme_url'], '/swf/\';
        soundManager.onload = function() 
        {
            soundManager.createSound(\'refresh_shoutbox\',\'', $settings['theme_url'], '/alert.mp3\');
        };';

Code: ("Find") [Select]

        var last_refresh_', $shoutbox['id'], ' = ', time(), ';
        function sp_auto_refresh_', $shoutbox['id'], '()
        {
            if (window.XMLHttpRequest)
            {
                sp_refresh_shout(', $shoutbox['id'], ', last_refresh_', $shoutbox['id'], ');
                last_refresh_', $shoutbox['id'], ' += ', $shoutbox['refresh'], ';

Code: ("Replace") [Select]

        function sp_auto_refresh_', $shoutbox['id'], '()
        {
            if (window.XMLHttpRequest)
            {
                sp_refresh_shout(', $shoutbox['id'], ', last_refresh_', $shoutbox['id'], '.value);

4) Lastly, you can change the 'alter.mp3' file, if you want. As long as its a .mp3 file it should work fine.

homer09001 · « **Reply #12 on:** November 09, 2009, 08:41:57 AM »

work perfect in SMF 2.0 RC 1.2 it should work perfect in 1.1.10 aswell as its only modifying SP and not smf?

I can package it up if you like?

Nathaniel · « **Reply #13 on:** November 09, 2009, 05:52:56 PM »

Go for it.

I tested it under SMF 1.1.10 only, but yes, its editing of SP code will mean that as long as you are running SP 2.3.1 it should work fine.

N.E.Media · « **Reply #14 on:** November 10, 2009, 02:31:32 PM »

Hmmmmm . . .

What did I do wrong?

I'm not new to manual parsing and editors - seemed simple enough.

The entry showed up OK (doesn't show here because I hit the screen-shot too soon).

Any ideas?

Dan

Nathaniel · « **Reply #15 on:** November 10, 2009, 03:49:48 PM »

That error indicates that the code which stops the refresh button from showing, is not being run, most likely because there is a javascript error somewhere.

Could you please attach you '/Themes/default/PortalShoutbox.template.php' and '/Themes/default/portal.js' files?

N.E.Media · « **Reply #16 on:** November 10, 2009, 04:14:25 PM »

I'm sorry, these are the un-altered files before the new code was attempted.

I had already done a restore.

Thank you for all the help!

Dan

Nathaniel · « **Reply #17 on:** November 10, 2009, 04:34:20 PM »

Try the attached files. Also make sure that you uploaded and extracted the contents of the package that I attached to my earlier post.

N.E.Media · « **Reply #18 on:** November 10, 2009, 04:48:23 PM »

Getting there!

Recycling problem stopped - still no sound though.

(yes, the speakers are on.

)

I wonder if I have the files exactly where they need to go?

I extracted the archive which of course, yielded a folder - I put the contents of the folder in the themes/default directory.

Dan

Nathaniel · « **Reply #19 on:** November 10, 2009, 04:51:48 PM »

Well, you should have these files:
/Themes/default/alert.mp3
/Themes/default/soundmanager.js

And this folder, with some .swf files in it:
/Themes/default/swf/

If you are using a Custom theme, then copy the files into your custom theme's directory as well.

Then the only requirement of the js, is that you have flash installed, although its most likely that you do have it installed.

N.E.Media · « **Reply #20 on:** November 10, 2009, 04:52:46 PM »

Contents of themes/default directory:

N.E.Media · « **Reply #21 on:** November 10, 2009, 04:54:30 PM »

AHA!

Custom theme folder.

I'm an idiot at times.

Can't believe I didn't think of that with all the other modifications I've had to do that with.

Dan

Nathaniel · « **Reply #22 on:** November 10, 2009, 04:57:50 PM »

So it works?

If you don't want to duplicate those files in your custom themes directory, then you could make the edit below.

Code: ("Find (/Themes/default/PortalShoutbox.template.php)") [Select]

    <script type="text/javascript" src="', $settings['theme_url'], '/soundmanager.js"></script>
    <script language="Javascript" type="text/javascript"><!-- // --><![CDATA[
        var last_refresh_', $shoutbox['id'], ' = document.getElementById("last_refresh_', $shoutbox['id'], '");
        soundManager.url = \'', $settings['theme_url'], '/swf/\';
        soundManager.onload = function() 
        {
            soundManager.createSound(\'refresh_shoutbox\',\'', $settings['theme_url'], '/alert.mp3\');
        };';

Code: ("Replace") [Select]

    <script type="text/javascript" src="', $settings['default_theme_url'], '/soundmanager.js"></script>
    <script language="Javascript" type="text/javascript"><!-- // --><![CDATA[
        var last_refresh_', $shoutbox['id'], ' = document.getElementById("last_refresh_', $shoutbox['id'], '");
        soundManager.url = \'', $settings['default_theme_url'], '/swf/\';
        soundManager.onload = function() 
        {
            soundManager.createSound(\'refresh_shoutbox\',\'', $settings['default_theme_url'], '/alert.mp3\');
        };';

N.E.Media · « **Reply #23 on:** November 10, 2009, 05:07:23 PM »

Perfect!!

Great new modification!

Thank you very much!

Dan

N.E.Media · « **Reply #24 on:** November 10, 2009, 05:20:24 PM »

Uh oh!

Sound only can be heard by person sending the shout.

Passive recipients hear nothing - it's the recipients that need the alert.

Sorry!

Ideas?

Dan

Nathaniel · « **Reply #25 on:** November 10, 2009, 05:28:57 PM »

The alert should sound whenever the shoutbox refreshes via javascript/Ajax and there is a new shout, ie. it will only sound if someone clicks the refresh button or you have the auto-refresh setting turned on and the shoutbox refreshes. If somebody reloads the entire page, it won't sound, although I suppose I could post some edits so that it worked like that as well.

N.E.Media · « **Reply #26 on:** November 10, 2009, 05:48:51 PM »

The Ajax shoutbox makes an instant alert when a new shout comes in, in real time without waiting for next refresh.

Any way to do that?

Thanks!

Dan

ginjack · « **Reply #27 on:** November 14, 2009, 12:31:19 AM »

would there be a way to make this code work for SMF 2.0 RC2 also?

Nathaniel · « **Reply #28 on:** November 14, 2009, 12:34:08 AM »

Quote from: ginjack on November 14, 2009, 12:31:19 AM

would there be a way to make this code work for SMF 2.0 RC2 also?

See homer09001's post, it should already work fine with SMF 2 RC2.

Quote from: N.E.Media on November 10, 2009, 05:48:51 PM

The Ajax shoutbox makes an instant alert when a new shout comes in, in real time without waiting for next refresh.

Any way to do that?

Thanks!

Dan

That would be far more complicated. The shutbox does not currently have a method of sending data from the server to the client without the clients browser request it. The best way of getting a similar effect would be to have the shoutbox set to auto-refresh.

N.E.Media · « **Reply #29 on:** November 14, 2009, 05:14:57 PM »

Thank you!

I actually figured that was the case.

Still not working as-is though.

Everything's in the right place - still no alert tone on incoming.

Thanks!

Dan

Nathaniel · « **Reply #30 on:** November 14, 2009, 05:34:18 PM »

Can you post a link to your website? I want to have a look at the issue. A temp regular member account would be useful as well.

N.E.Media · « **Reply #31 on:** November 14, 2009, 05:58:02 PM »

Quote from: Nathaniel on November 14, 2009, 05:34:18 PM

Can you post a link to your website? I want to have a look at the issue. A temp regular member account would be useful as well.

http://www.banjoholler.com/forum/index.php

User: Tester1

Password: 12345abc

Thanks!

Dan

tfs · « **Reply #32 on:** December 09, 2009, 12:40:05 AM »

Has anyone ever packaged this one up? I'm hesitant to make the edits by hand because I don't want to break update scripts when a new SP comes out.

Nathaniel · « **Reply #33 on:** December 09, 2009, 10:47:30 PM »

Quote from: tfs on December 09, 2009, 12:40:05 AM

Has anyone ever packaged this one up? I'm hesitant to make the edits by hand because I don't want to break update scripts when a new SP comes out.

It doesn't look like it, I will package it when I find the time, although its not too high on my current priorities list. If anyone else wants to package it first, then go for it.

tfs · « **Reply #34 on:** December 11, 2009, 12:04:05 AM »

Quote from: Nathaniel on December 09, 2009, 10:47:30 PM

It doesn't look like it, I will package it when I find the time, although its not too high on my current priorities list. If anyone else wants to package it first, then go for it.

Thanks Nathaniel. I'm looking forward to being able to give it a try. An audible beep is the thing I miss the most about AJAX Chat.

sattninja · « **Reply #35 on:** December 13, 2009, 03:39:43 PM »

hello i have sound working however like in previous posts it will only make a sound after i type something on my end basicle if i type i hear it then the person on the other end types i heasr nothing and see nothing they typed then if i type something else then it will show what they types i have refresh set to 0 which i believe is auto and i have tried changing that to like 1 second and then what happens is i typr something and here a series of sounds i love this mod but it just doesnt seem to work for me properly i am sorry is i didnt explain it well but please help me figure this out also at times if i close my browser and then reopen it and go to the shoutbox and type nothing shows up until i log out and log back in that may be related it just seems like i have a refresh issue

underfire · « **Reply #36 on:** December 26, 2010, 07:53:20 AM »

i don't have the "'/Themes/default/portal.js'" file :S

wiecher · « **Reply #37 on:** April 10, 2011, 05:50:05 PM »

I hope it can be done.

kimyaci · « **Reply #38 on:** April 24, 2011, 11:21:49 AM »

I wish it work with a button.Thanks.

beast · « **Reply #39 on:** December 30, 2011, 04:55:54 PM »

I wish a know nothing guy like me could do all this. I would crash my site in a heart beat. Is there something a guy like me could use to have the sound on the shout box or how much would someone charge me to do this

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: Audible alert sound in ShoutBox. (Read 33202 times)

wiecher