yanzi_player

燕子web音乐播放器

这是一个轻量级的、基于vue编写的音乐播放器，只需要几句代码，就可以得到一个音乐播放器

可以二次开发给组件传入自己喜欢的音乐，也可以使用组件默认的音乐

看看效果

使用方法

下载

npm i yanzi_player

<template>
  <div id="app">
      
    <!-- 使用示例 -->
    <yanziPlayer></yanziPlayer>
      
  </div>
</template>

<script>
import "yanzi_player/lib/yanzi_player.css";// 引入基本样式
import yanziPlayer from "yanzi_player/lib/yanzi_player.umd.min.js";// 引入核心文件

export default {
  name: "App",
  components: {
    yanziPlayer//注册组件
  }
};
</script>

具体使用

<yanziPlayer 
    :initVolume="initVolume" 
    :isShowMusic.sync="isShowMusic" 
    :prePath="prePath" 
    :musicList.sync="musicList"
    :zIndex="zIndex" 
    @uploadLRC="uploadLRC" 
    @uploadMusic="uploadMusic"
    @uploadMusicIcon="uploadMusicIcon"
></yanziPlayer>

属性

属性名称	说明	类型	必填	默认值
zIndex	播放器的样式层级	String	false	1111
musicList	播放器音乐列表	Array	false	如下所示
prePath	歌曲地址的域名前缀，如果歌曲地址只是一个文件名，要在前面拼接域名时使用，否则可忽略	String	false	""
isShowMusic	是否显示音乐播放器	Boolean	false	false
initVolume	播放器默认音量（0-100）	Number	false	50
showOpenBtn	是否显示打开播放器的按钮	Boolean	false	true
openBtnDrag	打开播放器的按钮是否可拖拽	Boolean	false	true
btnStyle	打开播放器按钮的初始样式	Object	false	如下所示

播放器音乐列表

配置名称	说明	类型	必填
author	歌手名	String	false
image	歌手头像	String	false
lrc	歌词	String	false
name	歌曲名	String	true
src	可播放的歌曲地址	String	true

歌曲列表数据JSON示例

