Topic: Audible alert sound in ShoutBox.

[N.E.Media]

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]

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]

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]

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]

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

[N.E.Media]

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

smf 1.1.10

SP 2.3.1


Thanks again!

Dan

[homer09001]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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.