HTML5实践之歌词同步播放器

最新推荐文章于 2021-06-03 23:31:40 发布

weixin_34007291

最新推荐文章于 2021-06-03 23:31:40 发布

阅读量418

点赞数

文章标签： javascript ViewUI

歌曲播放我们会发现他的兼容性不是很好，譬如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; }
 
    015ul, 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改进的地方也可以联系我谢谢！

weixin_34007291

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5实践之歌词同步播放器

歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！...
复制链接

扫一扫