基礎的音樂播放按鈕

自制播放器，來替換原生的播放器。

<audio src="http://mz.mxlogo.com/mp3-1-aicunzai.mp3"   muted="muted" controls="controls"  ref="music">
</audio>
<button @click="bof">播放</button>
<button @click="mute">靜音</button>
<input type="range" min="0" max="1" step="0.1"  @change="range($event)" value="0.5" style="max-width: 300px;" />
  <!--
  audio:播放標籤
  src:音樂路徑
  controls: controls=「controls」是否使用按鈕音量暫停按鈕
  autoplay: 等autoplay或true自動播放
  muted:上來就靜音，就算是自動播放也沒有聲音
  draggable:只能拖不能動，有點多餘請少用
  volume:播放器的音量大小
  range:調節長款的大小。從0開始，到1最大。value="0.5"和step="0.1"並存
  -->

export default{
  data(){
    return{

    }
  },
  methods:{
    bof(){
      if(this.$refs.music.paused===true)
      {
        this.$refs.music.play()
      }
      else{
        this.$refs.music.pause()
      }
    },
    mute()
    {
      if(this.$refs.music.muted===true)
      {
        this.$refs.music.muted = false
      }
      else{
        this.$refs.music.muted = true
      }
    },
    range(e)
    {
      console.log(e.target.value)
      this.$refs.music.volume = e.target.value
    }
  }
}