最近想做一个，打开页面自动播放背景音乐的效果，寻思使用audio播放不就好了。
答案肯定是不好使！！！，好使也不用我在这里总结了。

刚兴趣的小伙伴可以去看audio-play-demo，里面有我实际实现自动播放、循环播放，调节音量功能的代码

一、报错提示

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document

搜索发现Chrome 66为了避免标签产生随机噪音禁止没有交互前使用js进行播放。

谷歌解决方案：
在chrome地址栏输入chrome://flags/。设置Autoplay policy为No user gesture is required

火狐解决方案：
设置 — 隐私与安全 — 自动播放 – 设置改为：允许音频和视频

audio_16">二、使用audio

// template
<audio ref="audioId" src="~@/assets/xxxx.mp3" loop ></audio>

// script
//自动播放
this.$refs.audioId.play()

//循环播放 有两种方式
//方法一
this.$refs.audioId.onended = () =>{
  //重新加载
  this.$refs.audioId.load();
  // this.$refs.audioId.play();
}

//方法二
audio  标签添加  loop 属性

三、自定义音量

我这里引入了mint ui 的range组件，(主要是懒得再实现一个滑块功能了)

//引入mint ui
cnpm i --save mint-ui

//template
 <sectionclass="volume-box">
   <div class="ul">
     <div class="li">
       <p class="name">背景音量</p>
       <mt-range v-model="backValue" class="val"></mt-range>
     </div>
   </div>
 </section>

//script
watch :{
    backValue (val) {
      this.$refs.audioId.volume = val / 100
      console.log(val / 100)
    }
}

四、停止播放

this.$refs.audioId.pause()