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. Balance(01背包)

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 9163   Accepted: 5617 Description Gigel ...

  2. Shredding Company(dfs)

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3519   Accepted: 2009 Description You h ...

  3. POJ 1456 Supermarket

    题意:商场卖东西,每种商品有两个属性,一种是价格pi,另一种是保质期di,每种商品只能在天数<=di的时候卖出.每天只能卖一种商品,问最多能卖出价格之和为多少的商品.(n <= 10^4, ...

  4. 低版本Xcode 出现could not find developer disk image问题

    解决Xcode在ipad/iphone9.2系统真机测试时出现could not find developer disk image问题,只要拷贝这个文件(链接: http://pan.baidu.c ...

  5. 优化exp/imp导入导出速度大全

    .exp  个相关的参数:DIRECT和RECORDLENGTH参数. DIRECT参数定义了导出是使用直接路径方式(DIRECT=Y),还是常规路径方式(DIRECT=N).常规路径导出使用SQL ...

  6. sql server 常用小知识点

    1. sql server的语法:中文要加 N select * from eVA_EMPBoard where name = N'施纪平' 而oracle的不用 2.

  7. pandas对象保存到mysql出错提示“BLOB/TEXT column used in key specification without a key length”解决办法

    问题 将DataFrame数据保存到mysql中时,出现错误提示: BLOB/TEXT column used in key specification without a key length 原因 ...

  8. OpenMP与C++:事半功倍地获得多线程的好处

    来源:IIEEG 01-28-2011 在并行计算领域有一个广为流传的笑话——并行计算是未来之事并且永远都是.这个小笑话几十年来一直都是对的.一种类似的观点在计算机架构社区中流传,处理器时钟速度的极限 ...

  9. mybatis 与 ehcache 整合[转]

    1.简介 MyBatis 是支持普通SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC 代码和参数的手工设置以及结果集的检索. Ehcache 是现在最流行的纯 ...

  10. Android的Touch系统简介(一)

    一.Android touch事件的相关概念 用户的Touch事件被包装成MotionEvent 用户当前的touch事件主要类型有: ACTION_DOWN: 表示用户开始触摸. ACTION_MO ...