Add stop button

index.html

@@ -19,7 +19,7 @@
             </button>
           </div>
         </div>
-        <div class="row mb-3" style="height: 40vh">
+        <div class="row mb-3" style="height: 35vh">
           <div class="col-6">
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-a.mp3')" class="btn btn-secondary text-center w-100 h-100">
               <h3>
@@ -40,7 +40,7 @@
             </button>
           </div>
         </div>
-        <div class="row mb-3" style="height: 40vh">
+        <div class="row mb-3" style="height: 35vh">
           <div class="col-6">
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-c.mp3')" class="btn btn-secondary text-center w-100 h-100">
               <h3>
@@ -62,6 +62,17 @@
             </button>
           </div>
         </div>
+        <div class="row mb-3">
+          <div class="col-12">
+            <button onclick="stopSound()" class="btn btn-secondary text-center w-100 h-100">
+              <h1>
+                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-stop-fill" viewBox="0 0 16 16">
+                  <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5"></path>
+                </svg>
+              </h1>
+            </button>
+          </div>
+        </div>
       </div>
     </main>
     <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
@@ -70,11 +81,13 @@
       function fullScreen() {
         document.body.requestFullscreen();
       }
-      function playSound(filename) {
-        fullScreen();
+      function stopSound() {
         if (window.sound) {
           window.sound.pause();
         }
+      }
+      function playSound(filename) {
+        stopSound();
         window.sound = new Audio('audio/'+filename);
         window.sound.play();
       }