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>