燕子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分 - 初次发布