Fix #151: Add volume control in settings to adjust notification sounds

src/Sounds.js

@@ -1,6 +1,8 @@
 import Chrome from './Chrome';
 import M from './Messages';
 
+const defaultOptions = { volume: 1.0 };
+
 function createNotificationSounds() {
   let sounds = [
     { name: M.tone, file: 'f62b45bc.mp3' },
@@ -60,7 +62,7 @@ function createTimerSounds() {
   return sounds;
 }
 
-async function play(filename) {
+async function play(filename, { volume } = defaultOptions) {
   if (!filename) {
     return;
   }
@@ -70,7 +72,13 @@ async function play(filename) {
   let context = new AudioContext();
 
   let source = context.createBufferSource();
-  source.connect(context.destination);
+  // Adds gain node for volume control
+  let gain = context.createGain();
+  gain.gain.setValueAtTime(volume, context.currentTime);
+
+  source.connect(gain);
+  gain.connect(context.destination);
+
   source.buffer = await new Promise(async (resolve, reject) => {
     let content = await Chrome.files.readBinary(filename);
     context.decodeAudioData(content, buffer => resolve(buffer), error => reject(error));
@@ -93,4 +101,4 @@ export {
   notification,
   timer,
   play
-};
+};

src/background/Settings.js

@@ -20,7 +20,7 @@ function clone(obj) {
 class SettingsSchema
 {
   get version() {
-    return 7;
+    return 8;
   }
 
   get default() {
@@ -36,7 +36,8 @@ class SettingsSchema
         notifications: {
           desktop: true,
           tab: true,
-          sound: null
+          sound: null,
+          volume: 1.0
         }
       },
       shortBreak: {
@@ -50,7 +51,8 @@ class SettingsSchema
         notifications: {
           desktop: true,
           tab: true,
-          sound: null
+          sound: null,
+          volume: 1.0
         }
       },
       longBreak: {
@@ -65,7 +67,8 @@ class SettingsSchema
         notifications: {
           desktop: true,
           tab: true,
-          sound: null
+          sound: null,
+          volume: 1.0
         }
       },
       autostart: {
@@ -204,6 +207,17 @@ class SettingsSchema
 
     return v7;
   }
+
+  from7To8(v7) {
+    let v8 = clone(v7);
+    v8.version = 8;
+
+    v8.focus.notifications.volume = 1.0;
+    v8.shortBreak.notifications.volume = 1.0;
+    v8.longBreak.notifications.volume = 1.0;
+
+    return v8;
+  }
 }
 
 class PersistentSettings
@@ -228,4 +242,4 @@ class PersistentSettings
 export {
   SettingsSchema,
   PersistentSettings
-};
+};

src/options/Settings.vue

@@ -67,7 +67,7 @@
         <p class="field">
           <label>
             <span>{{ M.play_audio_notification }}</span>
-            <SoundSelect v-model="settings.focus.notifications.sound" :sounds="notificationSounds"></SoundSelect>
+            <SoundSelect v-model="settings.focus.notifications" :sounds="notificationSounds"></SoundSelect>
           </label>
         </p>
       </div>
@@ -103,7 +103,7 @@
         <p class="field">
           <label>
             <span>{{ M.play_audio_notification }}</span>
-            <SoundSelect v-model="settings.shortBreak.notifications.sound" :sounds="notificationSounds"></SoundSelect>
+            <SoundSelect v-model="settings.shortBreak.notifications" :sounds="notificationSounds"></SoundSelect>
           </label>
         </p>
       </div>
@@ -157,7 +157,7 @@
           <p class="field">
             <label>
               <span>{{ M.play_audio_notification }}</span>
-              <SoundSelect v-model="settings.longBreak.notifications.sound" :sounds="notificationSounds"></SoundSelect>
+              <SoundSelect v-model="settings.longBreak.notifications" :sounds="notificationSounds"></SoundSelect>
             </label>
           </p>
         </div>
@@ -379,4 +379,4 @@ export default {
     SoundSelect
   }
 };
-</script>
+</script>

src/options/SoundSelect.vue

@@ -1,20 +1,48 @@
 <template>
-  <select :value="value" @input="setSound($event.target.value)">
-    <option :value="null">{{ M.none }}</option>
-    <option v-for="sound in sounds" :value="sound.file">{{ sound.name }}</option>
-  </select>
+  <div>
+    <select :value="value.sound" @input="setSound($event.target.value)">
+      <option :value="null">{{ M.none }}</option>
+      <option v-for="sound in sounds" :value="sound.file">{{ sound.name }}</option>
+    </select>
+    <span>
+      <button @click="playSound(value.sound)" :disabled="isPlaying">▶️</button>
+      <input
+        type="range"
+        min="0.1"
+        max="1.0"
+        step="0.1"
+        :value="value.volume"
+        @input="setVolume($event.target.value)">Volume: {{value.volume * 10}}
+    </span>
+  </div>
 </template>
 
 <script>
 import * as Sounds from '../Sounds';
 
 export default {
   props: ['value', 'sounds'],
+  data() {
+    return {isPlaying: false}
+  },
   methods: {
+    setVolume(amount) {
+      this.value.volume = parseFloat(amount);
+    },
+
     setSound(filename) {
-      this.$emit('input', filename);
-      Sounds.play(filename);
+      this.value.sound = filename;
+
+      this.$emit('input', this.value);
+    },
+
+    async playSound(filename) {
+      if (filename) {
+        this.isPlaying = true;
+        await Sounds.play(filename, { volume: this.value.volume });
+        this.isPlaying = false;
+      }
     }
   }
 };
-</script>
+</script>