基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果。这是一款基于jQuery实现的音乐播放器功能代码。效果图如下:
实现的代码。
html代码:
<textarea id="lrc_content" name="textfield" cols="70" rows="10" style="display: none;">
[00:03.00]洋葱
[00:06.00]演唱:平安
[00:09.00]
[00:11.38]如果你眼神能够为我片刻的降临
[00:21.23]如果你能听到心碎的声音
[00:28.88]盘底的洋葱像我永远是配角戏
[00:35.74]偷偷的看着你偷偷的隐藏着自己
[00:43.48]
[00:44.90]如果你愿意一层一层
[00:48.46]一层的剥开我的心
[00:52.66]你会发现你会讶异
[00:56.40]你是我最压抑最深处的秘密
[01:00.26]如果你愿意一层一层
[01:03.69]一层的剥开我的心
[01:07.76]你会鼻酸你会流泪
[01:11.60]只要你能听到我看到我的全心全意
[01:18.30]
[01:19.11]如果你愿意一层一层
[01:22.57]一层的剥开我的心
[01:26.66]你会发现你会讶异
[01:30.41]你是我最压抑最深处的秘密
[01:34.48]如果你愿意一层一层
[01:37.58]一层的剥开我的心
[01:41.51]你会鼻酸你会流泪
[01:45.15]只要你能听到我看到我的全心全意
[01:53.55]
[01:55.65]你会鼻酸你会流泪
[01:59.84]只要你能听到我看到我的全心全意
[02:12.57] www.w2bc.com
</textarea>
<div class="music_box">
<div id="jquery_jplayer_1" class="jp-jplayer">
</div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max
volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time">
</div>
<div class="jp-duration">
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat
off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>站长素材</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span> To play the media you will need to either update your
browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/"
target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<div class="content">
<ul id="lrc_list">
<li>点击开始播放……</li>
</ul>
</div>
</div>
via:http://www.w2bc.com/Article/29689
基于jplayer实现歌词同步的JS音乐播放器效果的更多相关文章
- jquery+jplayer实现歌词同步的mp3音乐播放器效果
实例预览 下载地址 实例代码 <div class="container"> <div class="demo"> <textar ...
- Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- iOS-自定义Model转场动画-仿酷我音乐播放器效果
周末,闲来无事,仿写了酷我音乐播放器效果: 效果图如下: 实现思路: 1.实现手势处理视图旋转 2.自定义Model动画: 1.手势是利用了一个UIPanGestureRecognizer手势: 注意 ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- js 音乐播放器
在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好. 好了,那我们开始做这个音乐播放器 ...
- js音乐播放器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...
- js音乐播放器【简洁】
辞职的第二天没有去找工作还,准备回家. 但到了火车站才发现沃特玛的买的票不是在这个火车站坐. 这就耽误了行程...... 说出来真舒服!!!淦 代码 这里已经上传到码云了,大家可以直接引用. 目前只有 ...
- ios开发学习- 简易音乐播放器2 (基于iPhone4s屏幕尺寸)-- 歌词解析--plist文件应用--imageNamed图片加载耗内存
声明:(部分图片来自网络,如果侵犯了您的权益请联系我,会尽快删除!) 又是音乐播放器,不过这次和上次不一样了,准确说这次更像播放器了,初学者不建议看这个,可以先看前面一个音乐播放器(1),当然 我没加 ...
随机推荐
- Linux内核源代码分析方法
Linux内核源代码分析方法 一.内核源代码之我见 Linux内核代码的庞大令不少人"望而生畏",也正由于如此,使得人们对Linux的了解仅处于泛泛的层次.假设想透析Linux ...
- 用setitimer实现多个定时器
从这篇文章中可以看出,setitimer只能实现一个定时器,如果多次调用setitimer,旧值都会被覆盖掉. 如何用setitimer实现多个定时器呢?下面是我的一个实现,具体的方法是: 用链表从小 ...
- C# 发布REST接口地址API服务
原文地址:https://blog.csdn.net/chinacsharper/article/details/21256569 今天碰巧,用到了淘宝的在线IP地址查询的Rest API,它提供接口 ...
- Python学习笔记010——作用域
1 作用域的分类 全局变量:在文件中所有函数外部创建的变量,整个文件可见 局部变量:在函数.类等内部创建的变量且仅用在函数内部的变量: 函数的形参也是局部变量. 注:所有的变量必须是先创建,再使用. ...
- c#的SortedList使用方法
表示键/值对的集合,这些键和值按键排序并可按照键和索引访问. SortedList最合适对一列健/值对 进行排序,在排序时,是对键进行排序,SortedList 是 Hashtable 和 Array ...
- Android ListView动画特效实现原理及源代码
Android 动画分三种,当中属性动画为我们最经常使用动画,且能满足项目中开发差点儿所有需求,google官方包支持3.0+.我们能够引用三方包nineoldandroids来失陪到低版本号.本样例 ...
- mysql 数据表的引擎 MyISAM 和 InnoDB
需要使用锁和事务时,必须使用InnoDB模式 可以通过以下语句查看表的类型 SHOW TABLE STATUS FROM [DATABASE_NAME] 修改数据表的引擎类型: navicat: 设计 ...
- django打印字典
- Nginx(二):虚拟主机配置
什么是虚拟主机? 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主机都可以是一个独立的网站,可以具有独立的域名,具有完整的Intemet服务器功 ...
- ps曲线
>>曲线的基本原理. 输入:在坐标的底部横着的是输入,显示的是当前图片上的颜色信息. 输出:竖着的是输出线,使我们调整图片的输出结果. 输入和输出轴上都有一条明暗信息,告诉我们那边是阴影那 ...