一款好看+极简到不行的HTML5音乐播放器-skPlayer

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

时间: 2024-10-06 21:37:00

一款好看+极简到不行的HTML5音乐播放器-skPlayer的相关文章

沙漠之鹰和战术匕首--两款前端极简模板引擎

一.前言 说起前端模板引擎,那可真是多如牛毛,只要是前端coder,怎么着你都听说或用过几款,社区里面的文章也有介绍,或者问问度娘,这里不再赘述.其中比较知名的有 artTemplate.doT.mustache等. 本文介绍两款极简模板引擎:一款原创format引擎,一款优化template引擎.每个模板引擎都只有区区三十行左右的代码. 二.模板原则 模板概念的提出,不管起源是什么,最根本的原则一定是要解决开发中的问题:显示逻辑和数据逻辑能够分离.而实际开发需求中,两者分离的需求也不尽相同.

极简主义生活方式是什么?&lt;转载&gt;

首先强调一点,以下谈到的极简主义(minimalism)均指生活方式,与设计.与艺术.与哲学上的极简主义都没有直接联系,尽管它们中英文都是用同一个词表示.同理下文的极简主义者(minimalist)是指实践极简主义生活方式的人,而不是喜欢极简主义设计风格的人. 一.为什么要选择极简主义? 如果你属于以下的某一个类型,大概极简主义有可能帮到你: 打折购物狂.每次看到打折商品都有买的冲动,觉得这便宜不占白不占.结果买了一堆没用的或者极少使用的玩意,花的钱反而比“有需求时再买(即使是原价不打折的)”更

驳Linux不娱乐 堪比Win平台中十款播放器

驳Linux不娱乐 堪比Win平台中十款播放器 1.VLC多媒体播放器     VLC多媒体播放器(最初命名为VideoLAN客户端)是VideoLAN计划的多媒体播放器.它支持众多音频与视频解码器及档案格式,并支持 DVD.VCD的播放及各类串流协议.它亦能作为unicast和multicast的串流服务器在IPv4以及IPv6的高速网络连线下使用.它融合了 FFmpeg出品的解码器与libdvdcss程序库,这更使其增添了播放多媒体档案及加密DVD影碟的功能. VLC多媒体播放器具有跨平台的

【jquery】一款不错的音频播放器——Amazing Audio Player

前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows 和 MAC 应用程序,允许你创建 HTML5 音频播放器的网站.该音频播放器兼容 iPhone,ipad,Android,Chrome,Firefox,Safari,Opera 和 IE 7 / 8 / 9 / 10.同时它也可以发布成为一个 WordPress 的音频播放器插件,Joomla 音

Resty 一款极简的restful轻量级的web框架

https://github.com/Dreampie/Resty Resty 一款极简的restful轻量级的web框架 开发文档 如果你还不是很了解restful,或者认为restful只是一种规范不具有实际意义,推荐一篇osc两年前的文章:RESTful API 设计最佳实践 和 Infoq的一篇极其理论的文章 理解本真的REST架构风格 虽然有点老,介绍的也很简单,大家权当了解,restful的更多好处,还请google 拥有jfinal/activejdbc一样的activerecor

推荐几款极简的手机浏览器

前言 对于本人而言,不喜欢浏览器的首页有多余的新闻,天气以及其他的推送信息,作为一款浏览器,就应该有一款浏览器该有的样子.今天就给大家推荐几款个人认为极简的手机浏览器. Quark浏览器 下载地址: https://www.myquark.cn/ 主要特点 极简极速 当然,如果想要看资讯信息,也可以点击左下角按钮. 广告拦截 Quark浏览器带有广告拦截功,因此用某度搜索的结果中,广告将会被拦截,并且可以手动标记广告. 智能语音搜索 搜索引擎自由切换 可惜的是不能自定义搜索引擎. via浏览器

极简估值教程——完结篇 价值投资系统建构举隅

前面几讲本来愿望是写"极简",由于本人水平十分有限,加之投资本身就是一个极其精妙的思维集合,想要简化,但又要表达,只能索性写的具体些了.也许以后能有机会重安个题目,现在怎么看怎么不切题.算了,先不说这些.还是来说投资. 今天我把之前三讲的内容做一个整合,根据上面三讲的内容为思路,其实已经可以勾勒一个价值投资系统的构架了. 其实任何一种思路,一个核心,一个侧重就足以构建一个交易系统.关键是你进行深入的思考,研究,实盘中获得心得体会,这些都可以加入你交易系统中. 过程嘛,很像我们小时候搭积

反向传播神经网络极简入门

反向传播神经网络极简入门 我一直在找一份简明的神经网络入门,然而在中文圈里并没有找到.直到我看到了这份162行的Python实现,以及对应的油管视频之后,我才觉得这就是我需要的极简入门资料.这份极简入门笔记不需要突触的图片做装饰,也不需要赘述神经网络的发展历史:要推导有推导,要代码有代码,关键是,它们还对得上.对于欠缺的背景知识,利用斯坦福大学的神经网络wiki进行了补全. 单个神经元 神经网络是多个“神经元”(感知机)的带权级联,神经网络算法可以提供非线性的复杂模型,它有两个参数:权值矩阵{W

【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了tabs-view等等.所以项目会越来越复杂,不太适合很多初用vue的同学来构建后台.所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西.vueAdmin-template 主要是基于vue-cli w