Using Sound Notifications Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    Using Sound Notifications

    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°1

    Solved Using Sound Notifications

    Post 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.


    Last edited by timberella on October 8th 2020, 5:01 am; edited 1 time in total
    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15383
    Reputation : 1709
    Language : English,Greek
    Location : Greece
    • Post n°2

    Solved Re: Using Sound Notifications

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

    Hello

    What file type is your sound;

    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°3

    Solved Re: Using Sound Notifications

    Post by timberella October 5th 2020, 11:21 pm

    I have both .wav and .mp3.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51552
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°4

    Solved Re: Using Sound Notifications

    Post 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.



    Using Sound Notifications Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°5

    Solved Re: Using Sound Notifications

    Post 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?
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51552
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°6

    Solved Re: Using Sound Notifications

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




    Using Sound Notifications Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15383
    Reputation : 1709
    Language : English,Greek
    Location : Greece
    • Post n°7

    Solved Re: Using Sound Notifications

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

    i use this to upload or record vocaroo.com

    TonnyKamper likes this post

    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°8

    Solved Re: Using Sound Notifications

    Post 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.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51552
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°9

    Solved Re: Using Sound Notifications

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

    Please post your template here using the code tags.



    Using Sound Notifications Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°10

    Solved Re: Using Sound Notifications

    Post 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"/>
       <!-- BEGIN switch_compat_meta -->
       <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
       <!-- END switch_compat_meta -->
       <!-- BEGIN switch_canonical_url -->
       <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
       <!-- END switch_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>
       <!-- BEGIN switch_recent_jquery -->
       <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>
       <!-- END switch_recent_jquery -->
       <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
       {RICH_SNIPPET_GOOGLE}

       <!-- BEGIN switch_fb_login -->
       <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>
       <!-- END switch_fb_login -->

       <!-- BEGIN switch_ticker -->
       <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
       <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
       <!-- END switch_ticker -->

       <!-- BEGIN switch_ticker_new -->
       <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>
       <!-- END switch_ticker_new -->

       <script type="text/javascript">//<![CDATA[
          $(document).ready(function () {
             <!-- BEGIN switch_enable_pm_popup -->
             pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
             if (pm != null) {
                pm.focus();
             }
             <!-- END switch_enable_pm_popup -->
             <!-- BEGIN switch_report_popup -->
             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();
             }
             <!-- END switch_report_popup -->
             <!-- BEGIN switch_ticker -->
             $(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}
                });
             });
             <!-- END switch_ticker -->
          });

          <!-- BEGIN switch_login_popup -->
          var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
             logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
          <!-- END switch_login_popup -->

          <!-- BEGIN switch_login_popup -->
          $(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
                });
             });
          });
          <!-- END switch_login_popup -->
          //]]>
       </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;
          }

          <!--
          BEGIN switch_ticker_new

          -->
          .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;
          }

          <!--
          END switch_ticker_new

          -->
       </style>
       {HOSTING_JS}
       <!-- BEGIN google_analytics_code -->
       <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);

          <!-- BEGIN google_analytics_code_bis -->
          ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
          ga('bis.send', 'pageview');
          ga('bis.set', 'anonymizeIp', true);
          <!-- END google_analytics_code_bis -->
          //]]>

       </script>
       <!-- END google_analytics_code -->
    </head>

    <body id="phpbb">
    <!-- BEGIN hitskin_preview -->
    <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>
    <!-- END hitskin_preview -->

    <!-- BEGIN switch_login_popup -->
    <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>
    <!-- END switch_login_popup -->

    <!-- BEGIN switch_like_popup -->
    <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>
    <!-- END switch_like_popup -->

    <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>
                            <!-- BEGIN switch_h1 -->
                            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
                            <!-- END switch_h1 -->
                            <!-- BEGIN switch_desc -->
                            <p>{switch_desc.SITE_DESCRIPTION}</p>
                            <!-- END switch_desc -->
                         </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>

                         <!-- BEGIN switch_search_box -->
                         <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>
                         <!-- END switch_search_box -->

                         <span class="corners-bottom"><span></span></span></div>
                   </div>

                   <!-- BEGIN switch_ticker_new -->
                   <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">
                                  <!-- BEGIN ticker_row -->
                                  <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                  <!-- END ticker_row -->
                               </ul>
                            </div>
                            <span class="corners-bottom"><span></span></span>
                         </div>
                      </div>
                   </div>
                   <!-- END switch_ticker_new -->

                   <!-- BEGIN switch_ticker -->
                   <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">
                                     <!-- BEGIN ticker_row -->
                                     <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                     <!-- END ticker_row -->
                                  </div>
                               </div>
                            </div>
                            <span class="corners-bottom"><span></span></span>
                         </div>
                      </div>
                   </div>
                   <!-- END switch_ticker -->
                </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}">
                                     <!-- BEGIN giefmod_index1 -->
                                     {giefmod_index1.MODVAR}
                                     <!-- BEGIN saut -->
                                     <div style="height:{SPACE_ROW}px"></div>
                                     <!-- END saut -->
                                     <!-- END giefmod_index1 -->
                                  </div>

                                  <div id="main">
                                     <div id="main-content">
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51552
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°11

    Solved Re: Using Sound Notifications

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

    Maybe it is this?
    Code:
    <body id="phpbb">



    Using Sound Notifications Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°12

    Solved Re: Using Sound Notifications

    Post 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>
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51552
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°13

    Solved Re: Using Sound Notifications

    Post 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.



    Using Sound Notifications Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19432
    Reputation : 2010
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°14

    Solved Re: Using Sound Notifications

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

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



    Using Sound Notifications Left1212Using Sound Notifications Center11Using Sound Notifications Right112
    Using Sound Notifications Ape_b110
    Using Sound Notifications Ape1010
    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°15

    Solved Re: Using Sound Notifications

    Post 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?
    • Back to top
    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19432
    Reputation : 2010
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°16

    Solved Re: Using Sound Notifications

    Post 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



    Using Sound Notifications Left1212Using Sound Notifications Center11Using Sound Notifications Right112
    Using Sound Notifications Ape_b110
    Using Sound Notifications Ape1010
    • Back to top
    timberella
    timberella
    timberella
    Forumember


    Female Posts : 111
    Reputation : 5
    Language : English
    • Post n°17

    Solved Re: Using Sound Notifications

    Post 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.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51552
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°18

    Solved Re: Using Sound Notifications

    Post by SLGray October 8th 2020, 5:23 am

    You're welcome.
    Problem solved & topic archived.
    Please read our forum rules:  ESF General Rules



    Using Sound Notifications Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top