How to make alarm sound using vuejs

Question

I am using websocket using vuejs like below.
socket would run when it gets 'any' on realtime.
And it gets data from rest api
When data.get is true, I want to make a short alarm sound like 'dingdong'.
How can I make this using vuejs? Could you recommend some advice? Thank you so much for reading it.

socket.on("any", async order =>{
  const data = await axios.post('/', {order})
  if(data.get === true){
    return ... // <-- some alarm occurs like 'dingdong'
  }
  }
)

Answer 1

you can play any sound in vuejs like this:

Html:

<div id="app">
  <button @click.prevent="playSound()">Play Sound</button> 
</div>

js / vue:

var data = { soundurl : 'http://soundbible.com/mp3/analog-watch-alarm_daniel-simion.mp3'} 
new Vue({
  el: '#app',
  data: data,
  methods: {
    playSound () {
      var audio = new Audio(data.soundurl);
      audio.play();
    }
  }
});

Your sound obviously needs to be hosted online to achieve it that way.

Hope it helps!

Answer 2

As far as I know there is a possibility to play audio in Vue, so that you can insert a specific ringtone of your choice (.mp3, .wav, ...).

But tbh personally I don't know how to code that.

HowlerJS may help you, if you want to read something more about that, seems to be easy to use.