用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？

来源

2017-04-06 KyleK

它应该只是工作，它只是一个本地构造函数。 – dfsq

是啊，你会想到 – KyleK

评论[这]（http://stackoverflow.com/questions/35713060/vuejs-with-html5-audio-property） –

我不知道这是否会回答你的问题，但是这是我的工作

这是我.vue文件的项目：

<ul v-for="(item, index) in music"> 
    <li> {{item.data.metadata.track}} - {{item.data.metadata.title}} 
     <audio ref="audio" :src="'file:// '+ item.data.file"></audio> 
     <button @click="playFile(item.filePath, index)">Play</button> 
     <button @click="stopFile(item.filePath, index)">Pause</button> 
    </li> 
</ul>

我传递文件作为参数然后调用一个方法：

methods: { 
    playFile(file, index) { 
     var music = this.$refs.audio[index]; 
     if(music.paused){ 
      music.play(); 
      console.log("play") 
     }else{ 
      music.pause(); 
      console.log(music.currentTime); 
     } 
    }, 
    stopFile(file, index) { 
     var music = this.$refs.audio[index]; 
     music.pause(); 
     music.currentTime = 0; 
    } 
}

看来你的代码很好。但我猜（我没有测试你的代码），这就是你在Vue生命周期中调用play()的方式。

正如我测试HTML缓冲音频，因为它加载页面，但vue组件动态地更改他们的组件，因为他们准备好了。（这只是猜测）

尝试创建一个方法，而不是从挂载的生命周期中调用它。我对这个问题很好奇。我希望我的代码可以帮助你

来源

2017-06-27 00:01:13

用Vue.js播放声音

回答

相关问题