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=

灵感的由来是前些天看到了博: http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器,感觉很不错,是用Flex做的Flash播放器. 于是我也便想到了,自己也来来弄个玩玩. 所以利用1天的时间,通过收集整理,做了一款自己专属的播放器! 播放器实现了以下功能操作:1:播放.暂停2:快进.快退3:上一曲.下一曲4:单曲循环 效果如下: 奉献JS源码如下: (function ($) { $.fn.Html5Player = function() { //获取音频A

一.使用icomoon 1.生成和下载图标相关文件 先使用icomoon获取我们要使用的图标,例如播放.暂停.停止.全屏等图标. icomoon网站:https://icomoon.io/app/#/select 在其中选择我们需要的图标: 然后点击右下角的 "Generate Font": 将我们图标的名字修改成自己想要的. 然后点击右下角的 "Download".会帮我们下载一个zip压缩包. 解压,获取以下文件: 2.使用style.css 将style.cs

先放上效果图: 正如图中所展示的播放器那样,我们用HTML+CSS+JS将这个效果实现出来. HTML页面布局 <div class="music"> <div class="photo"> <div class="photo_pic" id="photo_pic"><img src="" width="100%"><div clas

本文将引导大家做一个音乐播放器,在做这个Android开发实例的过程中,能够帮助大家进一步熟悉和掌握学过的ListView和其他一些组件.为了有更好的学习效果,其中很多功能我们手动实现,例如音乐播放的快进快退等. 先欣赏下本实例完成后运行的界面效果: 首先我们建立项目,我使用的SDK是Android2.2的,然后在XML中进行布局. 上方是一个ListView用来显示我们的音乐列表,中间是一个SeekBar可以拖动当前音乐的播放进度,之所以用SeekBar而不用ProgressBar是因为我们需

点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的,如果需要用到微信或手机上,可根据自己需要求,选择对应的网页播放器.  ● Codrops Audio Codrops Audio 界面使用纯CSS编写,支持响应式,可以方便在桌面.平板以及手机设备上使用.界面因为是CSS编写,所以如果懂CSS样式,可以自己设计一个新的样式来修改. 演示&下载 ● D

这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定义样式,引用相关JS即可,源代码大家都可以下载. 我们相信随着HTML5技术和浏览器技术的不断发展,我们的网页一定会越来越酷而且实用,基于HTML5的播放器也会越来越多,我们会继续关注HTML5播放器相关资源,届时分享给大家. 1.HTML5笑脸样式的音乐播放器 今天要来分享一款非常有爱的HTML5

转载请说明原出处,谢谢~~ 从暑假到现在中秋刚过,我用duilib开发仿酷狗播放器大概经历了50天.做仿酷狗的意图只是看原酷狗的界面比较漂亮,想做个完整一些的工程来练习一下duilib.今天把写好的程序代码综合一下,发布测试版,现在一共写了10355行c++代码和大约2000行xml代码.测试版的程序肯定会有不少bug,而我自己也没有精心去测试程序,希望发现问题的朋友联系我一下,我去修正.程序在win8下运行会有问题,请在兼容性里调整一下!整个软件的开发过程可以看前面发布的博客! 软件界面上绝大

转载请说明原出处,谢谢~~ 中秋到了,出去玩了几天.今天把仿酷狗程序做了收尾,已经开发完成了,下一篇博客把完结的情况说一下.在这篇博客里说一下使用OLE为窗体增加文件拖拽的功能.使用播放器,我更喜欢直接拖动音乐文件添加到软件里,所以做这个功能很重要.做OLE拖拽之前学习了两篇文章: http://www.codeproject.com/Articles/840/How-to-Implement-Drag-and-Drop-Between-Your-Progra%E3%80%91 http://b

技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐播放器就要非常了解在Web中音频播放的方式,通常都采用HTML5的audio标签关于audio标签,它有大量的属性.方法和事件,在这里我就做一个大致的介绍.属性:src:必需,音频来源:controls:常见,设置后显示浏览器默认的audio控制面板,不设置默认隐藏audio标签:autoplay:

使用 electron 做个播放器 本文同步更新在:https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了,但是最近才玩了一下,写篇博文记录一下,以便日后回顾. electron 的入门可以说是相当简单,官方提供了一个 quick start,很流畅的就可以跑起来一个应用.因此,如何入门就不赘述了,直接说一下如何做个播放器. 为啥要做个播放器呢,因为我在很久很久以前写过一个网页版的音频可视化播放器,但是因为是在页端,所以

先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. ... ... 实现web component的基本方法通常如下所示: 使用ECMAScript 2015类语法创建一个类,来指定web组件的功能(参阅类获取更多信息). 使用CustomElementRegistry.define()方法注

  (声明:Alberl以后说到开源库,一般都是指著名的.或者不著名但维护至少3年以上的.那些把代码一扔就没下文的,Alberl不称之为开源库,只称为开源代码.这里并不是贬低,像Alberl前面那个系列的教程<2013 duilib入门简明教程>,还有本系列教程,还有前面介绍的CodeProject,基本上都是代码往上面一扔,就不用再怎么维护的.这些都称之为开源代码,其实开源代码对新手的帮助更大,因为很简明的说明了代码用法~O(∩_∩)O~)       前面两个教程已经对制作界面的几种方式进

从上一篇文章中可以看出,C++的界面方向还很弱,没有任何一个界面库可以一统天下,所以才造成了界面库百家争鸣的情况. 从时间上看: 1.出来最早的是QT,1991年就有了. 2.VC++ 虽然1992年就出来了,但是一直不给力,那个时候是Borland一统天下,并且1995年Borland出了Delphi,也一直一统天下. 3.在1998年VC++ 6.0 出来之后,Delphi就完败了,从此一蹶不振. 不过以下几个问题需要想一想: 1.在VC++ 6.0 出来之前,Borland一直说完爆VC+

Foreword 虽然音乐播放这类的项目的静态展示居多,业务逻辑并不复杂,但是对于我这种后端出身的前端萌新来说,能使用vuejs完成大部分功能, 也会有许多收获. api:我使用的是一个开源的 nodejs 封装的网易云音乐 api,名叫NeteaseCloudMusicApi 文档地址 github地址 感谢大佬提供的学习资源. 我的项目地址 Project Preview Build Setup # install dependencies npm install # serve with

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

“Intimate中文意思是密友,就是想让这个音乐APP成为最懂用户的一款软件.” 如果,你随身听的音乐APP,可以成为知你懂你的密友,你幸福,她清唱一首<小幸运>:你悲伤,她低声浅吟<旅行的意义>.这该是一种多么贴切而温馨的感觉. Mockplus三周年原型设计大赛的优秀设计奖作品里,就有这样一款密友音乐APP.Intimate的设计师是侯建平,一个会画油画的UI设计师.侯建平个人比较偏好极简的设计风格.他说,“极简设计更有韵味,更让人有遐想的空间.” 他本次的大赛获奖作品作品I

1.ijkplayer 项目地址: https://github.com/Bilibili/ijkplayer 介绍:Ijkplayer 是Bilibili发布的基于 FFplay 的轻量级 Android/iOS 视频播放器.实现了跨平台功能,API 易于集成:编译配置可裁剪,方便控制安装包大小:支持硬件加速解码,更加省电:提供 Android 平台下应用弹幕集成的解决方案. 2.ExoPlayer 项目地址:https://github.com/google/ExoPlayer 介绍:Exp

EasyPlayer.js 集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大 属性(Property) video-url 视频流地址 String default '' video-title 视频右上角显示的标题 String default '' poster 视频封面图片 String default '' autoplay 自动播放 Boolean default true loop 是否循环播放 Boolean defaul