🌭 feat: add audio and video pages

Author: hisasann

nuxt.config.ts

@@ -35,6 +35,20 @@ const config: NuxtConfiguration = {
     // https://ja.nuxtjs.org/api/configuration-build/#devtools
     devtools: true,
 
+    loaders: {
+      // https://ja.nuxtjs.org/faq/webpack-audio-files/
+      vue: {
+        // 特殊なアトリビュートでも webpack の require がかまされるようにする
+        transformAssetUrls: {
+          audio: 'src',
+          video: ['src', 'poster'],
+          source: 'src',
+          img: ['src', 'data-src'],
+          'lazy-image': 'src'
+        }
+      }
+    },
+
     /**
      * You can extend webpack config here
      */
@@ -59,18 +73,14 @@ const config: NuxtConfiguration = {
         }
       }
 
-      const vueLoader: any = config.module!.rules.find(
-        (rule): boolean => rule.loader === 'vue-loader'
-      )
-      // 特殊なアトリビュートでも webpack の require がかまされるようにする
-      vueLoader.options.transformAssetUrls = {
-        video: ['src', 'poster'],
-        source: 'src',
-        img: ['src', 'data-src'],
-        image: 'xlink:href',
-        Test: 'source',
-        'lazy-image': 'src'
-      }
+      // https://ja.nuxtjs.org/faq/webpack-audio-files/
+      config.module!.rules.push({
+        test: /\.(ogg|mp3|wav|mpe?g)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]'
+        }
+      })
     },
     extractCSS: isProduction,
 

src/assets/audio/menuettm.mp3

@@ -0,0 +1,29 @@
+<template lang="pug">
+section
+  h1.title
+    | audio
+  p
+    audio(src="~/assets/audio/menuettm.mp3", autoplay, controls)
+
+  // ChromeとSafariでaudioタグを自動再生するための対策 │ Webty Staff Blog - https://webty.jp/staffblog/production/post-907/
+  iframe#audio(src='https://raw.githubusercontent.com/anars/blank-audio/master/500-milliseconds-of-silence.mp3', allow='autoplay', style='display:none')
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component
+export default class Audio extends Vue {
+  public head() {
+    return {
+      title: 'audio'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  color: crimson;
+}
+</style>

src/assets/video/bump.mp4

@@ -59,6 +59,10 @@ section
     nuxt-link(to='/example/v-scroll') v-scroll
   p
     nuxt-link(to='/example/vue-awesome-swiper') vue-awesome-swiper
+  p
+    nuxt-link(to='/example/audio', no-prefetch) audio
+  p
+    nuxt-link(to='/example/video', no-prefetch) video
 </template>
 
 <script lang="ts">

src/pages/example/audio.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+section
+  h1.title
+    | video
+  p
+    video(src="@/assets/video/bump.mp4", width="500", autoplay, controls)
+
+  // ChromeとSafariでaudioタグを自動再生するための対策 │ Webty Staff Blog - https://webty.jp/staffblog/production/post-907/
+  iframe#audio(src='https://raw.githubusercontent.com/anars/blank-audio/master/500-milliseconds-of-silence.mp3', allow='autoplay', style='display:none')
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component
+export default class Audio extends Vue {
+  public head() {
+    return {
+      title: 'video'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  color: crimson;
+}
+</style>