在pc上的浏览器都可以播放，在安卓手机上的浏览器都不能播放，而且使用手机微信就可以正常播放

Question

按照老师敲的代码，在pc上的浏览器都可以播放，在安卓手机上的浏览器都不能播放但是其他效果都在，vconsole日志显示逻辑也都正常，而且使用微信打开url就可以正常播放，感觉this.$refs.audio.play()执行了但是没有效果，vuex状态也都对，我看也有同学问同样的问题，请问老师如何解决。

Answer 1

好吃的菜薹 2017-11-17 10:29:07

我的想法是既然需要手动触发，就让用户在开始进入的时候任何click事件都触发一次audio

//import VConsole from 'vconsole'
//var vConsole = new VConsole();
//console.log('Hello world');
 
fastclick.attach(document.body)
 
Vue.use(VueLazyload, {
    loading: require('common/image/default.png')
})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  data(){
      return {
          once: 0
      }
  },
  mounted(){
          document.onclick = () => {
              this.once++
              if(this.once<=1){
                   
                  let audioPlay = document.getElementById('audio')
                  audioPlay.play()
              }else{
                  document.onclick = null
              }      
          }    
  }
})

• 提问者 七宝白月轮 #1

  非常感谢！

Answer 2

ustbhuangyi 2017-11-18 03:35:22

完美解决，参考最新代码，以下 commit 就是解决方案

https://github.com/ustbhuangyi/vue-music/commit/8fef850681e532b110733acfaa111ce4576da5ed

Answer 3

ustbhuangyi 2017-11-17 23:27:03

其实是 Vue 2.5+ 的坑，退回到 Vue 2.4 版本是没这个问题的

Answer 4

好吃的菜薹 2017-11-17 10:28:22

原因是安卓必须手动触发

Answer 5

ustbhuangyi 2017-11-16 15:21:01

试试这个地址是否有问题呢：http://ustbhuangyi.com/music/

• 提问者 七宝白月轮 #1

  老师，http://ustbhuangyi.com/music/这个没有问题，我现在的情况是，点击上一首，下一首都没有问题，点击播放cd也转，歌词运行也正常，就是播放时，进度条一直都不动，没有声音，拖动或点击进度条时，包括播放时左侧播放时间始终是0:00，以上问题仅出现在手机浏览器中，pc端，或用微信打开都没有问题