test to play and stop bg audio when clicking somewhere else didnt work

static/css/style.css

@@ -48,6 +48,17 @@
 
 }
 
+/* Audio in background */
+.audio-button {
+  background: white;
+}
+
+.audio-button:hover {
+background: grey;
+cursor: pointer;
+}
+
+
 /* Node styling */
 
 #ahmed text {

static/js/d3_map.js

@@ -108,9 +108,9 @@ d3.json("/static/js/group1.json", function(error, json) {
       var dada = document.getElementById("textdadaloglu");
       dada.className += " active";
       dada.scrollIntoView();
-      var audio1 = document.getElementById("audio-1");
+      var audio1 = document.getElementById("audioBG");
       audio1.currentTime = 12;
-      // audio1.play();
+      audio1.play();
     });
 
 
@@ -120,12 +120,12 @@ d3.json("/static/js/group1.json", function(error, json) {
     var muh = document.getElementById("textasikA");
     muh.className += " active";
     muh.scrollIntoView();
-    var audio2 = document.getElementById("audio-1");
+    var audio2 = document.getElementById("audioBG");
-    audio2.currentTime = 50;
+    audio2.currentTime = 120;
-    // audio2.play();
+    audio2.play();
     });
 
-//pop-up
+//stop events when clicking somewhere else
   $(document).click(function (e) {
     if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
         $("#showdadaloglu").fadeOut();
@@ -135,10 +135,12 @@ d3.json("/static/js/group1.json", function(error, json) {
       };
     if (!$(e.target).parents().andSelf().is('#asikA')) {
       $("#showasikA").fadeOut();
-        $("audioasikA").trigger('pause');
+        $("#audioasikA").trigger('pause');
         var textmuh = document.getElementById("textasikA");
         textmuh.classList.remove("active");
     };
+
   });
 
+
 });

templates/hello.html

@@ -40,12 +40,13 @@
 <div class="row">
   <div class="col-md-12">
     <div class="play-stop">
-      <div id="tracktime">0 / 0</div>
+      <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='audio1' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (currentTime - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration);">
+   <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);">
    <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
      </audio>
@@ -56,25 +57,7 @@
 </div>
 <!-- scripts for mouse events -->
 <script>
-// function popup(d) {
+  var audio = document.getElementById("audioBG");
-// $(d).click(function(){
-//     $("#show1").fadeIn()
-//     console.log("around")
-//  })};
-
-
-
-  // function scrolldiv() {
-  //   var elem = document.getElementById("ele");
-  //   elem.scrollIntoView();
-  // }
-
-  // function play() {
-  //   var audio = document.getElementById("audio-1");
-  //   audio.currentTime = 12;
-  //   audio.play();
-  // }
-  var audio = document.getElementById("audio1");
   var btn = document.getElementById("mBtn");
 
   function PSFunction() {