vue-music关于Player播放器组件详解-前端开发

Vue-music是一款基于Vue.js的音乐WebApp，它的开源代码也被广泛使用于其他Vue项目中。其Player播放器组件是整个应用中最核心的组件之一，本文将对其进行详细的解析和介绍。

vue-music关于Player播放器组件详解

Vue-music是一款基于Vue.js的音乐WebApp，它的开源代码也被广泛使用于其他Vue项目中。其Player播放器组件是整个应用中最核心的组件之一，本文将对其进行详细的解析和介绍。

功能模块

Player播放器组件具有以下功能模块：

播放、暂停、上一曲、下一曲等基本音乐播放操作；
歌曲封面、歌词、进度条、音量控制、收藏等音乐播放器涉及到的主要UI展示元素；
播放列表的切换、添加、删除等操作；
微信分享和收藏功能。

组件结构

Player播放器组件的结构如下：

<template>
  <div class="player">
    <div class="header">
      <router-link tag="div" to="/search" class="icon search-icon"></router-link>
      <span class="title">{{ currentSong.name }}</span>
      <span class="subtitle">{{ currentSong.singer }}</span>
    </div>
    <div class="content">
      <div class="cd-wrapper">
        <div class="cd"
             :class="playing ? 'play' : 'pause'"
             ref="cd">
          <img class="image" :src="currentSong.image" alt="">
          <div class="playing-icon" :class="{'pause' : !playing}">
            <i class="icon-mini-mini-disc"></i>
          </div>
        </div>
      </div>
      <div class="lyric-wrapper">
        <div class="lyric">
          <div class="text-wrapper"
               ref="textWrapper">
            <div class="lines"
                 :style="{'transform' : `translateY(${translateY}px)`}"
                 ref="lines">
              <p class="text-line"
                 :class="{'current':lineNum === index}"
                 v-for="(item,index) in lyricArr">{{item.txt}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="player-panel">
        <div class="time">
          <span class="current-time">{{ formatTime(currentTime) }}</span>
          <span class="time-bar">
            <progress :value="currentTime" :max="duration"></progress>
          </span>
          <span class="total-time">{{ formatTime(duration) }}</span>
        </div>
        <div class="play-mode"
             @click="changeMode">
          <i class="icon-mode-{{mode}}"></i>
        </div>
        <div class="btn-wrapper">
          <div class="btn like"
               :class="{'active':likeList[currentSong.id]}"
               @click="toggleLike">
            <i class="icon-like"></i>
          </div>
          <div class="btn prev" @click="prev">
            <i class="icon-prev"></i>
          </div>
          <div class="btn play" @click="togglePlaying">
            <i class="icon-pause"
               v-if="playing"></i>
            <i class="icon-play"
               v-else></i>
          </div>
          <div class="btn next" @click="next">
            <i class="icon-next"></i>
          </div>
          <div class="btn list"
               @click="showList = true">
            <i class="icon-list"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="list-mask"
         :class="{'hide': !showList}"
         @click="showList = false">
      <div class="list-wrapper">
        <div class="list-header">
          <h1>播放列表</h1>
          <div class="close" @click="showList = false">
            <i class="icon-cross"></i>
          </div>
        </div>
        <div class="list-content">
          <ul>
            <li :class="{'active': song.id === currentSong.id}" v-for="song in playList" :key="song.id" @click="selectSong(song)">
              <h2>{{ song.name }}</h2>
              <p>{{ song.singer }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

Player播放器组件由一个主要的div容器和多个子组件构成，主要展示了音乐播放器的UI界面，其中最重要的是cd和lyric两个子组件。cd组件中展示了当前播放歌曲的封面图片，并按照播放状态进行旋转；lyric组件负责展示当前播放歌曲的歌词。

组件属性

Player播放器组件接受一些属性，例如currentSong表示当前播放的歌曲、playing表示当前是否正在播放、playList表示当前播放列表等等。

props: {
  currentSong: {
    type: Object,
    default() {
      return {}
    }
  },
  playing: {
    type: Boolean,
    default: true
  },
  playList: {
    type: Array,
    default() {
      return []
    }
  },
  mode: {
    type: Number,
    default: playMode.sequence
  }
}

组件方法

Player播放器组件包含许多方法，下面介绍其中几个。

togglePlaying

当用户点击播放按钮时，togglePlaying这个方法被调用，用于切换播放状态。当播放状态为playing时，点击效果为暂停；反之，点击效果为播放。

togglePlaying() {
  this.$emit('togglePlaying')
}

changeduration

该方法是当用户切换歌曲时，更新歌曲总时长的方法。

changeDuration(duration) {
  this.duration = duration
}

changeCurrentTime

该方法是当用户调整歌曲进度条时，更新当前播放时长的方法。

changeCurrentTime(currentTime) {
  this.currentTime = currentTime
}

changeMode

该方法是当用户点击播放模式按钮时，切换播放模式的方法。本App提供的播放模式有顺序播放、单曲循环、随机播放三种，每次点击播放模式按钮即可在三种播放模式之间循环切换。

changeMode() {
  let mode = (this.mode + 1) % 3
  this.$emit('changeMode', mode)
}

示例说明

示例1：设置当前播放歌曲的时长和总时长。

<player
  :current-song="currentSong"
  :playing="playing"
  :play-list="playList"
  :mode="mode"
  @togglePlaying="togglePlaying"
  @changeMode="changeMode"
  @changeDuration="changeDuration"
  @changeCurrentTime="changeCurrentTime"
></player>

示例2：切换播放模式。

changeMode(mode) {
  this.mode = mode
}