VueJSで効果音を鳴らす

意図

何かの動作時に音を出してユーザーに認識して欲しいケースがあります。 ex)ビデオチャット,Push通知etc

Audio()

JavaScriptのAudio APIを使います。

1const audio = new Audio('example.mp3');
2audio.play();

VueJSで鳴らす

1  data: () => ({
2    audio: new Audio(require('@/assets/sounds/example.mp3'))
3  }),
4  created () {
5    this.audio.currentTime = 0 // 連続で鳴らせるように
6    this.audio.play() // 鳴らす
7  }

ポイントとしては、VueJSのscriptsでassetsファイルを扱う場合、`require('@/assets/sounds/example.mp3')`のようにするところです。 otologic.jpがよかったです。

参考

• Audio()