Vuetify2.xでサウンド再生した

概要

外部でなく、自前（ローカル）にあるファイルをぺろっとVuetifyのプロジェクトで音再生したかった。
そのあたりのメモ。

こまったこと

ぐぐったかんじwebpack.config.jsとかでwavファイルとかmp3ファイルをローディングできるように設定する例があった。
しかしvuetifyの標準プロジェクトだと、設定ファイルとしてplugins/vuetify.jsとvue.config.jsがあるが、webpack用なるファイルはない。

Vue + Nuxtでボードゲームを6時間で作ってみたという記事ではnuxtの設定ファイルで拡張子ルールを追記してる...

sassとかのローディングもおなじような設定したことが昔はあったなと、ググると次の記事をみつけた。
→ Vuetify v1.3で追加されたvuetify-loaderが便利だった

これはimportすれば自動で解決してくれるってこと?

解決編

コンポーネントでimportすれば勝手に解決してくれた。
再生部分については、こちらの記事を参考にした。

main.js

Vue.prototype.$playSound = (path, volume = 1) => {
  var audio = new Audio(path);
  audio.volume = volume
  audio.play();
}

Hoge.vue

<template lang="pug">
  v-btn(@click="playSound") ほげー
(中略)
<script>
    import sndHoge from '../assets/sounds/hoge.wav'
(中略)

        methods: {
            playSound() {
                this.$playSound(sndHoge, 10)
            },
(以下略)

まとめ

うごいてるからヨシ！ (buildしたときにデカくなるとか何か影響はでそうだが、未確認)