Merge pull request #23 from jcreek/11-add-optional-spinner-audio-with-a-mute-toggle-button

feat(#11): Add spinner audio and mute button

src/audioControls.ts

@@ -0,0 +1,17 @@
+export default {
+  pauseAudio(audio: HTMLAudioElement) {
+    audio.pause();
+  },
+  playAudio(audio: HTMLAudioElement) {
+    audio.play();
+  },
+  stopAudio(audio: HTMLAudioElement) {
+    audio.pause();
+    // eslint-disable-next-line no-param-reassign
+    audio.currentTime = 0;
+  },
+  toggleMute(audio: HTMLAudioElement) {
+    // eslint-disable-next-line no-param-reassign
+    audio.muted = !audio.muted;
+  },
+};

src/index.ts

@@ -1,5 +1,7 @@
 import * as d3 from 'd3';
 import loadServiceWorker from './loadServiceWorker';
+import audioControls from './audioControls';
+import spinnerMp3 from './assets/spinner-sound.mp3';
 
 require('./assets/favicon.ico');
 require('./assets/android-chrome-192x192.png');
@@ -9,6 +11,11 @@ require('./assets/favicon-16x16.png');
 require('./assets/favicon-32x32.png');
 require('./styles/main.scss');
 
+const wheelSpinningSound = new Audio(spinnerMp3);
+if (window.localStorage.audioMuteSetting) {
+  wheelSpinningSound.muted = window.localStorage.audioMuteSetting;
+}
+
 const padding = {
   top: 20,
   right: 40,
@@ -159,6 +166,8 @@ function drawWheel() {
       stopSpinning();
       return;
     }
+
+    audioControls.playAudio(wheelSpinningSound);
     const ps = 360 / data.length;
     const rng = Math.floor(Math.random() * 1440 + 360);
 
@@ -185,6 +194,8 @@ function drawWheel() {
         d3.select('#question h1').text(data[picked].label.trim());
         oldrotation = rotation;
 
+        audioControls.stopAudio(wheelSpinningSound);
+
         /* Get the result value from object "data" */
         // console.log(data[picked].value);
 
@@ -200,6 +211,13 @@ function drawWheel() {
 
 function startOver() {
   stopSpinning();
+  audioControls.stopAudio(wheelSpinningSound);
+}
+
+function toggleMute() {
+  audioControls.toggleMute(wheelSpinningSound);
+  this.textContent = wheelSpinningSound.muted ? 'Unmute' : 'Mute';
+  window.localStorage.audioMuteSetting = wheelSpinningSound.muted;
 }
 
 function startSpinning() {
@@ -231,7 +249,14 @@ function startSpinning() {
   startOverElement.setAttribute('role', 'button');
   startOverElement.onclick = startOver;
   startOverElement.textContent = 'Start over';
+  const muteElement = document.createElement('button');
+  muteElement.setAttribute('id', 'mute');
+  muteElement.setAttribute('class', 'button button-black');
+  muteElement.setAttribute('role', 'button');
+  muteElement.onclick = toggleMute;
+  muteElement.textContent = wheelSpinningSound.muted ? 'Unmute' : 'Mute';
   chartElement.appendChild(startOverElement);
+  chartElement.appendChild(muteElement);
   document.getElementById('spinner-container').appendChild(chartElement);
   const questionElement = document.createElement('div');
   questionElement.setAttribute('id', 'question');

src/styles/main.scss

@@ -91,6 +91,12 @@ body {
   left: auto;
 }
 
+#mute {
+  position: absolute;
+  top: 140px;
+  left: auto;
+}
+
 #spinner-container {
   display: flex;
   flex-direction: row;