Square Player0.9 Beta

一个简洁到极致的单曲播放器

正在使用:

保罗的小宇宙

示例:

这是一篇示例文章。Hi,我叫保罗。来自广东,是个学习中的前后端全栈程序员。目前是原生主义者,暂未使用任何其他 UI 框架进行过开发。喜欢自造轮子,热衷于研究其实现方式和原理。与此同时,我还会尝试自己修理电脑、手机等电子产品。通过写日记、主持电台、剪辑视频的方式记录我的折腾过程和生活经历。

我是个喜欢二次元的童鞋。除了对专业有热情,我在空余时间会静下心来看番。从国漫、美漫到日漫,我都有所关注。喜欢的有国漫《摩尔庄园》、《开心宝贝》、《京剧猫》,来自迪士尼、梦工厂、福克斯的美漫,以及日漫《雏子的笔记》、《漫画女孩》、《工作细胞》等等。同时也尝试过自己设计一个卡通形象,也就是下面这位啦。

使用教程:

在网页 head 标签引用项目的 CSS 文件 SQPlayer.css

<head>
...
<link href="SQPlayer.css" rel="stylesheet" type="text/css"/>
...
</head>

在网页 body 标签内的最后一行引用项目的 JS 文件 SQPlayer.js

<body>
...
<script src="SQPlayer.js"></script>
</body>

在网页 body 标签内插入一个 sqplayer 标签:

<body>
...
<sqplayer></sqplayer>
...
</body>

Square Player 支持以下属性,他们分别的意义是:

属性名 用途
right 至右显示
data-title 歌曲名
data-artist 艺术家
data-cover 专辑封面图片链接
data-link 歌曲地址
data-163 网易云音乐的 ID 或歌名

如果使用 data-163 属性引用播放器,就写成这样,其中 23682511 就是一首歌的 ID。

<sqplayer data-163="23682511"></sqplayer>

如果使用静态方法引用播放器,就需要同时编写四个属性。

<sqplayer right data-title="Crimson & Clover" data-artist="Tommy James" data-cover="封面链接" data-link="歌曲链接"></sqplayer>

Enjoy it!