All files / src/components SongAudio.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86                                                                                                                                                                           
<template>
  <div class="song-audio">
    <audio :src='url' controls="controls" ref="player" preload="true" @canplay="startPlay" @timeupdate="timeupdate" @ended="ended">
      <!--(1)属性:controls,preload(2)事件:canplay,timeupdate,ended(3)方法:play(),pause() -->
      <!--controls:向用户显示音频控件(播放/暂停/进度条/音量)-->
      <!--preload:属性规定是否在页面加载后载入音频-->
      <!--canplay:当音频/视频处于加载过程中时,会发生的事件-->
      <!--timeupdate:当目前的播放位置已更改时-->
      <!--ended:当目前的播放列表已结束时-->
    </audio>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
 
export default {
  name: 'song-audio',
  computed: {
    ...mapGetters([
      'id', // 音乐id
      'url', // 音乐链接
      'listOfSongs', // 存放的音乐
      'isPlay', // 播放状态
      'curTime', // 当前音乐的播放位置
      'changeTime', // 指定播放时刻
      'autoNext', // 用于触发自动播放下一首
      'voiceSize' // 音量大小
    ])
  },
  watch: {
    // 监听播放还是暂停
    isPlay: function () {
      this.togglePlay()
    },
    // 跳到指定时刻播放
    changeTime: function () {
      let player = this.$refs.player
      player.currentTime = this.changeTime
    },
    // 监听音量大小
    voiceSize: function () {
      let player = this.$refs.player
      player.volume = this.voiceSize
    }
  },
  methods: {
    // 开始/暂停
    togglePlay () {
      let player = this.$refs.player
      if (this.isPlay) {
        player.play()
      } else {
        player.pause()
      }
    },
    // 获取歌曲链接后准备播放
    startPlay () {
      let player = this.$refs.player
      // 记录音乐时长
      this.$store.commit('setDuration', player.duration)
      // 开始播放
      player.play()
      this.$store.commit('setIsPlay', true)
    },
    // 音乐播放时记录音乐的播放位置
    timeupdate () {
      let player = this.$refs.player
      this.$store.commit('setCurTime', player.currentTime)
    },
    // 音乐播放结束时触发
    ended () {
      this.$store.commit('setIsPlay', false)
      this.$store.commit('setCurTime', 0)
      this.$store.commit('setAutoNext', !this.autoNext)
    }
  }
}
</script>
 
<style>
audio {
  display: none;
}
</style>