diff --git a/website/client/app.vue b/website/client/app.vue
index 3f9031a071..f77818a410 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -44,8 +44,6 @@ div
             router-view
         app-footer
         audio#sound(autoplay, ref="sound")
-          source#oggSource(type="audio/ogg", :src="sound.oggSource")
-          source#mp3Source(type="audio/mp3", :src="sound.mp3Source")
 </template>
 
 <style lang='scss' scoped>
@@ -220,10 +218,9 @@ export default {
       selectedItemToBuy: null,
       selectedSpellToBuy: null,
 
-      sound: {
-        oggSource: '',
-        mp3Source: '',
-      },
+      audioSource: null,
+      audioSuffix: null,
+
       loading: true,
       currentTipNumber: 0,
       bannerHidden: false,
@@ -259,11 +256,22 @@ export default {
         return;
       }
 
-      let file =  `/static/audio/${theme}/${sound}`;
-      this.sound = {
-        oggSource: `${file}.ogg`,
-        mp3Source: `${file}.mp3`,
-      };
+      let file = `/static/audio/${theme}/${sound}`;
+
+      if (this.audioSuffix === null) {
+        this.audioSource = document.createElement('source');
+        if (this.$refs.sound.canPlayType('audio/ogg')) {
+          this.audioSuffix = '.ogg';
+          this.audioSource.type = 'audio/ogg';
+        } else {
+          this.audioSuffix = '.mp3';
+          this.audioSource.type = 'audio/mp3';
+        }
+        this.audioSource.src = file + this.audioSuffix;
+        this.$refs.sound.appendChild(this.audioSource);
+      } else {
+        this.audioSource.src = file + this.audioSuffix;
+      }
 
       this.$refs.sound.load();
     });