一款好看+极简到不行的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 ...
随机推荐
- Android设备信息、感应器检测
近日产品已经上线,开始有时间来做自己的事情,于是就开始学习和巩固一些以前用过的或者学过的技术.昨天写了一个检测Android设备的序列号和IMEI以及感应器等等的一个Demo来跟大家分享一下. 在开发 ...
- 字符串(后缀数组||SAM):NOI2015 品酒大会
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAByIAAALuCAIAAABtq0bwAAAgAElEQVR4nOy9f2wb150vev4boESeln ...
- Windows7 搜索功能关闭了,怎么重新打开
你的搜索功能被关闭了,打开cmd.exe,进入windows\system32输入OptionalFeatures.exe,里面有搜索功能选项,选择他.重新启动.
- Invert Binary Tree——LeetCode
Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...
- HDOJ 2014 青年歌手大奖赛_评委会打分
Problem Description 青年歌手大奖赛中,评委会给参赛选手打分.选手得分规则为去掉一个最高分和一个最低分,然后计算平均得分,请编程输出某选手的得分. Input 输入数据有多组,每组占 ...
- 《程序设计中的组合数学》——polya计数
我们在高中的组合数学中常常会碰到有关涂色的问题,例如:用红蓝两种颜色给正方形的四个顶点涂色,会有几种不同的方案.在当时,我们下意识的认为,正方形的四个顶点是各不相同的,即正方形是固定的.而实际上我们知 ...
- hdu 4705 dfs统计更新节点信息
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4705 #pragma comment(linker, "/STACK:16777216&qu ...
- eucalyptus的网络模式
总共有四种网络模式,默认采用的是system模式 SYSTEM Mode 最简单的网络配置.Eucalyptus分配mac地址,使用 Xen Bridge,配合已有的 DHCP DHCP 來分配 IP ...
- 南京Uber优步司机奖励政策(1月11日~1月17日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- angularJs $injector
一 angularJS中几种注入方式 Spring中使用构造注入或者设值注入的方式,还需要做一些额外的操作,但是angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便. angu ...