zplayer->开源网页嵌入式播放器使用体验
转自博主自己的博客 http://gyblog.top
如你所见,本博客多了一个音乐在线播放的功能
是一个基于JavaScript的小demo,源码来自于gitee
项目地址
先把这个项目的截图和readme贴出来吧。。。
然后贴一下README(水一下博客)
zplayer
项目介绍
史上最精简的音乐播放器!300多行js!你想要的功能zplayer都有!请加Q群130512958交流技术。zplayer还支持初始化多个播放器。如果使用有建议或者其他问题,可以加群交流。
喜欢的留步帮忙star一下谢谢~
版权说明
本产品最终解释权归智博客所有,任何人不得引任何形式进行盗窃并公开传播等侵权行为,盗版必究。
使用说明
- down下来本项目后,在页面内引入 css/zplayer.min.css和js/zplayer.min.js
- 使用方法以及参数说明
(autoplay,showlrc,fixed,listFolded,listMaxHeight五个参数可以不传,则走默认值,具体见以下代码示例)。
<div id="player"></div>
<script>
var zp = new zplayer({
element: document.getElementById("player"),
autoPlay: false,/*是否开启自动播放,默认false*/
lrcStart: true,/*是否开启歌词功能 ,默认false(为true时musics集合中需要传入lrc字段。)*/
showLrc: true,/*开启歌词功能后是否立即展示歌词内容 ,默认false*/
fixed: true, /*是否固定在底部,默认false*/
listFolded: true, /*列表默认折叠,默认false*/
listMaxHeight: 300, /*列表最大高度,默认240*/
musics: [{
title: "可能否",
author: "木小雅",
url: "http://music.163.com/song/media/outer/url?id=569214126.mp3",
pic: "http://p1.music.126.net/SJYnDay7wgewU3O7tPfmOQ==/109951163322541581.jpg?param=300x300",
lrc:"[00:00] 作曲 : 木小雅\n[00:01] 作词 : 木小雅\n[00:17]春天的风 能否吹来夏天的雨"
},{
title: "讲真的",
author: "曾惜",
url: "http://music.163.com/song/media/outer/url?id=30987293.mp3",
pic: "http://p1.music.126.net/cd9tDyVMq7zzYFbkr0gZcw==/2885118513459477.jpg?param=300x300",
lrc:"[by:却连一句我爱你都不能说出口]\n[ti:讲真的]\n[ar:曾惜]\n[al:不要你为难]\n[by:冰城离殇]\n[00:00] 作曲 : 何诗蒙\n[00:01] 作词 : 黄然\n[00:18]今夜特别漫长"
其他开源项目
客官留步:
zb-shiro:https://gitee.com/supperzh/zb-shiro
非常精简的springboot+mybatis+redis+shiro+thymeleaf权限后台项目。花一分钟时间进来了解一下~
播放器预览图
- 默认效果
2.歌词+不固定效果
- 固定底部(折叠)效果
说一下使用的体验吧,以及一些个人嵌入时的经验
- 首先是样式,说实话这个播放器的样式我是真的爱了,很简洁了可以说是。。
- 其次从这个插件的嵌入难度来说,是非常简单易懂的,基本上右手就行
- 对于这个插件提供的API,本人认为是十分齐全了的
- 也许唯一需要改进的就是没能对各大音乐平台提供足够的支持了吧(笑
还有啥好说的呢?抓紧时间享受开源的快乐吧~