一款好看+极简到不行的HTML5音乐播放器-skPlayer
Demo:
预览:

单曲循环模式预览:

使用方法:
方式1:NPM
npm install skplayer
方式2:引入文件
引入css文件:
<link rel="stylesheet" href="./dist/skPlayer.min.css">
写入播放器DOM:
<div id="skPlayer"></div>
引入js文件:
<script src="./dist/skPlayer.min.js"></script>
配置skPlayer对象:
skPlayer({
src:'http://o9vplcp9o.bkt.clouddn.com/music.mp3',//音乐文件,必填
name:'打呼',//歌曲名称,必填
author:'潘玮柏&杨丞琳',//歌手,必填
cover:'http://o9vplcp9o.bkt.clouddn.com/cover.jpg'//专辑封面,必填
//loop:true 是否单曲循环,选填
});
技术依赖:
原生JAVASCRIPT,HTML5 DOM API,HTML5 AUDIO API,CSS3
Github:
https://github.com/wangpengfei15975/skPlayer
一款好看+极简到不行的HTML5音乐播放器-skPlayer的更多相关文章
- ubuntu下一款有点感觉的 linux音乐播放器 clementine(小橘子))
https://www.clementine-player.org/ 在linux听音乐的感觉确实不是很好,音乐播放器很多.但是仅仅只是数量上的优势,在确实不是很好用.自带的rhythmbox确实很占 ...
- 一款非常简单的android音乐播放器源码分享给大家
一款非常简单的android音乐播放器源码分享给大家,该应用虽然很小,大家常用的播放器功能基本实现了,可能有点还不够完善,大家也可以自己完善一下,源码在源码天堂那里已经有了,大家可以到那里下载学习吧. ...
- Android应用--简、美音乐播放器增加音量控制
Android应用--简.美音乐播放器增加音量控制 2013年6月26日简.美音乐播放器继续完善中.. 题外话:上一篇博客是在6月11号发的,那篇博客似乎有点问题,可能是因为代码结构有点乱的原因,很难 ...
- Android应用--简、美音乐播放器获取专辑图片(自定义列表适配器)
Android应用--简.美音乐播放器获取专辑图片(自定义列表适配器) 2013年7月3日简.美音乐播放器开发 第二阶段已增加功能: 1.歌词滚动显示 2.来电监听 3.音量控制 4.左右滑动切换歌词 ...
- 使用react native制作的一款网络音乐播放器
使用react native制作的一款网络音乐播放器 基于第三方库 react-native-video设计"react-native-video": "^1.0.0&q ...
- C# 一款属于自己的音乐播放器
本文利用C# 调用Windows自带的Windows Media Player 打造一款属于自己的音乐播放器,以供学习分享使用,如有不足之处,还请指正. 概述 Windows Media Player ...
- 原创: 做一款属于自己风格的音乐播放器 (HTML5的Audio新特性)
灵感的由来是前些天看到了博: http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器,感觉很不错,是用Flex做的Flash播放器. 于是我也便想到了,自己也来来弄 ...
- python极简教程06:生成式和装饰器
测试奇谭,BUG不见. 这一场,主讲python的生成式和装饰器. 目的:掌握四种生成式(列表.生成器.集合.字典),装饰器的原理和使用. 生成式 01 什么是生成式? 能够用一行代码,快速高效的生成 ...
- 使用python打造一款音乐播放器
作者qq:64761294 编程/考试交流群:834531270 欢迎交流 核心播放模块(pygame内核) import time import pygame import easygui as g ...
随机推荐
- ZKW费用流修正
#include<iostream> #include<cstdio> #include<cmath> #include<algorithm> #inc ...
- LNMP一键安装脚本
#!/bin/bash #LNMP(Fastcgi) #CentOS + MySQL 5.5 #-- iptables -F iptables -X iptables -Z iptables -A I ...
- bzoj 3876 [Ahoi2014]支线剧情(有上下界的最小费用流)
3876: [Ahoi2014]支线剧情 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 484 Solved: 296[Submit][Status ...
- 《University Calculus》-chape4-导数的应用-洛必达法则
在求解极限的时候,我们常会遇到0/0型的不定式而无法进一步的求解极限,而洛必达法则就是用于处理这样的特定情况. 洛必达法则: 其证明过程要基于柯西中值定理(在该专栏的微分中值定理中给出). 证明:
- poj1323
题目大意: 预测游戏 假如有MR人,包括你自己,玩一个特殊的卡片游戏,开始的时候,没有参与者接收到N张卡片,这pip卡片是一个正整数最少M*N,没有两张pip卡片是一样的,在一圈后,每个玩家选择一张卡 ...
- ServletConfig
ServletConfig Servlet配置 比如web程序中的某一个Servlet需要配置一些初始化信息,需要在web.xml中进行配置 <servlet> <servlet-n ...
- 怎样把redis编译为库,挪为己用?
其实这是个伪命题.因为只要正常编译redis,那么在 /deps/hiredis/ 目录下就会生成动态库文件 libhiredis.so. 为了便于学习redis源码,编写一些测试程序,并进行单步跟踪 ...
- php开启curl和openssl
php开启curl和openssl 开启php curl函数库的步骤 1).去掉windows/php.ini 文件里;extension=php_curl.dll前面的; /*用 echo phpi ...
- POJ 3384 Feng Shui 半平面交
题目大意:一个人很信"Feng Shui",他要在房间里放两个圆形的地毯. 这两个地毯之间可以重叠,可是不能折叠,也不能伸到房间的外面.求这两个地毯可以覆盖的最大范围.并输出这两个 ...
- SpringMVC 学习笔记(一) Hello World
springMVC概述: Spring MVC 是眼下最主流的MVC 框架之中的一个 Spring MVC 通过一套 MVC 注解.让 POJO 成为处理请 求的控制器,而无须实现不论什么接口. 支持 ...