ソースを参照

Add stop button

master
The Dod 2週間前
親
コミット
b1722ea5f4
1個のファイルの変更、17行の追加、4行の削除
  1. 17
    4
      index.html

+ 17
- 4
index.html ファイルの表示

19
             </button>
19
             </button>
20
           </div>
20
           </div>
21
         </div>
21
         </div>
22
-        <div class="row mb-3" style="height: 40vh">
22
+        <div class="row mb-3" style="height: 35vh">
23
           <div class="col-6">
23
           <div class="col-6">
24
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-a.mp3')" class="btn btn-secondary text-center w-100 h-100">
24
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-a.mp3')" class="btn btn-secondary text-center w-100 h-100">
25
               <h3>
25
               <h3>
40
             </button>
40
             </button>
41
           </div>
41
           </div>
42
         </div>
42
         </div>
43
-        <div class="row mb-3" style="height: 40vh">
43
+        <div class="row mb-3" style="height: 35vh">
44
           <div class="col-6">
44
           <div class="col-6">
45
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-c.mp3')" class="btn btn-secondary text-center w-100 h-100">
45
             <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-c.mp3')" class="btn btn-secondary text-center w-100 h-100">
46
               <h3>
46
               <h3>
62
             </button>
62
             </button>
63
           </div>
63
           </div>
64
         </div>
64
         </div>
65
+        <div class="row mb-3">
66
+          <div class="col-12">
67
+            <button onclick="stopSound()" class="btn btn-secondary text-center w-100 h-100">
68
+              <h1>
69
+                <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">
70
+                  <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>
71
+                </svg>
72
+              </h1>
73
+            </button>
74
+          </div>
75
+        </div>
65
       </div>
76
       </div>
66
     </main>
77
     </main>
67
     <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
78
     <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
70
       function fullScreen() {
81
       function fullScreen() {
71
         document.body.requestFullscreen();
82
         document.body.requestFullscreen();
72
       }
83
       }
73
-      function playSound(filename) {
74
-        fullScreen();
84
+      function stopSound() {
75
         if (window.sound) {
85
         if (window.sound) {
76
           window.sound.pause();
86
           window.sound.pause();
77
         }
87
         }
88
+      }
89
+      function playSound(filename) {
90
+        stopSound();
78
         window.sound = new Audio('audio/'+filename);
91
         window.sound = new Audio('audio/'+filename);
79
         window.sound.play();
92
         window.sound.play();
80
       }
93
       }

読み込み中…
キャンセル
保存