nishimura.clubnishimura.club

VueJSで効果音を鳴らす

作成日
2021-05-11
更新日
2021-05-11

意図

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

Audio()

JavaScriptのAudio APIを使います。

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

VueJSで鳴らす

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がよかったです。

参考

Related

Tags

VueJS
JavaScript

Share