javascript - How to make alarm sound using vuejs - Stack Overflow

admin管理员组

文章数量:1295323

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 remend 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'
  }
  }
)

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 remend 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'
  }
  }
)

• javascript
• html
• sockets
• vue.js

Share Improve this question Follow asked Nov 12, 2019 at 7:40 DD DDDD DD 1,23822 gold badges1414 silver badges4242 bronze badges 1

• Vue is just javascript, so any solution in javascript should work in vue as well. Doing a quick google search on "play sounds using javascript" brings multiple results. – Nikolaj Dam Larsen Commented Nov 12, 2019 at 7:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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./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!

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.

You can achieve that with pure JS, without any other library.

var audioFile = new Audio('your_audio_file.wav');
audioFile.play();

Of course you can implement that in your own method to let this be accessible from somewhere else...

本文标签： javascriptHow to make alarm sound using vuejsStack Overflow