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版 音乐播放器的更多相关文章

  1. html5 简单音乐播放器

    html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  2. Swift版音乐播放器(简化版),swift音乐播放器

    这几天闲着也是闲着,学习一下Swift的,于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神, 希望对大家有帮助! 这个DEMO里,使用到了 AudioPlayer(对音 ...

  3. HTML5网页音乐播放器

    1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...

  4. 解决ubuntu系统中firefox无法播放网页版音乐播放器音乐

    Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...

  5. Swift版音乐播放器(简化版)

    这几天闲着也是闲着,学习一下Swift的.于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神. 希望对大家有帮助! 这个DEMO里.使用到了 AudioPlayer(对音 ...

  6. html5 jquery音乐播放器,play()和pause()不起作用

    今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...

  7. HTML5环形音乐播放器

    在线演示 本地下载

  8. 躁!DJ 风格 Java 桌面音乐播放器

    本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 版桌面 DJ 音乐播放器. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列 ...

  9. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

随机推荐

  1. 嵌入式QT移植

    1  开发环境 目标版:FS4412(Cortex-A9)开发板 交叉工具链:arm-linux-gcc 4.6.4 版本 Qt:qt-everywhere-opensource-src-5.4.2. ...

  2. editplus和ultraedit(UE)的使用

    本来呢我是没有打算写关于editplus和ue的文章的,但是最近我花了12K买了一台电脑,在折腾电脑的时候就重新设置了好多经常用到的工具,以前我使用比较多的是editplus,但是使用这个editpl ...

  3. HashiCorp Vault介绍

    HashiCorp Vault是一款企业级私密信息管理工具.说起Vault,不得不提它的创造者HashiCorp公司.HashiCorp是一家专注于DevOps工具链的公司,其旗下明星级产品包括Vag ...

  4. 【转】ArcGIS中File Geodatabase与Personal Geodatabase的区别

    原文地址:ArcGIS中File Geodatabase与Personal Geodatabase的区别作者:最爱忆宝贝 一.平台支援: 1.Personal Geodatabase:仅可在Windo ...

  5. jenkins构建一个maven项目[五]

    标签(linux): jenkins 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 构建一个maven项目,即为构建java项目.模拟实验之前先把实验代码推送到 ...

  6. Jetson TX2安装tensorflow(原创)

    Jetson TX2安装tensorflow 大致分为两步: 一.划分虚拟内存 原因:Jetson TX2自带8G内存这个内存空间在安装tensorflow编译过程中会出现内存溢出引发的安装进程奔溃 ...

  7. <>和“”的区别

    <stdio.h>是直接从系统里边找. ""是先在本地找,然后在系统里边找. <>不可以替换"",       "" ...

  8. linux下的打包与压缩

    linux压缩或解压缩工具有很多,除了已经很少有人使用的compress外,现在常用的还有tar,bzip2,xz 和gziplinux压缩或解压缩工具有很多,除了已经很少有人使用的compress外 ...

  9. Apache 配置SSI速记

    1. 启用模块 httpd.conf LoadModule filter_module modules/mod_filter.so 2. <Directory 的Options配置中增加Incl ...

  10. 《Python网络编程》学习笔记--使用谷歌地理编码API获取一个JSON文档

    Foundations of Python Network Programing,Third Edition <python网络编程>,本书中的代码可在Github上搜索fopnp下载 本 ...