HTML5实践之歌词同步播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了,我们还要关注一下用户的体验度,所以,我们就写了一个HTML兼容的播放器!向下兼容IE6-9、chrome、firfox、opera等主流播放器,应该是全兼容!实现原理代码给大家奉上!
001
|
<!doctype html>
|
002
|
< html >
|
003
|
< head >
|
004
|
< meta charset = utf -8>
|
005
|
< title >歌词同步播放器-powered by widuu xiaowei</ title >
|
006
|
< meta http-equiv = "Cache-Control" content = "no-cache" >
|
007
|
< meta name = "viewport" content = "width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4" >
|
008
|
< meta name = "MobileOptimized" content = "240" >
|
009
|
< link href = "/mp3/css/blue.css" rel = "stylesheet" type = "text/css" />
|
010
|
< script type = "text/javascript" src = "/mp3/js/jquery.js" ></ script >
|
011
|
< script type = "text/javascript" src = "/mp3/js/jquery.jplayer.js" ></ script >
|
012
|
< script type = "text/javascript" src = "/mp3/js/lrc.js" ></ script >
|
013
|
< style type = "text/css" >
|
014
|
* { margin:0; padding:0; }
|
015
|
ul, ol, dl { list-style:none; }
|
016
|
.content li.hover{ color:red; }
|
017
|
.content{ width:402px; height:200px; background:#ccc; overflow:hidden; padding:10px;}
|
018
|
</ style >
|
019
|
< script >
|
020
|
// <![CDATA[
|
021
|
$(document).ready(function(){
|
022
|
$("#jquery_jplayer_1").jPlayer({
|
023
|
ready: function (event) {
|
024
|
$(this).jPlayer("setMedia", {
|
025
|
mp3:"yangcong.mp3" //mp3的播放地址
|
026
|
}).jPlayer("play");
|
027
|
},
|
028
|
timeupdate: function(event) {
|
029
|
if(event.jPlayer.status.currentTime==0){
|
030
|
time = "";
|
031
|
}else {
|
032
|
time = event.jPlayer.status.currentTime;
|
033
|
}
|
034
|
|
035
|
},
|
036
|
play: function(event) {
|
037
|
//点击开始方法调用lrc。start歌词方法 返回时间time
|
038
|
|
039
|
if(event.jPlayer.status.currentTime==0){
|
040
|
$("#jquery_jplayer_1").jPlayer("pause",1);
|
041
|
}
|
042
|
|
043
|
if($('#lrc_content').val()!==""){
|
044
|
$.lrc.start($('#lrc_content').val(), function() {
|
045
|
return time;
|
046
|
});
|
047
|
}else{
|
048
|
$(".content").html("没有字幕");
|
049
|
}
|
050
|
},
|
051
|
repeat: function(event) {
|
052
|
if(event.jPlayer.options.loop) {
|
053
|
$(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
|
054
|
$(this).jPlayer("play");
|
055
|
});
|
056
|
} else {
|
057
|
$(this).unbind(".jPlayerRepeat");
|
058
|
}
|
059
|
},
|
060
|
swfPath: "/js", //存放jplayer.swf的决定路径
|
061
|
solution:"html, flash", //支持的页面
|
062
|
supplied: "mp3", //支持的音频的格式
|
063
|
wmode: "window"
|
064
|
|
065
|
});
|
066
|
$("#lrc_content").hide();
|
067
|
});
|
068
|
//]]>
|
069
|
</ script >
|
070
|
</ head >
|
071
|
< body >
|
072
|
< textarea id = "lrc_content" name = "textfield" cols = "70" rows = "10" >
|
073
|
[ar:测试用 ]
|
074
|
[00:03.00]洋葱
|
075
|
[00:06.00]演唱:平安
|
076
|
[00:09.00]
|
077
|
[00:11.38]如果你眼神能够为我片刻的降临
|
078
|
[00:21.23]如果你能听到心碎的声音
|
079
|
[00:28.88]盘底的洋葱像我永远是配角戏
|
080
|
[00:35.74]偷偷的看着你偷偷的隐藏着自己
|
081
|
[00:43.48]
|
082
|
[00:44.90]如果你愿意一层一层
|
083
|
[00:48.46]一层的剥开我的心
|
084
|
[00:52.66]你会发现你会讶异
|
085
|
[00:56.40]你是我最压抑最深处的秘密
|
086
|
[01:00.26]如果你愿意一层一层
|
087
|
[01:03.69]一层的剥开我的心
|
088
|
[01:07.76]你会鼻酸你会流泪
|
089
|
[01:11.60]只要你能听到我看到我的全心全意
|
090
|
[01:18.30]
|
091
|
[01:19.11]如果你愿意一层一层
|
092
|
[01:22.57]一层的剥开我的心
|
093
|
[01:26.66]你会发现你会讶异
|
094
|
[01:30.41]你是我最压抑最深处的秘密
|
095
|
[01:34.48]如果你愿意一层一层
|
096
|
[01:37.58]一层的剥开我的心
|
097
|
[01:41.51]你会鼻酸你会流泪
|
098
|
[01:45.15]只要你能听到我看到我的全心全意
|
099
|
[01:53.55]
|
100
|
[01:55.65]你会鼻酸你会流泪
|
101
|
[01:59.84]只要你能听到我看到我的全心全意
|
102
|
[02:12.57]
|
103
|
</ textarea >
|
104
|
105
|
106
|
< p >
|
107
|
108
|
< div id = "jquery_jplayer_1" class = "jp-jplayer" ></ div >
|
109
|
110
|
< div id = "jp_container_1" class = "jp-audio" >
|
111
|
< div class = "jp-type-single" >
|
112
|
< div class = "jp-gui jp-interface" >
|
113
|
< ul class = "jp-controls" >
|
114
|
< li >< a href = "javascript:;" class = "jp-play" tabindex = "1" >play</ a ></ li >
|
115
|
< li >< a href = "javascript:;" class = "jp-pause" tabindex = "1" >pause</ a ></ li >
|
116
|
< li >< a href = "javascript:;" class = "jp-stop" tabindex = "1" >stop</ a ></ li >
|
117
|
< li >< a href = "javascript:;" class = "jp-mute" tabindex = "1" title = "mute" >mute</ a ></ li >
|
118
|
< li >< a href = "javascript:;" class = "jp-unmute" tabindex = "1" title = "unmute" >unmute</ a ></ li >
|
119
|
< li >< a href = "javascript:;" class = "jp-volume-max" tabindex = "1" title = "max volume" >max volume</ a ></ li >
|
120
|
</ ul >
|
121
|
< div class = "jp-progress" >
|
122
|
< div class = "jp-seek-bar" >
|
123
|
< div class = "jp-play-bar" ></ div >
|
124
|
</ div >
|
125
|
</ div >
|
126
|
< div class = "jp-volume-bar" >
|
127
|
< div class = "jp-volume-bar-value" ></ div >
|
128
|
</ div >
|
129
|
< div class = "jp-time-holder" >
|
130
|
< div class = "jp-current-time" ></ div >
|
131
|
< div class = "jp-duration" ></ div >
|
132
|
133
|
< ul class = "jp-toggles" >
|
134
|
< li >< a href = "javascript:;" class = "jp-repeat" tabindex = "1" title = "repeat" >repeat</ a ></ li >
|
135
|
< li >< a href = "javascript:;" class = "jp-repeat-off" tabindex = "1" title = "repeat off" >repeat off</ a ></ li >
|
136
|
</ ul >
|
137
|
</ div >
|
138
|
</ div >
|
139
|
< div class = "jp-title" >
|
140
|
< ul >
|
141
|
< li >mp3player powered by xiaowei</ li >
|
142
|
</ ul >
|
143
|
</ div >
|
144
|
< div class = "jp-no-solution" >
|
145
|
< span >Update Required</ span >
|
146
|
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 >.
|
147
|
</ div >
|
148
|
</ div >
|
149
|
</ div >
|
150
|
< div class = "content" >< ul id = "lrc_list" >
|
151
|
点击开始播放……
|
152
|
</ ul ></ div >< br />
|
153
|
</ body >
|
154
|
155
|
</ html >
|
剩下的就是我的组件了,大家可以下载一下!http://pan.baidu.com/share/link?shareid=225514&uk=3172762343这是下载地址哈!
如果您有什么不明白的,可以联系我,如果您还有什么需求也可以联系我,发现bug改进的地方也可以联系我谢谢!
HTML5实践之歌词同步播放器相关推荐
- php 歌词同步,HTML5实践之歌词同步播放器的示例代码分享
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
- html+js的lrc歌词同步播放器
<html> <head> <title>lrc歌词同步播放器</title> <style> body, td { font-family ...
- html js音乐歌词滚动,如何用html+js实现音乐歌词同步播放器
html> 随便听听 var playlist=[]; var bglist=[ "http://img04.taobaocdn.com/imgextra/i4/1655943686/ ...
- mysql ubb html_UBB中轻松实现歌词同步播放_html
Windows Media Player 格式: 1.[wmp=http://homepage.yesky.com/a.wmv]歌词内容[/wmp] 2.[wmp=http://homepage.ye ...
- html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器 代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
- 通过html5实现简易的音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- html触发音频文件,html5实现触发式音频播放器
特效描述:html5实现 触发式 音频播放器.html5实现触发式音频播放器 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Play Audio on :hover We're go ...
- Python 歌词解析器 音乐与歌词同步播放
python 歌词解析器 前言 歌词解析器,顾名思义就是在播放歌曲的时候,音乐播放器放到那一句就显示对应的歌词. *在 python中歌词解析器并不难写,运用 time模块来编写歌词解析器, time ...
- html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签 实现一 ...
最新文章
- apache_tomcat整合应用
- python小猪蹄儿
- P1081 [NOIP2012 提高组] 开车旅行(倍增)(动态规划)
- hive 导出json格式 文件_Hive 系列 之 基本操作合集
- 遗传算法(Genetic Algorithm)
- cisco初级随堂笔记1
- 第五天--表单与页面
- unity tier setting
- 巨潮网怎么下载年报_如何下载上市公司的年度报告
- 分散层叠(Fractional Cascading)
- 分享学JavaScript的第九天
- chrome插件-图片放大预览-imagus
- 达奇机器人编程学院_Wonder Workshop Dash Robot 达奇STEM编程机器人 中英文双语版
- 【目标检测-YOLO】YOLOv5-yolov5s TensorRT部署准备之ONNX导出(第一篇)
- explorer.exe 应用程序错误 应用程序发生异常 未知软件异常 (0xc0000417),位置为 0x100170e9
- mysql association_Mybatis的一对多(collection)和一对一(association)查询
- html怎么实现首行缩进两个字符
- vscode代码拼写检查插件的使用(超详细)
- 男戴观音女戴佛有依据吗?
- Android 开放配件协议 1.0
热门文章
- spring集成mongodb通过aop记录业务日志
- android播放器:mediaplayer
- (九)洞悉linux下的Netfilteramp;iptables:网络地址转换原理之DNAT
- jQuery函数学习
- jquery.inputmask.js 输入框input输入内容格式限制插件
- Lingo 0-1规划
- NHibernate: Session.Save 采用版本控制时无必要地自动Update版本字段的问题
- 数据挖掘原理与算法:练习题2
- python写数据结构书_有哪些用 Python 语言讲算法和数据结构的书?
- 高速信号传输约翰逊 pdf_在PCB板边走高频高速信号线的注意事项