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

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

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

功能模块

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

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

组件结构

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界面,其中最重要的是cdlyric两个子组件。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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript中字符串分割函数split用法实例

    我们一起来详细讲解一下“JavaScript中字符串分割函数split用法实例”的完整攻略。 什么是split函数 在JavaScript中,split()是一个字符串函数,它用于将字符串分割成字符串数组,使用指定的分隔符或正则表达式。 语法 string.split(separator, limit) separator: 必须。字符串或正则表达式,标记字…

    JavaScript 2023年5月28日
    00
  • 前端配合后端实现Vue路由权限的方法实例

    下面我将为你详细讲解“前端配合后端实现Vue路由权限的方法实例”的完整攻略。 前言 在实际项目中,我们经常需要对系统菜单和路由进行权限控制。Vue路由权限控制是前端开发中非常常见的一种技术实现,下面我们就来介绍一下前端配合后端实现Vue路由权限的方法实例。 步骤 步骤一:在后端对菜单和路由进行权限控制 在后端实现对菜单和路由的权限控制是本次实现的核心。可以通…

    JavaScript 2023年6月11日
    00
  • js创建数组的简单方法

    当我们需要在JavaScript程序中储存一组数据时,往往会使用数组这种数据结构。那么,如何在JavaScript中创建一个数组呢?接下来,我将为你讲解几种简单易用的方法。 直接使用方括号 [ ] 我们可以直接使用方括号来创建一个数组,数组的每一个元素通过逗号进行分割。 let arr = [1, 2, 3, 4, 5]; console.log(arr);…

    JavaScript 2023年5月27日
    00
  • javascript基础练习之翻转字符串与回文

    以下是对“javascript基础练习之翻转字符串与回文”的完整攻略: 1. 翻转字符串 1.1 题目描述 输入一个字符串,将其翻转后输出。 1.2 解题思路 字符串的翻转可以有多种方式,以下介绍两种。 1.2.1 利用split()和reverse()方法 首先使用split()方法将字符串以空格为分割符转换为数组; 然后使用reverse()方法将数组中…

    JavaScript 2023年5月28日
    00
  • JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

    JavaScript原生xmlHttp与jQuery的ajax方法都是用来进行异步数据请求的工具。其中,ajax方法还支持多种数据格式,包括json格式。下面,我们将详细讲解JavaScript原生xmlHttp与jQuery的ajax方法json数据格式的使用攻略。 1. JavaScript原生xmlHttp的使用方法 1.1 创建XMLHttpRequ…

    JavaScript 2023年5月27日
    00
  • 将字符串中由空格隔开的每个单词首字母大写

    要将字符串中由空格隔开的每个单词首字母大写,可以使用字符串操作方法和正则表达式。 步骤如下: 首先要将字符串进行拆分,将每个单词分离。可以使用split()方法,该方法可以按照指定字符或正则表达式对字符串进行分割,返回一个由分割出来的子字符串组成的数组。 例如: let str = "hello world"; let arr = str…

    JavaScript 2023年6月11日
    00
  • js对字符串和数字进行加法运算的一些情况

    关于JavaScript中字符串和数字进行加法运算的情况,我们需要先了解一下类型转换的概念。 JavaScript中有两种类型转换,分别是隐式类型转换和显式类型转换。隐式类型转换是指不通过代码进行类型转换的情况下,JavaScript自动将数据转换为指定类型。例如,在进行加法运算时,如果有一个操作数为数字,另一个操作数为字符串,JavaScript会将字符串…

    JavaScript 2023年5月28日
    00
  • d3.js入门教程之数据绑定详解

    d3.js入门教程之数据绑定详解 什么是d3.js? d3.js全称Data-Driven Documents,是一个非常强大的数据可视化库。使用d3.js可以将数据转化为各种图表、动画和交互式图形。 为什么需要数据绑定? 数据绑定是在d3.js中非常重要的概念,因为它是将数据和元素结合在一起的基础。在d3.js中,元素是表示数据的最终呈现形式。因此,了解如…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部