musicList: [
  {
    author: "信乐团",
    image: "https://xzlovecyy.com/files/music/image/信乐团.png",
    lrc: "[ti:离歌]↵[ar:信乐团]↵[al:天高地厚]↵[00:01.50]离歌↵[00:04.94]作词：姚若龙 作曲：Yoon Il Sang↵[00:08.94]演唱：信乐团↵[00:28.94]一开始我只相信↵[00:34.96]伟大的是感情↵[00:42.14]最后我无力的看清↵[00:48.24]强悍的是命运↵[00:55.66]你还是选择回去↵[01:01.69]他刺痛你的心　↵[01:03.95]但你不肯觉醒↵[01:08.96]你说爱本就是梦境↵[01:14.84]跟你借的幸福　我只能还你↵[01:21.32]想留不能留　才最寂寞↵[01:28.09]没说完温柔　只剩离歌↵[01:34.67]心碎前一秒　↵[01:38.25]用力的相拥着沉默↵[01:41.68]用心跳送你　辛酸离歌↵[02:18.87]原来爱是种任性　↵[02:24.93]不该太多考虑↵[02:32.19]爱没有聪不聪明　↵[02:38.36]只有愿不愿意↵[02:45.52]你还是选择回去↵[02:51.65]他刺痛你的心　↵[02:53.97]但你不肯觉醒↵[02:58.82]你说爱本就是梦境↵[03:05.01]跟你借的幸福　我只能还你↵[03:11.32]想留不能留　才最寂寞↵[03:18.03]没说完温柔　只剩离歌↵[03:24.62]心碎前一秒　↵[03:28.26]用力的相拥着沉默↵[03:31.63]用心跳送你　辛酸离歌↵[03:37.95]想留不能留　才最寂寞↵[03:44.68]没说完温柔　只剩离歌↵[03:51.21]心碎前一秒↵[03:54.91]用力的相拥着沉默↵[03:58.03]用心跳送你　辛酸离歌↵[04:04.88]看不见永久　听见离歌",
    name: "离歌",
    src: "https://xzlovecyy.com/files/music/信乐团 - 离歌.mp3"
  },
  {
    author: "赖伟锋",
    image: "https://xzlovecyy.com/files/music/image/赖伟锋.png",
    lrc: "[00:00.00]赖伟锋 - 闹够了没有↵[00:04.00]词曲：赖伟锋↵[00:16.53]你会找我陪你哭↵[00:19.74]会让我整夜听你诉苦↵[00:23.42]总爱让我帮你挑选衣服↵[00:27.37]我都在你身边当你孤独↵[00:32.27]你找我陪你无聊↵[00:35.60]陪你看你最爱的频道↵[00:39.54]总要让我陪着你睡不着↵[00:43.40]陪着你吵闹陪着你感冒↵[00:47.98]我知道你最爱的口味↵[00:51.79]知道你最爱用的香水↵[00:55.66]最爱说的词汇↵[00:58.40]最爱晚睡和你最爱是谁↵[01:05.43]没有关系我们只是朋友↵[01:09.25]偶尔会替你分担你的伤口↵[01:13.27]把我的肩膀借给你当枕头↵[01:17.40]在你需要我的时候↵[01:21.43]没有关系我们只是朋友↵[01:25.10]所以不会有分开的理由↵[01:29.39]只是偶尔会问我自己↵[01:33.34]闹够了没有↵[01:38.40]你告诉我他很好↵[01:41.56]你想要的他都会知道↵[01:45.43]喜欢他永远都不会计较↵[01:49.37]你那些荒唐的无理取闹↵[01:54.49]你说他对你说谎↵[01:57.65]说他不再会为你着想↵[02:01.50]已经对他渐渐感到失望↵[02:05.50]我只能默默的替你疗伤↵[02:09.57]为什么要我看你流泪↵[02:13.68]你的痛都让我来体会↵[02:17.68]都由我来安慰 也无所谓↵[02:22.74]不管你爱着谁↵[02:27.42]没有关系我们只是朋友↵[02:31.17]偶尔会替你分担你的伤口↵[02:35.22]把我的肩膀借给你当枕头↵[02:39.36]在你需要我的时候↵[02:43.35]没有关系我们只是朋友↵[02:47.28]所以不会有分开的理由↵[02:51.41]只是偶尔会问我自己↵[02:55.38]闹够了没有↵[03:15.46]你会不会看到有一个我↵[03:19.22]把你的失落变成我的难过↵[03:23.31]扮演的角色只能保持沉默↵[03:27.38]坚持着唯一的执着↵[03:31.47]我该怎么才能和你配合↵[03:35.23]要多少虚伪才扮演的磊落↵[03:39.46]有多少次想对你说↵[03:43.41]你身边还有我",
    name: "死而无憾",
    src: "http://192.168.1.238:9995/music/爱乐团王超 - 死而无憾.mp3"
  },
],

按钮样式

按钮样式json示例（目前只能配置下面这些样式）

btnStyle: {
  color: "white",
  backgroundColor: "#ccc",
  width: "50px",
  height: "50px",
  right: "30px",
  bottom: "80px",
  shadowColor: "#666"
}

事件

事件名称	说明	回调参数
uploadLRC	上传歌词	歌曲对象
uploadMusic	上传歌曲	歌曲对象
uploadMusicIcon	上传歌手头像	歌曲对象

方法

方法名称	说明	参数
openPlayer	显示播放器	-
closePlayer	隐藏播放器	-

更新日志（倒序）

2021年3月9日16点53分 - 打开播放器按钮可选择是否拖拽

2021年3月9日10点42分 - 可配置打开播放器按钮是否显示、打开播放器按钮的样式

2021年3月8日20点14分 - 初次发布