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했을 때 데카가 된다든가 뭔가 영향은으로 그렇지만, 미확인)