音声の出し方　(Vue, Nuxt, TypeScript)

音の出し方

ボタン押下時に音を出してみたいと思い、備忘録としてかきこ。

フリー素材は下記からダウンロード
https://soundeffect-lab.info/

まずはassetsに使用するmp3を配置

assets/sound/click.mp3

次にtsファイルをcomposableに作成

// Vue Nuxtのcomposableに下記ファイル作成

import clickSound from '~/assets/sounds/click.mp3'
export const usePlaySound = ()=> {
    const click = () => {
        const audio = new Audio(clickSound) 
        audio.volume = 0.2
        audio.play()
    }
    return { click,  }
}

画面側にimportしてボタン押下時になる様にする。

<template>
 <button @click="sound">クリックしてください</button>
</template>

import { usePlaySound } from '~/composable/usePlaySound'
const playSound = usePlaySound()

const sound = () = {
 playSound.click()
}

以上！以外に簡単でした。
audioプロパティに色々変更できる部分があるので結構奥が深そうです。