Demo:

github

skPlayer在线预览

预览:

单曲循环模式预览:

使用方法:

方式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的更多相关文章

  1. ubuntu下一款有点感觉的 linux音乐播放器 clementine(小橘子))

    https://www.clementine-player.org/ 在linux听音乐的感觉确实不是很好,音乐播放器很多.但是仅仅只是数量上的优势,在确实不是很好用.自带的rhythmbox确实很占 ...

  2. 一款非常简单的android音乐播放器源码分享给大家

    一款非常简单的android音乐播放器源码分享给大家,该应用虽然很小,大家常用的播放器功能基本实现了,可能有点还不够完善,大家也可以自己完善一下,源码在源码天堂那里已经有了,大家可以到那里下载学习吧. ...

  3. Android应用--简、美音乐播放器增加音量控制

    Android应用--简.美音乐播放器增加音量控制 2013年6月26日简.美音乐播放器继续完善中.. 题外话:上一篇博客是在6月11号发的,那篇博客似乎有点问题,可能是因为代码结构有点乱的原因,很难 ...

  4. Android应用--简、美音乐播放器获取专辑图片(自定义列表适配器)

    Android应用--简.美音乐播放器获取专辑图片(自定义列表适配器) 2013年7月3日简.美音乐播放器开发 第二阶段已增加功能: 1.歌词滚动显示 2.来电监听 3.音量控制 4.左右滑动切换歌词 ...

  5. 使用react native制作的一款网络音乐播放器

    使用react native制作的一款网络音乐播放器 基于第三方库 react-native-video设计"react-native-video": "^1.0.0&q ...

  6. C# 一款属于自己的音乐播放器

    本文利用C# 调用Windows自带的Windows Media Player 打造一款属于自己的音乐播放器,以供学习分享使用,如有不足之处,还请指正. 概述 Windows Media Player ...

  7. 原创: 做一款属于自己风格的音乐播放器 (HTML5的Audio新特性)

    灵感的由来是前些天看到了博: http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器,感觉很不错,是用Flex做的Flash播放器. 于是我也便想到了,自己也来来弄 ...

  8. python极简教程06:生成式和装饰器

    测试奇谭,BUG不见. 这一场,主讲python的生成式和装饰器. 目的:掌握四种生成式(列表.生成器.集合.字典),装饰器的原理和使用. 生成式 01 什么是生成式? 能够用一行代码,快速高效的生成 ...

  9. 使用python打造一款音乐播放器

    作者qq:64761294 编程/考试交流群:834531270 欢迎交流 核心播放模块(pygame内核) import time import pygame import easygui as g ...

随机推荐

  1. ZKW费用流修正

    #include<iostream> #include<cstdio> #include<cmath> #include<algorithm> #inc ...

  2. LNMP一键安装脚本

    #!/bin/bash #LNMP(Fastcgi) #CentOS + MySQL 5.5 #-- iptables -F iptables -X iptables -Z iptables -A I ...

  3. bzoj 3876 [Ahoi2014]支线剧情(有上下界的最小费用流)

    3876: [Ahoi2014]支线剧情 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 484  Solved: 296[Submit][Status ...

  4. 《University Calculus》-chape4-导数的应用-洛必达法则

    在求解极限的时候,我们常会遇到0/0型的不定式而无法进一步的求解极限,而洛必达法则就是用于处理这样的特定情况. 洛必达法则: 其证明过程要基于柯西中值定理(在该专栏的微分中值定理中给出). 证明:

  5. poj1323

    题目大意: 预测游戏 假如有MR人,包括你自己,玩一个特殊的卡片游戏,开始的时候,没有参与者接收到N张卡片,这pip卡片是一个正整数最少M*N,没有两张pip卡片是一样的,在一圈后,每个玩家选择一张卡 ...

  6. ServletConfig

    ServletConfig Servlet配置 比如web程序中的某一个Servlet需要配置一些初始化信息,需要在web.xml中进行配置 <servlet> <servlet-n ...

  7. 怎样把redis编译为库,挪为己用?

    其实这是个伪命题.因为只要正常编译redis,那么在 /deps/hiredis/ 目录下就会生成动态库文件 libhiredis.so. 为了便于学习redis源码,编写一些测试程序,并进行单步跟踪 ...

  8. php开启curl和openssl

    php开启curl和openssl 开启php curl函数库的步骤 1).去掉windows/php.ini 文件里;extension=php_curl.dll前面的; /*用 echo phpi ...

  9. POJ 3384 Feng Shui 半平面交

    题目大意:一个人很信"Feng Shui",他要在房间里放两个圆形的地毯. 这两个地毯之间可以重叠,可是不能折叠,也不能伸到房间的外面.求这两个地毯可以覆盖的最大范围.并输出这两个 ...

  10. SpringMVC 学习笔记(一) Hello World

    springMVC概述: Spring MVC 是眼下最主流的MVC 框架之中的一个 Spring MVC 通过一套 MVC 注解.让 POJO 成为处理请 求的控制器,而无须实现不论什么接口. 支持 ...