Using Sound Notifications

by timberella October 5th 2020, 10:13 pm

I would like to install a sound notification using this tutorial.
https://help.forumotion.com/t157012-sound-notifications

I have a sound that I'd like to use for the sound notification, but I don't know where I can upload it to use it. Is there a place within the Admin Panel for uploading sounds?

My forum is phpBB3.

by **skouliki** October 5th 2020, 10:27 pm

Hello

What file type is your sound;

by timberella October 5th 2020, 11:21 pm

I have both .wav and .mp3.

by **SLGray** October 6th 2020, 1:44 am

You add your sound in this part of the template coding:

Code:: <audio id="sound"> <source src="you_sound"/> </audio>

It replaces the part that says your sound.

Use the mp3 one.

by timberella October 6th 2020, 3:40 am

Thank you for the code.

The sound file is on my computer. I don't know where to upload it.

Can I upload a sound file in the Admin Panel?

by **SLGray** October 6th 2020, 4:26 am

Maybe this: https://www.mailboxdrive.com/

by **skouliki** October 6th 2020, 11:07 am

i use this to upload or record vocaroo.com

by timberella October 6th 2020, 7:49 pm

@SLGray @skouliki Thank you for the links. I was able to get my sound uploaded.

Going back to the tutorial: https://help.forumotion.com/t157012-sound-notifications

I found the <head> line in the code, but I do not have <body> in my overall_header template.

Also, is this code supposed to add a bell icon to the toolbar as in the tutorial screenshot? Yesterday, when I installed only the Javascript, I saw text on the toolbar not the bell icon and I'd like the bell icon to appear as in the screenshot.

by **SLGray** October 6th 2020, 9:05 pm

Please post your template here using the code tags.

by timberella October 6th 2020, 11:53 pm

@SLGray, is this what you mean?

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/>  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> {RICH_SNIPPET_GOOGLE}  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/> <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch (tickerDirParam) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function () { $('#fa_ticker_content').css('display', 'block'); var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); if (width_max > 0) { $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); if (slid_vert) { var height_max = h_perso; $('ul#fa_ticker_content li').each(function () { if ($(this).height() > height_max) { height_max = $(this).height(); } }); $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto'); $('ul#fa_ticker_content li').height(height_max); } $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display', 'none'); $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function () {  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if (pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if (report != null) { report.focus(); }   $(document).ready(function () { Ticker.start({ height: {switch_ticker.HEIGHT}, spacing: {switch_ticker.SPACING}, speed: {switch_ticker.SPEED}, direction: '{switch_ticker.DIRECTION}', pause: {switch_ticker.STOP_TIME} }); });  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready(function () { $(window).resize(function () { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth / 2 - popupWidth / 2 }); }); });  //]]> </script> {GREETING_POPUP} <style type="text/css"> #page-footer, div.navbar, div.navbar ul.linklist { display: block !important; } ul.linklist li.rightside, ul.linklist li.rightside a.copyright { display: inline !important; }  .jcarousel-skin-tango .jcarousel-item { text-align: center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }  </style> {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ (function (i, s, o, g, r, a, m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)}, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) }) (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', '{G_ANALYTICS_ID}', 'auto'); ga('send', 'pageview'); ga('set', 'anonymizeIp', true);  ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis'); ga('bis.send', 'pageview'); ga('bis.set', 'anonymizeIp', true);  //]]> </script>  </head> <body id="phpbb">  <div id="hitskin_preview" style="display: block;"> <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br/> <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> {LOGIN_POPUP_MSG} <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/> </form> </div> </div>   <div id="like_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> {LIKE_POPUP_MSG} <div id="like_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/> </form> </div> </div>  <div class="conteneur_minwidth_IE"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <a id="top" name="top" accesskey="t"></a> {JAVASCRIPT} <div id="page-header"> <div class="headerbar"> <div class="inner"><span class="corners-top"><span></span></span> <div id="logo-desc"> <a href="{U_INDEX}" id="logo"><img loading="lazy" src="{LOGO}" alt="{L_INDEX}"/></a>  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>   <p>{switch_desc.SITE_DESCRIPTION}</p>  </div> <span class="corners-bottom"><span></span></span></div> </div> <div class="navbar"> <div class="inner"><span class="corners-top"><span></span></span> <ul class="linklist navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul>  <div id="search-box"> <form method="get" action="{ACTION_SEARCH}" id="search"> <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';"/> {JS_SESSION_ID_INPUT} <input class="button2" type="submit" value="{L_SEARCH}"/></p> </form> </div>  <span class="corners-bottom"><span></span></span></div> </div>  <div id="fa_ticker_blockD" style="margin-top:4px;"> <div class="module"> <div class="inner"> <span class="corners-top"><span></span></span> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> <span class="corners-bottom"><span></span></span> </div> </div> </div>   <div id="fa_ticker_block" style="margin-top:4px;"> <div class="module"> <div class="inner"> <span class="corners-top"><span></span></span> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> <span class="corners-bottom"><span></span></span> </div> </div> </div>  </div> <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="container"> <div id="content"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="main"> <div id="main-content">

by **SLGray** October 7th 2020, 3:10 am

Maybe it is this?

Code:: <body id="phpbb">

by timberella October 7th 2020, 5:26 am

@SLGray, that may be it, I'll try that.

Okay, so I added the two lines of code into the overall_header template. Then I installed the Javascript. I sent a PM to myself to test, and I do NOT see a bell icon as is shown in the tutorial screenshot. I see text on my toolbar where a bell image appears in the tutorial screenshot.
https://help.forumotion.com/t157012-sound-notifications

Do I at least have the code correct for the sound?

Code:: <audio id="sound"><source src="https://voca.ro/14ZDn6DdNV2R"/></audio>

by **SLGray** October 7th 2020, 8:43 am

Well, did you hear the sound when you tested it?

Question, did you read this?

This may have problems if you have made a lot of change to your templates.

by **Ape** October 7th 2020, 6:29 pm

I know it sounds silly but did you publish your Templates ?

by timberella October 7th 2020, 9:52 pm

@SLGray, there are hardly any changes to the templates. And no, I didn't hear any sound.

@Ape, that's a good question. I saved the changes, but I don't know if I published it, so I will go back and check that.

Edit: No, I hadn't published the template, but I just did. The bell icon shows on the toolbar and displays as in the tutorial screenshot.

I am hearing the sound now so that is all good.

The problem I'm having now is that I hear the sound, but I do not receive the notification on my toolbar until I refresh my page. Any suggestions for getting the toolbar to refresh itself so that I don't have to refresh my page?

by **Ape** October 8th 2020, 3:06 am

Sadly The Notifications Don't show up until you refresh and right now there is no way to fix that.
I think this was reported before but right now it's something we have to live with.

I am glad you got the bell and the sound to work now.

If the main problem is solved please scroll to the top of the page and mark it solved.

Regards.

Ape

by timberella October 8th 2020, 5:01 am

@Ape, thank you for the info about the Notifications not showing up. I had noticed it stopped working and didn't know why. I'll wait and hope it gets fixed one day.

Thanks for all your help. I'll mark the topic solved.

Thanks for your help, @SLGray.