zoukankan      html  css  js  c++  java

  • 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{ 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改进的地方也可以联系我谢谢！
  • 相关阅读:
    [数据结构与算法]Note
    [C++]构造函数那些事
    [C++]constexpr函数
    [计算机系统]字/字节/位
    [C++]返回数组指针
    [C++]Top-level const/Low-level const
    [信号]预加重与去加重--转
    Smart solution of decode String
    ACE学习：
    模糊匹配算法
  • 原文地址：https://www.cnblogs.com/zhwl/p/3586221.html
Copyright © 2011-2022 走看看