Playing a sound with Vue.js

Question

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?

Answer 1

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.

Answer 2

**** EDITED ****

As the time passed and I developed more using VueJs I'm able to clarify better this issue

The issue was: the audio is being defined out of the scope of VueJs component. VueJS encapsulates the components in their own context. When we declare it out of new Vue hook, it will be unaware of the existence of this object.

A correct approach would be:

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

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

Also, I should mention that trying to access "file://" in the context of the browser will NOT work, because the browser is sandboxed. You should use an <input type="file" /> to get the source of the audio, and then put it into the audio variable after manipulate the file itself.

Is worth mention too, that this approach would work much better if you create a global plugin to use on Vue's this context. This would make the component reusable and available in every component instance you needed to access allowing you to play or pause the audio from any component source

• Docs about plugins