Add an option to play audio notifications

_locales/en/messages.json

@@ -453,6 +453,10 @@
         }
       }
     },
+    "audioNotificationDescription": {
+      "message": "Play audio notification",
+      "description": "Description for audio notification setting"
+    },
     "safetyNumbersSettingHeader": {
       "message": "Safety numbers approval",
       "description": "Header for safety numbers setting"

background.html

@@ -463,6 +463,11 @@
           <label for='notification-setting-off'>{{ disableNotifications }} </label>
         </div>
       </div>
+      <br />
+      <div class='audio-notification-setting'>
+        <input type='checkbox' name='audio-notification' id='audio-notification'/>
+        <label for='audio-notification'>{{ audioNotificationDescription }}</label>
+      </div>
       <hr>
       <div class='safety-numbers-settings'>
         <h3>{{ safetyNumbersSettingHeader }}</h3>

js/notifications.js

@@ -12,6 +12,8 @@
         MESSAGE : 'message'
     };
 
+    var sound = new Audio('/audio/NewMessage.mp3');
+
     Whisper.Notifications = new (Backbone.Collection.extend({
         initialize: function() {
             this.on('add', _.debounce(this.update.bind(this), 1000));
@@ -35,6 +37,11 @@
             if (this.length === 0) {
                 return;
             }
+            var audioNotification = storage.get('audio-notification') || false;
+            if (audioNotification) {
+                sound.play();
+            }
+
             var setting = storage.get('notification-setting') || 'message';
             if (setting === SETTINGS.OFF) {
                 return;

js/views/settings_view.js

@@ -60,6 +60,11 @@
                 name: 'theme-setting'
             });
             new CheckboxView({
+                el: this.$('.audio-notification-setting'),
+                defaultValue: false,
+                name: 'audio-notification'
+            });
+            new CheckboxView({
                 el: this.$('.safety-numbers-settings'),
                 defaultValue: true,
                 name: 'safety-numbers-approval'
@@ -84,6 +89,7 @@
               nameOnly: i18n('nameOnly'),
               safetyNumbersSettingDescription: i18n('safetyNumbersSettingDescription'),
               safetyNumbersSettingHeader: i18n('safetyNumbersSettingHeader'),
+              audioNotificationDescription: i18n('audioNotificationDescription'),
               themeAndroidDark: i18n('themeAndroidDark'),
             };
         }