Question

如何使用Vue.js播放声音？

好像我不能按常规方式行事。

execfile('program_to_launch.py')

因为它说没有定义音频？我必须以某种方式导入它吗？这是否有特定的vue包？还是npm包？

我真的不明白，我虽然音频只是香草javascript？

Answer 1

****已编辑****

随着时间的推移，我使用VueJs开发了更多，我能够更好地澄清这个问题

问题是：音频被定义在VueJs组件的范围之外。 VueJS将组件封装在它们自己的上下文中。当我们从新的Vue钩子声明它时，它将不知道该对象的存在。

正确的方法是：

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

另外，我应该提一下，尝试访问＆＃34; file：//＆＃34;在浏览器的上下文中将无法工作，因为浏览器是沙盒的。您应该使用<input type="file" />来获取音频源，然后在操作文件本身后将其放入音频变量中。

值得一提的是，如果您创建一个在Vue的this上下文中使用的全局插件，这种方法会更好。这将使组件可重用并在您需要访问的每个组件实例中可用，允许您播放或暂停来自任何组件源的音频

Docs about plugins

Answer 2

使用var audio = new Audio(require('./file.mp3'))将创建正确的路径，因为在var audio = new Audio('file.mp3')中，您的路径'file.mp3'被解码为字符串。

Answer 3

尝试使用与您的环境中的脚本位置相关的音频文件的路径

用Vue.js播放声音

3 个答案: