用Vue.js播放声音

Question

如何使用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包？

我真的不明白，尽管Audio只是普通的javascript吗？

Answer 1

**** 编辑 ****

随着时间的流逝，我使用 VueJs 进行了更多开发，我能够更好地阐明这个问题

问题是：音频的定义超出了 VueJs 组件的范围。VueJS 将组件封装在它们自己的上下文中。当我们从 new Vue hook 中声明它时，它不会意识到这个对象的存在。

正确的做法是：

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

另外，我应该提到在浏览器的上下文中尝试访问“file://”是行不通的，因为浏览器是沙盒的。您应该使用 an<input type="file" />来获取音频的来源，然后在操作文件本身后将其放入音频变量中。

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

• 关于插件的文档

Answer 2

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