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开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
随机推荐
- 简单的线性规划-scipy
根据描述,我们用线性规划带约束来求解问题 # coding=utf-8 from scipy.optimize import linprog import numpy as np def maxGai ...
- java精确运算
public class ArithUtil { /** * 加法 * @param * @return double * @throws Exception * @author zhangyn * ...
- zabbix3.2_yum官方文档centos 7版
Installation from packages 1 Repository installation 2 Server installation with MySQL database 3 Ser ...
- Eclipse使用EGit,commit之后仍显示NO HEAD的解决方法
由于以前做的项目一直用的都是svn,想试一下git尝尝鲜,遇见点问题.记录下来防止以后再出现这种情况,同时希望能帮助到和我一样的初学者. 问题描述: 右键项目-->team-->commi ...
- C#中的out参数/ref参数/params可变参数
out参数: out关键字 通过引用来传递参数,在定义方法和调用方法的时候都必须使用out关键字 简单来讲out可以用来返回多个参数类型. static void Main(string[] args ...
- Storm 对 0.10.x 版 Kafka之commit offsets
由于 0.10.x 版 Kafka 与 0.8.x 版有很大的变化,这种变化对下游 Storm 有非常大的影响,0.10.x 版的 Kafka 不但增加了权限管理的功能,而且还将 simple 和 h ...
- 二分图匹配 洛谷 [P3386]
最为经典的匈牙利算法 匈牙利算法应用了增广路的性质,实际上就是通过搜索可行的增广路,每搜到一条,匹配数++ 还可以应用配对的方法去理解,此算法的时间复杂度 (V*E),比较慢,但是实现较为简单. df ...
- 洛谷 [P2661] 信息传递
求有向图的权值为一的最小环 并查集做法 维护一个dis[],表示i号元素到fa[i]的距离. 对于输入的每两个点u,v,询问这两个点的fa[]是否相同,如果相同就成环,维护最小值,mi=min(mi, ...
- BZOJ 1927: [Sdoi2010]星际竞速 [上下界费用流]
1927: [Sdoi2010]星际竞速 题意:一个带权DAG,每个点恰好经过一次,每个点有曲速移动到他的代价,求最小花费 不动脑子直接上上下界费用流过了... s到点连边边权为曲速的代价,一个曲速移 ...
- CodeChef Cards, bags and coins [DP 泛型背包]
https://www.codechef.com/problems/ANUCBC n个数字,选出其一个子集.求有多少子集满足其中数字之和是m的倍数.n $\le$ 100000,m $\le$ 100 ...