Put blop sound into separate function and only play if on desktop

public/index.html

@@ -744,7 +744,7 @@
     <script src="scripts/ui-main.js" defer></script>
     <script src="scripts/main.js" defer></script>
     <!-- Sounds -->
-    <audio id="blop" autobuffer="true">
+    <audio id="blop" preload="metadata" disableremoteplayback="true" x-webkit-airplay="deny" muted>
         <source src="sounds/blop.mp3" type="audio/mpeg">
         <source src="sounds/blop.ogg" type="audio/ogg">
     </audio>

public/scripts/ui.js

@@ -991,7 +991,7 @@ class ReceiveFileDialog extends ReceiveDialog {
             badgeClassName: badgeClassName
         });
 
-        window.blop.play();
+        audioPlayer.playBlop();
 
         await this._nextFiles();
     }
@@ -2068,7 +2068,7 @@ class ReceiveTextDialog extends Dialog {
     }
 
     _onText(text, peerId) {
-        window.blop.play();
+        audioPlayer.playBlop();
         this._receiveTextQueue.push({text: text, peerId: peerId});
         this._setDocumentTitleMessages();
         if (this.isShown()) return;

public/scripts/util.js

@@ -62,6 +62,24 @@ window.isMobile = window.iOS || window.android;
 
 
 // Helper functions
+
+const audioPlayer = (() => {
+    const blop = document.getElementById('blop');
+    blop.addEventListener('ended', _ => {
+        blop.muted = true
+    });
+
+
+    return {
+        playBlop() {
+            if (window.isMobile) return;
+
+            blop.muted = false;
+            blop.play();
+        }
+    }
+})();
+
 const zipper = (() => {
 
     let zipWriter;