Reputation: 11759
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?
Upvotes: 19
Views: 64929
Reputation: 2797
A bit of necroposting, but I believe require
is not commonly used anymore. Audio is a vanilla JS, the only issue here is the correct URL after the bundling is done. The simplest Vue solution goes like this:
import mySound from '<src>/assets/file.mp3';
new Audio(mySound).play();
Upvotes: 0
Reputation: 16
I have lots of experiences about that. Developing any applications, it is really important because it is related with user-satisfy.
<template>
<audio id="horse_audio">
<source src="horse.ogg" type="audio/ogg">
</audio>
</template>
<script>
name: "AudioTest",
mounted() {
let audio = document.getElementById("horse_audio")
audio.play();
}
</script>
I know, and you know there are too many different ways to solve this problem. But this way is from basic html. So it will work well.
Upvotes: 0
Reputation: 568
I know that this question is old. but I thouth it might helps.
import Vue from 'vue'
import AppView from './components/App.vue'
import audioFile from '@/assets/file.mp3'
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')
var audio = new Audio(audioFile)
audio.play()
},
render: h => h(AppView)
})
Upvotes: 0
Reputation: 153
**** 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
Upvotes: 11
Reputation: 129
try to use path to audio file related to your script location on your environment
Upvotes: 0
Reputation: 1575
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.
Upvotes: 19