VueJSで効果音を鳴らす

ツイート
2021年05月10日
2021年05月11日

意図

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

Audio()

JavaScriptのAudio APIを使います。

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

VueJSで鳴らす

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

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

参考