如何使用Vue.js播放声音?
好像我不能只做常规的方式。
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)
})
正如它所说的音频是没有定义的?我必须以某种方式导入它吗?有专门的vue包吗?还是npm包?
我真的不明白,我以为音频只是香草JavaScript?
4条答案
按热度按时间gupuwyp21#
使用
var audio = new Audio(require('./file.mp3'))
这将创建正确的路径,因为在var audio = new Audio('file.mp3')
中,您的路径'file.mp3'被解码为字符串。nhn9ugyo2#
随着时间的推移,我越来越多地使用VueJ,我能够更好地澄清这个问题
问题是:音频被定义在VueJs组件的范围之外。VueJS将组件封装在自己的上下文中。当我们在new Vue钩子中声明它时,它将不知道这个对象的存在。
正确的做法是:
此外,我应该提到,试图在浏览器的上下文中访问“file://”将不起作用,因为浏览器是沙箱。您应该使用
<input type="file" />
来获取音频的源,然后在操作文件本身之后将其放入audio变量中。值得一提的是,如果你创建一个全局插件在Vue的
this
上下文中使用,这种方法会更好地工作。这将使组件可重用,并可用于您需要访问的每个组件示例,允许您播放或暂停来自任何组件源的音频3ks5zfa03#
尝试使用路径到音频文件相关到你的脚本位置在你的环境
lyr7nygr4#
我知道这个问题很老了。但我觉得可能会有帮助
import audioFile from '@/assets/file.mp3'
var audio = new Audio(audioFile)