VueJSで効果音を鳴らす

2021年05月10日
2021年05月11日

意図

何かの動作時に音を出してユーザーに認識して欲しいケースがあります。 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がよかったです。

参考