Javascript 使用Vue.js播放声音

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

****编辑****

随着时间的推移，我使用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)
});

另外，我应该提到，尝试在浏览器的上下文中访问“file://”将不起作用，因为浏览器是沙盒式的。您应该使用

获取音频源，然后在操作文件本身后将其放入音频变量中

同样值得一提的是，如果您创建一个全局插件以在Vue的

此

上下文中使用，这种方法会工作得更好。这将使组件可重用，并可在需要访问的每个组件实例中使用，从而允许您播放或暂停来自任何组件源的音频

---

使用

var audio=new audio（require（'./file.mp3'））

这将创建正确的路径，因为在

var audio=new audio（'file.mp3'）

中，您的路径“file.mp3”被解码为字符串。

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

它应该可以正常工作，这只是一个本机构造函数。是的，你可以通过thinkreview来确定，你是在支持音频API的浏览器中测试它的，对吗（也就是说，不是IE11）？顺便说一句，它与ES6无关。那么，如果不是ES6，它与ES6又有什么关系呢？？如果我用我的Vue.js代码，用老方法来做……上面的代码很好用。不需要或不需要导入。只是简单的老javascript。但一旦我把它放到ES6中并通过构建过程。事实并非如此。音频，未定义。从我与谷歌地图和jquery的斗争来看。我想我必须以某种方式导入它？要么我已经太老了，不适合这个狗屎，要么网页设计变得过于复杂，比它需要的更复杂。你可以使用这些演示声音来测试它：当你使用require时，Webpack将确保为你的音频资源提供正确的路径和文件名。别忘了把文件复制到原处。我使用了

const-sound=（新音频（require（'@/assets/foo.ogg'））.play（）；

，它指的是我的Vue项目中的src/assets。这个确实帮助了我，谢谢你