webm audio

index.html

@@ -7,7 +7,7 @@
 <link rel="stylesheet" href="static/css/jquery-ui.min.css">
 <link rel="stylesheet" href="static/css/bootstrap.min.css">
 <link rel="stylesheet" href="static/css/style.css">
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
+<link rel="stylesheet" href="static/css/fontawesome.css" crossorigin="anonymous">
 <script src="static/js/jquery-3.5.1.min.js"></script>
 <script src="static/js/jquery-ui.min.js"></script>
 <script src="static/js/bootstrap.min.js"></script>
@@ -23,20 +23,15 @@
   <div class="col-md-9" style="position: static;">
     <div class="row">
       <div class="col-md-12">
-        <div class="play-stop">
+
-          <div id="tracktime">0:0 / 22:39</div>
-          <a id="mBtn" onclick="PSFunction()">(Play)</a>
-          <button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
-          <button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
-        </div>
      <div class="main_audio">
-       <audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
+       <audio controls id='audioBG'>
-       <source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
+       <source src="static/audio/output.webm" type="audio/mpeg">
            Your browser does not support the audio tag.
          </audio>
     </div>
     <div class="map_legend">
-    <div id="box1" onclick="popup_bg(120)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
+    <div id="box1" onclick="popup_bg(10)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
     <div id="box2" onclick="popup_bg(300)"><i class="fas fa-play"></i></div><p>Islamic Mysticism</p>
     <div id="box3" onclick="popup_bg(500)"><i class="fas fa-play"></i></div> <p>Contemporary poets</p>
     <div id="box4" onclick="popup_bg(700)"><i class="fas fa-play"></i></div> <p>Contemporary musicians</p>
@@ -118,29 +113,14 @@ Technical details: We have built the visualization from scratch using a javascri
 </div>
 
 <!-- scripts for mouse events -->
-<script>
-  var audio = document.getElementById("audioBG");
-  var btn = document.getElementById("mBtn");
-
-  function PSFunction() {
-    if (audio.paused) {
-      audio.play();
-      btn.innerHTML = "(Pause)";
-    } else {
-      audio.pause();
-      btn.innerHTML = "(Play)";
-    }
-  }
-</script>
 
 <script>
 function popup_bg(time) {
   var box = document.getElementById("audioBG");
-  console.log(time);
+    if (box.paused) {
-  box.currentTime = time;
+      box.play();
-  box.play();
+};
-  btn.innerHTML = "(Pause)";
+    box.currentTime = time;
-
 };
 </script>
 

static/css/style.css

@@ -296,9 +296,6 @@ h2 {
     cursor: pointer;
 }
 
-.play-stop:hover {
-  color: #cdcec9;
-}
 
 /* circles */