html5版 音乐播放器
html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277
功能说明
- 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touch事件
- 支持播放模式:循环,单曲循环
- 支持歌词实时显示,包括显示到title
- 支持静音,iOS不支持……
jQuery版本
withjQuery里面是jquery版本的播放器,之前只是想模仿下亦歌,于是就用jQ写了,后来大家反映可以搞个纯javascript的html5版本,于是出了最新的这个版本
简单说下歌词显示算法
首先异步获取lrc内容(loadLrc),然后使用正则解析lrc(parseLrc),得到格式如下:
{
words:[],//歌词数组
times:[],//时间数组
data:{}//歌曲信息:作者、歌手、长度;有些lrc不会包括此部分,或者不全
}
然后循环去除word(歌词)和time(歌词对应时间),生成html,其中会计算出来marginTop位置:
<p data-lrctime="time" data-lrctop="top">word</p>
当歌曲播放时,实时获取当前播放时间audio.currentTime(为了提高歌词响应速度会提前100ms),然后遍历歌词nodelist,通过计算data-lrctime,取出当前播放进度对应的P元素,根据此P元素data-lrctop设置marginTop,通过css3实现动画。
案例地址:http://www.xttblog.com/?p=1277
html5版 音乐播放器的更多相关文章
- html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- Swift版音乐播放器(简化版),swift音乐播放器
这几天闲着也是闲着,学习一下Swift的,于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神, 希望对大家有帮助! 这个DEMO里,使用到了 AudioPlayer(对音 ...
- HTML5网页音乐播放器
1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...
- 解决ubuntu系统中firefox无法播放网页版音乐播放器音乐
Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...
- Swift版音乐播放器(简化版)
这几天闲着也是闲着,学习一下Swift的.于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神. 希望对大家有帮助! 这个DEMO里.使用到了 AudioPlayer(对音 ...
- html5 jquery音乐播放器,play()和pause()不起作用
今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...
- HTML5环形音乐播放器
在线演示 本地下载
- 躁!DJ 风格 Java 桌面音乐播放器
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
随机推荐
- Tomcat--startup.bat文件
Tomcat--startup.bat文件 如何启动tomcat,如何关闭tomcat等常规操作,我们应该都很清楚了,但是实际中我们经常会遇到一些恶心的情景,比如说正在我们撸码撸的很高兴的时候,ecl ...
- 无废话XML--XML解析(DOM和SAX)
XML处理模式 处理XML有2种方式,DOM和SAX.一般的实际开发中,这2种使用的不多,直接用dom4j来解析XML就好了,包括CRUD等操作都很方便的.这里介绍的DOM和SAX是比较底层的,具体的 ...
- struts2 action 页面与action参数的传递的三种方式
第一种: 初始页面: <form action="LoginAction.action" method="post"> 用户名:<input ...
- thinkphp5学习(一)——thinkphp5的目录结构与开发规范
开发规范: 目录和文件 目录使用小写+下划线: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致: 类文件采用驼峰法命名(首字母大写),其它文 ...
- MySQL --当AUTO_INCREMENT自增遇到0
熟悉SQL Server的DBA都知道,在SQL Server中如果想要显示制定自增值,除了在INSERT语句中显示写明自增列外,还需要使用SET IDENTITY_INSERT TB_NAME ON ...
- 八大排序算法Java实现
本文对常见的排序算法进行了总结. 常见排序算法如下: 直接插入排序 希尔排序 简单选择排序 堆排序 冒泡排序 快速排序 归并排序 基数排序 它们都属于内部排序,也就是只考虑数据量较小仅需要使用内存的排 ...
- 换行符\n和回车符\r
问题始于社区的一个帖子,楼主的问题如下: “在c语言中,对一个不知道大小的文件进行读操作,我用fread()将文件的内容先放到一个缓存区,然后将缓存区中的内容打印出来, 缓存区中的内容和文件中的内容不 ...
- linux的8小时差问题解决
下面是同步时间的解决方法: 1.vi /etc/sysconfig/clock #编辑文件 ZONE="Asia/Shanghai" UTC=false #设置为false,硬件时 ...
- ABP官方文档翻译 6.1.1 MVC控制器
ASP.NET MVC控制器 介绍 AbpController基类 本地化 其他 过滤器 异常处理和结果包装 审计日志 验证 授权 工作单元 介绍 ABP通过Abp.Web.Mvc nuget包集成到 ...
- 探索从 MVC 到 MVVM + Flux 架构模式的转变
本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...