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
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue-music关于Player播放器组件详解 - Python技术站