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 ES6中对象类型Sets的介绍与使用详解

    Javascript ES6中对象类型Sets的介绍与使用详解 1. 什么是Sets? Sets是JavaScript中的一种数据结构,它是一个集合,存储不重复的数据。和数组相似,它也是一组有序的数据,但是它有以下区别:- Sets中的数据是唯一的- Sets中的数据是无序的 2. Sets常用的方法 2.1 创建一个Set 可以利用new Set()来创建…

    JavaScript 2023年5月27日
    00
  • LazyLoad 延迟加载(按需加载)

    LazyLoad 延迟加载(按需加载)是一种在页面加载时,只加载当前视窗内所需要的部分内容,避免不必要的资源浪费和页面加载时间过长的现象。这种技术在网站中的应用非常常见。 实现方式 实现LazyLoad延迟加载的方式有多种,其中最常见的是使用JavaScript库。以下是一些常见的JavaScript库:- Layzr.js:轻量级、易扩展和可定制,可用于图…

    JavaScript 2023年6月11日
    00
  • 日常收集JS邮箱验证正则表达式

    当我们在开发 web 应用时,经常会有需要验证邮箱地址的情况,其中验证方法之一就是使用正则表达式。下面,我们来讲解一个较为完整的日常收集JS邮箱验证正则表达式的攻略。 确定目标 在进行任何一项技术攻略时,第一步都是要明确目标。对于本文所讲的“日常收集JS邮箱验证正则表达式”的攻略,其目标是收集常用的 JS 邮箱验证正则表达式并进行整合。 收集来源 在确定了目…

    JavaScript 2023年6月10日
    00
  • JS中自定义事件与观察者模式详解

    那我来为你详细讲解一下关于“JS中自定义事件与观察者模式”的攻略。 一、 什么是自定义事件和观察者模式? 1. 自定义事件 在JavaScript中,浏览器提供了一些自带的事件,如 click、mouseover 等等。但有时候,我们需要在我们自己的应用程序中创建自定义事件,这就需要用到自定义事件技术了。 自定义事件即我们自己定义的事件,类似于浏览器内置的事…

    JavaScript 2023年5月19日
    00
  • window.js 主要包含了页面的一些操作

    简介 window.js 是一个在浏览器中运行的 JavaScript 脚本,它主要包含了页面的一些操作,如创建弹窗、改变网页地址以及在窗口中打印信息等。它作为浏览器的全局对象之一,常常被程序员用来操纵浏览器的标签页或者是浏览器自身。 页面操作 window.js 提供多种页面操作的方法,比如弹出对话框、打开新窗口、关闭当前窗口等。以下是两个简单的示例说明。…

    JavaScript 2023年6月10日
    00
  • 实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)

    实用的JS正则表达式 正则表达式是对字符串操作的一种极其强大的工具。在JavaScript中,正则表达式同样也是非常重要和常用的。本文将会讲解一些常用的正则表达式及其匹配规则。 1. 手机号正则表达式 手机号正则表达式的匹配规则如下: /^1[3456789]\d{9}$/ 其中: ^ 表示字符串开始位置; 1 表示以数字1开始; [3456789] 中括号…

    JavaScript 2023年5月19日
    00
  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    下面是“JS实现利用闭包判断Dom元素和滚动条的方向示例”的完整攻略。 什么是闭包? 在JavaScript中,当函数可以访问并操作其作用域之外的变量时,就产生了闭包。 在函数内部定义一个内部函数,在内部函数中访问了外部函数的变量时,就形成了一个闭包。这个内部函数可以访问到外部函数中定义的变量,即使外部函数已经执行结束,这些变量仍然继续存在。 闭包有助于隐藏…

    JavaScript 2023年6月10日
    00
  • JS正则表达式常见函数与用法小结

    JS正则表达式常见函数与用法小结 一、正则表达式基础 1.1 基本语法 JS 的正则表达式使用反斜杠(backslash)来表示元字符,比如\d表示匹配数字字符,\w表示匹配任意字母数字字符,\s表示匹配空白字符等。 1.2 匹配模式 i:忽略大小写 g:全局匹配(即匹配完一次继续匹配下一次) m:多行匹配模式 1.3 常见元字符 .:匹配除了换行符以外的任…

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