So I Received feedback through GitHub

Well, I was amazed to receive some feedback through GitHub regarding a post I made regarding prose.io from Phlow. As a side project and to allow comments, I have decided to add Disqus to this website and include as a step by step guide - just in case it’s tricky…so, what is Disqus?.

Step 1: Add Disqus to your site

Once you have found an unique username and entered your email, Disqus will ask for your site details.

Add Disqus to your site

Step 2: Choose your Platform

The list of platforms are :

  • Universal Code
  • Wordpress
  • Blogger
  • Tumblr
  • Squarespace
  • TypePad
  • MovableType
  • Drupal
  • Joomla

As my site is static, I’ve chosen Universal Code Disqus choose your platform

Step 3: Disqus Setup Instructions.. for Universal Code

  1. Place the following code where you’d like Disqus to load
  2. Edit the RECOMMENDED CONFIGURATION VARIABLES section using your CMS or platform’s dynamic values (I will come back to this)
  3. How to display comment count..
  4. Additional customization…. Disqus setup instructions

Step 4: Add the Disqus code to my post pages

In my post.html after the closing article tag, I’ve added the Disqus code:

  <article class="post-content">
    <div class="post">

  <header class="post-header">
    <h1 class="post-title">Toggle Play and Pause on Multiple Audio Files by Clicking Areas on an Image Map</h1>
    <p class="post-meta">Nov 28, 2015 ✎ hywel • HTML5 image map jQuery audio area play pause </p>
  </header>

  
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AD_1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1549458855743321"
     data-ad-slot="1003055495"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
  


  <article class="post-content">
    <h2 id="playing-audio-files-without-a-player">Playing Audio Files Without a Player</h2>

<p>There are many solutions available for playing audio, one of my favorites was the Yahoo Media Player.  HTML5 introduced the <a href="https://en.wikipedia.org/wiki/HTML5_Audio">audio tag</a>, which is widely supported.  There are also several <a href="https://en.wikipedia.org/wiki/JQuery">jQuery</a> media players for websites including <a href="http://jplayer.org/">jplayer</a>.</p>

<p>I wanted to add a bit of fun to a website by allowing users to play audio by clicking on objects in an image.  I know that this is not new, but I have not found any resource that ties up creating an image map linked to multiple areas and audio, controlled using jQuery.</p>

<h2 id="mapping-areas-in-an-image---being-responsive">Mapping Areas in an Image - Being Responsive</h2>

<p>The fist step was to create defined areas in an image that could be clicked.  The co-ordinates of the areas also needed to be recalculated when viewed on different screen sizes, so that the clickable area is correctly updated.</p>

<p>There were four audio samples, each to be mapped to four objects.  I tried calculating the co-ordinates of the objects manually, but in the end decided to find an app.</p>

<p>There are several choices available, some are polished and have several functions such as <a href="http://www.coffeecup.com/image-mapper/">coffee cup</a>, but as I only wanted a basic map I found this simple, effective <a href="http://www.maschek.hu/imagemap/imgmap">Online Image Map Editor</a> by Adam Maschek.    I chose a simple rectangle shape for the area co-ordinates.  Here’s the finished HTML:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"http://victoriancarolsingershire.uk/images/Victorian Carol Singers Colourful Dresses and Top Hats.jpg"</span> <span class="na">class=</span><span class="s">"entry-feature-image"</span> <span class="na">alt=</span><span class="s">"London's Premier Victorian Carolers"</span> <span class="na">usemap=</span><span class="s">"#my_image"</span> <span class="na">style=</span><span class="s">"margin-top:0;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;audio</span> <span class="na">id=</span><span class="s">"sound1"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;source</span> <span class="na">src=</span><span class="s">"http://victoriancarolsingershire.uk/audio/joy to the world.mp3"</span> <span class="na">type=</span><span class="s">"audio/mpeg"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/audio&gt;</span>
<span class="nt">&lt;audio</span> <span class="na">id=</span><span class="s">"sound2"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;source</span> <span class="na">src=</span><span class="s">"http://victoriancarolsingershire.uk/audio/jingle bells.mp3"</span> <span class="na">type=</span><span class="s">"audio/mpeg"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/audio&gt;</span>
<span class="nt">&lt;audio</span> <span class="na">id=</span><span class="s">"sound3"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;source</span> <span class="na">src=</span><span class="s">"http://victoriancarolsingershire.uk/audio/silent night short.mp3"</span> <span class="na">type=</span><span class="s">"audio/mpeg"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/audio&gt;</span>
<span class="nt">&lt;audio</span> <span class="na">id=</span><span class="s">"sound4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;source</span> <span class="na">src=</span><span class="s">"http://victoriancarolsingershire.uk/audio/deck the halls.mp3"</span> <span class="na">type=</span><span class="s">"audio/mpeg"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/audio&gt;</span>
<span class="nt">&lt;map</span> <span class="na">name=</span><span class="s">"my_image"</span> <span class="na">id =</span><span class="s">"my_image"</span><span class="nt">&gt;</span>
<span class="nt">&lt;area</span> <span class="na">shape=</span><span class="s">"rect"</span> <span class="na">coords=</span><span class="s">"408,556,660,996"</span> <span class="na">id=</span><span class="s">"area1"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;area</span> <span class="na">shape=</span><span class="s">"rect"</span> <span class="na">coords=</span><span class="s">"880,552,1096,852"</span> <span class="na">id=</span><span class="s">"area2"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;area</span> <span class="na">shape=</span><span class="s">"rect"</span> <span class="na">coords=</span><span class="s">"1120,428,1360,732"</span> <span class="na">id=</span><span class="s">"area3"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;area</span> <span class="na">shape=</span><span class="s">"rect"</span> <span class="na">coords=</span><span class="s">"1712,544,2444,1160"</span> <span class="na">id=</span><span class="s">"area4"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/map&gt;</span></code></pre></figure>

