一款好看+极简到不行的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 ...
随机推荐
- Pearls DP
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6647 Accepted: 3241 Description In Pe ...
- 【转】【已解决】Android中ActionBar中不显示overflow(就是三个点的那个按钮)--不错
原文网址:http://www.crifan.com/android_actionbar_three_dot_overflow_not_show/ [问题] 折腾: [记录]继续尝试给Android程 ...
- 数据结构(动态树):UOJ 207 共价大爷游长沙
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABHwAAAJZCAIAAABUW7XHAAAgAElEQVR4nOy93cstx5Xm2f9TXh2EOe
- 数据结构(主席树):COGS 2213. K个串
2213. K个串 ★★★★ 输入文件:bzoj_4504.in 输出文件:bzoj_4504.out 简单对比时间限制:20 s 内存限制:512 MB [题目描述] 兔子们在玩k个 ...
- 【模拟】Codeforces 705B Spider Man
题目链接: http://codeforces.com/problemset/problem/705/B 题目大意: 两个人玩游戏,总共N个数,分别求前I(I=1 2 3...n)个数时游戏的获胜者是 ...
- ASP.Net MVC-Web API使用Entity Framework时遇到Loop Reference
原文地址:http://www.it165.net/pro/html/201210/3932.html 最近开始研究Web API,运气不错第一个测试项目就遇到问题@@-当新增Control时选择[A ...
- SRM 393(1-250pt)
题意:有m个人投票,每个人在心里对所有候选者排了一个序,比如“210”,则他最想投2号,如果2号已经出局他会投1号,最后投0号,否则弃权不投.选举时进行多轮投票,知道选出winner或者所有人均出局. ...
- 结构性产品 Structured Product
定义 结构性产品是固定收益产品(Fixed Income Instruments)的一个特殊种类.它将固定收益产品(通常是定息债券)与金融衍生交易(如远期.期权.掉期等)合二为一,增强产品收益或将投资 ...
- Android 图片选择器
图片选择器,遍历系统所有图片并显示,点击查看大图,长按选中,并将结果返回 字体颜色res/color建立text_selecor.xml <selector xmlns:android=&quo ...
- poj 3171 Cleaning Shifts(区间的最小覆盖价值)
Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2743 Accepted: 955 De ...