Avoid using media element with empty src attribute (#10364)

Whenever the client starts up, the following is emitted in the Firefox
console:

Invalid URI. Load of media resource  failed.
All candidate resources failed to load. Media load paused.

This happens because the <source/> tags are preinitialized with a src
attribute of "".

So what we're doing instead is initialize the <audio/> element without
any children and add the children as soon as the first audio file needs
to be played. This also has the advantage that we can determine at
runtime whether the browser supports Ogg/Vorbis or whether we should
fall back to MPEG layer 3 so only one source element is needed.

Signed-off-by: aszlig <aszlig@nix.build>

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,
@@ -260,10 +257,21 @@ export default {
       }
 
       let file = `/static/audio/${theme}/${sound}`;
-      this.sound = {
-        oggSource: `${file}.ogg`,
-        mp3Source: `${file}.mp3`,
-      };
+
+      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();
     });