Handle audio context issue with a click to start button

debugger22 · debugger22 · commit 708e4df1fcf8 · 2023-01-18T17:24:04.000+05:30
diff --git a/app/index.html b/app/index.html
@@ -39,6 +39,15 @@
     <script src="/public/js/main.js"></script>
   </head>
   <body>
+    <div class="click-to-play" id="clickToPlay">
+      <img
+        class="play-button"
+        src="/public/images/play-button.svg"
+        alt="Click to play"
+        onmouseover="playButtonHover(this);"
+        onmouseout="playButtonUnhover(this);"
+        onclick="playButtonClick(this);"/>
+    </div>
     <header>
       <h1 class="header-text">
         Project Audio for GitHub&nbsp;
diff --git a/app/public/css/main.css b/app/public/css/main.css
@@ -58,6 +58,26 @@ html,body{
     visibility: hidden;
 }
 
+.click-to-play{
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+.play-button{
+    width: 30rem;
+    margin-top: 20rem;
+}
+
+.play-button:hover{
+    cursor: pointer;
+}
+
 header{
     position: relative;;
     width: 100%;
diff --git a/app/public/images/play-button-hover.svg b/app/public/images/play-button-hover.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<circle style="fill:#104F55;" cx="256" cy="256" r="245.801"/>
+<polygon style="fill:#F2F2F2;" points="195.825,391.629 376.351,256 195.825,120.371 "/>
+<g>
+	<path style="fill:#32746D;" d="M256,512c-68.381,0-132.667-26.628-181.019-74.98C26.628,388.667,0,324.38,0,256
+		S26.628,123.333,74.981,74.98C123.333,26.628,187.619,0,256,0s132.667,26.628,181.019,74.98C485.372,123.333,512,187.62,512,256
+		s-26.628,132.667-74.981,181.02C388.667,485.372,324.381,512,256,512z M256,20.398C126.089,20.398,20.398,126.089,20.398,256
+		S126.089,491.602,256,491.602S491.602,385.911,491.602,256S385.911,20.398,256,20.398z"/>
+	<path style="fill:#32746D;" d="M195.824,401.828c-1.553,0-3.115-0.355-4.557-1.075c-3.458-1.727-5.641-5.26-5.641-9.124V120.371
+		c0-3.864,2.185-7.397,5.641-9.124c3.458-1.726,7.593-1.351,10.685,0.97l180.526,135.629c2.564,1.927,4.073,4.948,4.073,8.154
+		s-1.508,6.228-4.073,8.154L201.951,399.783C200.15,401.137,197.994,401.828,195.824,401.828z M206.024,140.791v230.418L359.371,256
+		L206.024,140.791z"/>
+	<path style="fill:#32746D;" d="M256,473.243c-5.632,0-10.199-4.566-10.199-10.199c0-5.633,4.567-10.199,10.199-10.199
+		c52.815,0,102.404-20.633,139.633-58.1c3.973-3.996,10.429-4.015,14.425-0.045c3.995,3.971,4.016,10.428,0.046,14.424
+		C369.016,450.471,314.287,473.243,256,473.243z"/>
+	<path style="fill:#32746D;" d="M430.396,377.825c-1.886,0-3.793-0.522-5.498-1.617c-4.741-3.041-6.118-9.351-3.076-14.092
+		c1.514-2.36,2.998-4.788,4.411-7.216c2.834-4.867,9.077-6.516,13.945-3.684c4.868,2.833,6.518,9.077,3.684,13.945
+		c-1.56,2.681-3.201,5.363-4.873,7.97C437.043,376.168,433.754,377.825,430.396,377.825z"/>
+</g>
+</svg>
diff --git a/app/public/images/play-button.svg b/app/public/images/play-button.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<circle style="fill:#F3F3F3;" cx="256" cy="256" r="245.801"/>
+<polygon style="fill:#F3F3F3;" points="195.825,391.629 376.351,256 195.825,120.371 "/>
+<g>
+	<path style="fill:#32746D;" d="M256,512c-68.381,0-132.667-26.628-181.019-74.98C26.628,388.667,0,324.38,0,256
+		S26.628,123.333,74.981,74.98C123.333,26.628,187.619,0,256,0s132.667,26.628,181.019,74.98C485.372,123.333,512,187.62,512,256
+		s-26.628,132.667-74.981,181.02C388.667,485.372,324.381,512,256,512z M256,20.398C126.089,20.398,20.398,126.089,20.398,256
+		S126.089,491.602,256,491.602S491.602,385.911,491.602,256S385.911,20.398,256,20.398z"/>
+	<path style="fill:#32746D;" d="M195.824,401.828c-1.553,0-3.115-0.355-4.557-1.075c-3.458-1.727-5.641-5.26-5.641-9.124V120.371
+		c0-3.864,2.185-7.397,5.641-9.124c3.458-1.726,7.593-1.351,10.685,0.97l180.526,135.629c2.564,1.927,4.073,4.948,4.073,8.154
+		s-1.508,6.228-4.073,8.154L201.951,399.783C200.15,401.137,197.994,401.828,195.824,401.828z M206.024,140.791v230.418L359.371,256
+		L206.024,140.791z"/>
+	<path style="fill:#32746D;" d="M256,473.243c-5.632,0-10.199-4.566-10.199-10.199c0-5.633,4.567-10.199,10.199-10.199
+		c52.815,0,102.404-20.633,139.633-58.1c3.973-3.996,10.429-4.015,14.425-0.045c3.995,3.971,4.016,10.428,0.046,14.424
+		C369.016,450.471,314.287,473.243,256,473.243z"/>
+	<path style="fill:#32746D;" d="M430.396,377.825c-1.886,0-3.793-0.522-5.498-1.617c-4.741-3.041-6.118-9.351-3.076-14.092
+		c1.514-2.36,2.998-4.788,4.411-7.216c2.834-4.867,9.077-6.516,13.945-3.684c4.868,2.833,6.518,9.077,3.684,13.945
+		c-1.56,2.681-3.201,5.363-4.873,7.97C437.043,376.168,433.754,377.825,430.396,377.825z"/>
+</g>
+</svg>
diff --git a/app/public/js/main.js b/app/public/js/main.js
@@ -1,10 +1,11 @@
 var eventQueue = [];
+var startConsuming = false;
 var svg;
 var element;
 var drawingArea;
 var width;
 var height;
-var volume = 0.6;
+var volume = 0.5;
 var ULTIMATE_DREAM_KILLER = false;  // https://github.com/debugger22/github-audio/pull/19
 var orgRepoFilterNames = [];
 
@@ -139,9 +140,7 @@ $(function(){
       loaded_sounds += 1;
       if (loaded_sounds == total_sounds) {
           all_loaded = true;
-          setTimeout(playFromQueueExchange1, Math.floor(Math.random() * 1000));
-          // Starting the second exchange makes music a bad experience
-          // setTimeout(playFromQueueExchange2, Math.floor(Math.random() * 2000));
+          setTimeout(playFromQueue, Math.floor(Math.random() * 1000));
       }
   }
 
@@ -230,7 +229,11 @@ function playSound(size, type) {
 // Following are the n numbers of event consumers
 // consuming n events each per second with a random delay between them
 
-function playFromQueueExchange1(){
+function playFromQueue(){
+  if (!startConsuming) {
+    setTimeout(playFromQueue, Math.floor(Math.random() * 1000) + 500);
+    return;
+  }
   var event = eventQueue.shift();
   if(event != null && event.actor.display_login != null && !shouldEventBeIgnored(event) && svg != null){
     playSound(event.actor.display_login.length*1.1, event.type);
@@ -239,20 +242,7 @@ function playFromQueueExchange1(){
   }else{
     console.log("Ignored ex 1");
   }
-  setTimeout(playFromQueueExchange1, Math.floor(Math.random() * 1000) + 500);
-  $('.events-remaining-value').html(eventQueue.length);
-}
-
-function playFromQueueExchange2(){
-  var event = eventQueue.shift();
-  if(event != null && event.actor.display_login != null && !shouldEventBeIgnored(event) && svg != null){
-    playSound(event.actor.display_login.length, event.type);
-    if(!document.hidden)
-      drawEvent(event, svg);
-  }else{
-    console.log("Ignored ex 2");
-  }
-  setTimeout(playFromQueueExchange2, Math.floor(Math.random() * 800) + 500);
+  setTimeout(playFromQueue, Math.floor(Math.random() * 1000) + 500);
   $('.events-remaining-value').html(eventQueue.length);
 }
 
@@ -376,3 +366,17 @@ function drawEvent(data, svg_area) {
     $('#area svg g:lt(10)').remove();
   }
 }
+
+
+function playButtonHover(e){
+  e.setAttribute('src', '/public/images/play-button-hover.svg');
+}
+
+function playButtonUnhover(e){
+  e.setAttribute('src', '/public/images/play-button.svg');
+}
+
+function playButtonClick(e) {
+  startConsuming = true;
+  $('#clickToPlay').remove();
+}
