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. Pearls DP

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6647   Accepted: 3241 Description In Pe ...

  2. 【转】【已解决】Android中ActionBar中不显示overflow(就是三个点的那个按钮)--不错

    原文网址:http://www.crifan.com/android_actionbar_three_dot_overflow_not_show/ [问题] 折腾: [记录]继续尝试给Android程 ...

  3. 数据结构(动态树):UOJ 207 共价大爷游长沙

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABHwAAAJZCAIAAABUW7XHAAAgAElEQVR4nOy93cstx5Xm2f9TXh2EOe

  4. 数据结构(主席树):COGS 2213. K个串

    2213. K个串 ★★★★   输入文件:bzoj_4504.in   输出文件:bzoj_4504.out   简单对比时间限制:20 s   内存限制:512 MB [题目描述] 兔子们在玩k个 ...

  5. 【模拟】Codeforces 705B Spider Man

    题目链接: http://codeforces.com/problemset/problem/705/B 题目大意: 两个人玩游戏,总共N个数,分别求前I(I=1 2 3...n)个数时游戏的获胜者是 ...

  6. ASP.Net MVC-Web API使用Entity Framework时遇到Loop Reference

    原文地址:http://www.it165.net/pro/html/201210/3932.html 最近开始研究Web API,运气不错第一个测试项目就遇到问题@@-当新增Control时选择[A ...

  7. SRM 393(1-250pt)

    题意:有m个人投票,每个人在心里对所有候选者排了一个序,比如“210”,则他最想投2号,如果2号已经出局他会投1号,最后投0号,否则弃权不投.选举时进行多轮投票,知道选出winner或者所有人均出局. ...

  8. 结构性产品 Structured Product

    定义 结构性产品是固定收益产品(Fixed Income Instruments)的一个特殊种类.它将固定收益产品(通常是定息债券)与金融衍生交易(如远期.期权.掉期等)合二为一,增强产品收益或将投资 ...

  9. Android 图片选择器

    图片选择器,遍历系统所有图片并显示,点击查看大图,长按选中,并将结果返回 字体颜色res/color建立text_selecor.xml <selector xmlns:android=&quo ...

  10. poj 3171 Cleaning Shifts(区间的最小覆盖价值)

    Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2743   Accepted: 955 De ...