Nuxtプロジェクトでmp3を再生する

assets配下に再生したいファイルを配置

オーディオファイルをロードするように Webpack の設定を拡張する 以下を参考にnuxt.config.tsを修正

ja.nuxtjs.org

// 省略
build: {
    extend(config: any, _: any) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
// 省略

再生したいコンポーネントで追加したmp3ファイルをimportしてaudioを利用して再生する

import sound from '~/assets/sounds/sample.mp3'

typescriptでエラーになるのでmp3ファイルの定義ファイルを作成する @types/sound.d.tsとかでファイルを作成

declare module '*.mp3'

importしたコンポーネント内の再生したい箇所で以下を記述して再生する

const audio = new Audio(sound)
audio.play()