Playing a sound with Vue.js

How can I play a sound with Vue.js?

Seems like I cant just do the regular way.

  import Vue from 'vue'
  import AppView from './components/App.vue'

  console.log('Play outside of vue')
  var audio = new Audio('file.mp3')
  audio.play()

  new Vue({
    el: '#root',
    mounted () {
       console.log('Will it play here?? lol')
       var audio = new Audio('file.mp3')
       audio.play()
    }, 
    render: h => h(AppView)
  })

As it says Audio is not defined? Do I have to import it somehow? Is there a specific vue package for this? or npm package?

I really don't understand, I though Audio was just vanilla javascript?

Use var audio = new Audio(require('./file.mp3')) this will create the correct path since in var audio = new Audio('file.mp3'), your path 'file.mp3' was decoded as a string.

Play audio inside vue component - Get Help, This is my use case. I have a sound clip (tick-tocking.wav) I want to play this sound clip continuesly in my clock.vue component. What is the  Play audio sound if uers click on DOM Element in Vue.js / JavaScript. The key points of the following source code: Use v-on directive to attach event listener of button onClick event. Use ref attribute to register a reference to audio element.

Playing audio files with Vue.js, <h1>Play Sound</h1>. 4. <h4>Playing audio files with Vue.js</h4>. 5. </div>. 6. ​. 7. <div class="container" id="app">. 8. 9. <div class="form-group">. 10. <label>​. We’ll use Quasar and WaveSurfer to build a SoundCloud like cross-platform mobile audio player app. We’ll load a local audio file from the device using html file input, render a waveform and add controls to play the audio. Quasar? Quasar is a UI framework built on Vue.js.

try to use path to audio file related to your script location on your environment

Vue.js Demos, Part 5: Working with Audio, In this episode, we will create a basic button and then connect audio to it, so when a user presses Duration: 13:15 Posted: Nov 8, 2018 ️ 🎹 🎵 HTML5 <audio> tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc - shershen08/vuejs-sound-player. Skip to content.

Vue Audio, "An HTML5 <audio> tag sound player UI for Vue.js - supports single, loop, pause/​stop modes etc!" Creator. Mikhail Kuznetcov. Shield; Statistics. Social Media  autoPlay (Boolon) (Optional): Add it to make the audio auto play, but in some web browsers maybe failed, because some browsers need user active in the page first then allow sound auto play. downloadable (Boolon) (Optional): Add it to let the audio file can be downloaded. Known Issues. Audio play pregress bar can't support drag, only support click. ToDo

How to play audio from method? : vuejs, Just triggering a sound would be enough I am not sure how to start :) 2 comments. share. save I had some issues related to audio promise object returns and some issues related to user interaction with sounds I end up using this small object,. I would recommend to implement the play sounds the closest to the interaction event user is using.

shershen08/vuejs-sound-player: ▶️ HTML5 tag , HTML5 tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc - shershen08/vuejs-sound-player. I am creating a game in VueJS, where, when the page loads, I want a method to fire, make an ajax call to an external API and create a bunch of data properties. When the player wins the round, I wan

Comments
  • It should just work, it's just a native constructor.
  • yeah, you would think
  • review this
  • Just to make sure, you are testing it in browser supporting Audio API, right (i.e. not IE11)? And it has nothing to do with ES6, btw.
  • Well what does it have to do with then, if not ES6?? If I take my Vue.js code, and do it the old way....the above code works fine. No require or import needed. Just plain old javascript. But as soon as I put it into ES6 and through a build process. It doesnt. Audio, is undefined. Judging by how I wrestled with google maps and jquery as well. Im assuming I have to import it somehow? Either Im getting too old for this shit, or web-design is becoming overly convoluted and way more complicated than it needs to be.
  • When you use require, Webpack will ensure the proper path and filename for your audio resource. And don't forget to copy the file in place. I used const sound = ( new Audio( require('@/assets/foo.ogg') ).play();, which refers to src/assets in my Vue project.
  • You can use these demo sounds to test it out: findsounds.com/ISAPI/search.dll