<p>There is the image with the usemap=”#my_image”, the four HTML5 audio files along with the map of areas and their co-ordinates.</p>

<p>In order for the image map to be responsive by recalculating the area coordinates to match the actual image size  I need an image map re-sizer.  Note that some <a href="http://stackoverflow.com/questions/28872555/image-map-is-not-working-on-chrome-for-ios">re-sizers are not compatible with Chrome on iOS</a>.  I’m using <a href="https://github.com/davidjbradshaw/image-map-resizer"> imageMapResizer</a> by David Bradshaw.</p>

<p>In my page scripts, as well as loading the jQuery files, these are included;</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://www.hywel.me/assets/js/imagemapresizer/imageMapResizer.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="nt">&gt;</span><span class="nx">imageMapResize</span><span class="p">();</span><span class="nt">&lt;/script&gt;</span></code></pre></figure>

<h2 id="using-jquery-to-control-the-audio">Using jQuery to Control the Audio</h2>

<p>The controls I wanted to achieve were to play or pause the audio on click of object and pause any other audio that may be playing.  This script was placed in a file called audioplay.js:</p>

<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">"map[name=my_image] area"</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//$("#my_image area").on('click', function () {</span>
<span class="kd">var</span> <span class="nx">$this</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
 <span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="nx">$this</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/area/</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'audio'</span><span class="p">),</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
   <span class="k">this</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>
<span class="p">});</span>

    <span class="nx">$this</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">$this</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">)){</span>
        <span class="nx">$this</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">'pause'</span><span class="p">);</span>
      <span class="nx">$</span><span class="p">(</span><span class="s1">'audio[id^="sound"]'</span><span class="p">)[</span><span class="nx">id</span><span class="o">-</span><span class="mi">1</span><span class="p">].</span><span class="nx">play</span><span class="p">();</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">$this</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">'play'</span><span class="p">);</span>
      <span class="nx">$</span><span class="p">(</span><span class="s1">'audio[id^="sound"]'</span><span class="p">)[</span><span class="nx">id</span><span class="o">-</span><span class="mi">1</span><span class="p">].</span><span class="nx">pause</span><span class="p">();</span>
    <span class="p">}</span>
<span class="p">});</span></code></pre></figure>

<p>this was then was called from the page</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"http://victoriancarolsingershire.uk/assets/js/audioplay.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<p>Thanks to the following resources for their inspiration:</p>

<p><a href="http://stackoverflow.com/questions/31430502/jquery-toggle-play-pause-button-multiple-audios">Toggle play pause of multiple audios</a></p>

<p><a href="http://stackoverflow.com/questions/10978103/determine-which-area-in-a-map-imagemap-was-clicked-using-javascript-or-jquery">Determine which area was clicked</a></p>

<p><a href="http://stackoverflow.com/questions/9283656/stopping-html5-audio">Stopping all audio playing</a></p>

<p>That’s it, the final result can be found at <a href="http://www.victoriancarolsingershire.uk/">Victorian Carol Singers Hire UK</a>.</p>

  </article>

  <b> Copyright © 2017 Hywel John Llewellyn </b>
<!-- Hywel Start Disqus Comments -->
  <div id="disqus_thread"></div>
  <script>
      /**
       *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
       *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
       */
      var disqus_config = function () {
          this.page.url =  "https://www.hywel.me/jekyll/static/site/2015/11/28/toggle-play-and-pause-on-multiple-audio-files-by-clicking-areas-on-an-image-map.html";  // Replace PAGE_URL with your page's canonical URL variable

          //this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };

      (function() {  // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');

          s.src = '//hywelme.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
      })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
<!-- Hywel End Disqus Comments -->

</div>

  </article>

<!-- Hywel Start Disqus Comments -->
  <div id="disqus_thread"></div>
  <script>
      /**
       *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
       *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
       */
      var disqus_config = function () {
          this.page.url =  "https://www.hywel.me/static/site/2015/12/06/adding-a-comment-system-to-a-jekyll-static-site-with-disqus.html";  // Replace PAGE_URL with your page's canonical URL variable

          //this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };

      (function() {  // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');

          s.src = '//hywelme.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
      })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
<!-- Hywel End Disqus Comments -->

</div>

Note that I used the canonical URL variable as defined in Jekyll’s head.html

  <link rel="canonical" href="https://www.hywel.me/static/site/2015/12/06/adding-a-comment-system-to-a-jekyll-static-site-with-disqus.html">

Here is a link to my post.html file on GitHub

###Step 5: Check that the comments are shown.. Disqus comments on hywel.me