Merge pull request #1197 from nepalivai/sound

Added mute button.

audio.js

@@ -0,0 +1,43 @@
+var nyan = document.getElementById("nyan");
+var nyanBtn = document.getElementById("nyan-btn");
+
+function playPause(song) {
+  if (song.paused && song.currentTime >= 0 && !song.ended) {
+    song.play();
+  } else {
+    song.pause();
+  }
+}
+
+function reset(btn, song) {
+  if (btn.classList.contains("playing")) {
+    btn.classList.toggle("playing");
+  }
+  song.pause();
+  song.currentTime = 0;
+}
+
+function progress(btn, song) {
+  setTimeout(function () {
+    var end = song.duration;
+    var current = song.currentTime;
+    var percent = current / (end / 100);
+    //check if song is at the end
+    if (current == end) {
+      reset(btn, song);
+    }
+    //set inset box shadow
+    btn.style.boxShadow =
+      "inset " +
+      btn.offsetWidth * (percent / 100) +
+      "px 0px 0px 0px rgba(0,0,0,0.125)";
+    //call function again
+    progress(btn, song);
+  }, 1000);
+}
+
+nyanBtn.addEventListener("click", function () {
+  nyanBtn.classList.toggle("playing");
+  playPause(nyan);
+  progress(nyanBtn, nyan);
+});

index.html

@@ -82,7 +82,15 @@
                             </script>
                             <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
                             </li>
-                        </div>
+                        </div>                        
+                        <li>
+                            <audio id="nyan" src="./sound/naruto.mp3" preload="metadata" type="audio/mpeg">
+                                Your browser does not support the audio element.
+                             </audio>
+                             <a class="btn" id="nyan-btn">play / pause <img src="./adi image/sound.png" class="soundicon">
+                                <script src="./audio.js"></script>
+                             </a>
+                        </li>
                     </ul>
 
                 </div>
@@ -3441,9 +3449,6 @@ <h1>Our Valuable Contributors</h1>
         </div>
         <script src="contributors.js"></script>
 
-
-        <audio src="./sound/naruto.mp3"></audio>
-
         <footer class="footer">
             Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
                     Singh</u></span> | ©

style.css

@@ -928,3 +928,37 @@ ul.navbar-nav.mr-auto {
 .footer span {
   text-decoration: underline;
 }
+
+.btn {
+  cursor: pointer;
+  display: inline-block;
+  background: #94a657;
+  border-radius: 4px;
+  color: #fff;
+  text-transform: uppercase;
+  line-height: 20px;
+  @include transition(box-shadow 0.25s ease);
+  &:after {
+    content: "";
+    display: inline-block;
+    color: #94a657;
+    background: #fff;
+    font-family: "FontAwesome";
+    padding: 3px;
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+    margin-left: 8px;
+    padding-left: 4.5px;
+    padding-right: 1.5px;
+  }
+  &.playing {
+    &:after {
+      padding: 3px;
+    }
+  }
+}
+.soundicon {
+  width: 25px;
+  padding: 0px;
+}