欢迎使用CSDN-markdown编辑器

转自：http://blog.csdn.net/wanlong360599336/article/details/46474415

HTML5音频播放，歌词同步，及视频播放功能（JPlayer、JWPlayer、VideoJS）
最近项目中用到音频视频播放，所以就写了一个demo：
这个是JPlayer插件的视频播放：

这个是音频播放，歌词同步：

[html] view plain copy print?
  
  
  
  
  
      
      
       
      
      
      
      
      
      
      
      
  
       
        
        
       
         videojs.options.flash.swf = "VideoJS/video-js.swf";  
  
  
        
      
  
      
    * {  
    margin: 0;  
    padding: 0;  
    outline:none;  
    }  
    ul, ol, dl {  
        list-style: none;  
    }  
    .content {width: 402px;height:200px;overflow:hidden;padding:50px;}  
    #lrc_list{margin:10px auto;color:white;}  
    #lrc_list li{font:normal 14px/2.1 ‘microsoft yahei’;text-align:center;}  
    #lrc_list li.hover {color: green;font-weight:bold;}  
  
  
      
  
        var songId = 0; //歌曲序号  
        var song = ‘video.mp4’; //歌曲名  
        var lrc = ‘/Lrc/火烧的寂寞.lrc’; //歌词  
        var isPlay = false; //是否正在播放  
        var time = “”; //歌词返回时间  
        var htmlobj; //歌词html  
        var currentPro; //当前进度  
  
        //歌曲绑定  
        var songList = new Array();  
        songList.push(“/Audio/video.mp4”);  
        songList.push(“/Audio/火烧的寂寞.mp3”);  
        songList.push(“/Audio/走在冷风中-刘思涵.mp3”);  
        songList.push(“/Audio/父亲.mp3”);  
        songList.push(“/Audio/匆匆那年.mp3”);  
  
        $(document).ready(function () {                              //播放器初始化$(‘#jp_sound’).jPlayer({  
                ready: function () {  
                    $(this).jPlayer(‘setMedia’, { title: song, m4v: songList[0], poster: ‘/Image/1.jpg’ });                   },                   supplied: ’ m4v,mp3’,                   swfPath: ‘/JPlayer/’,                   wmode: ‘window’,                   autoBlur: false,                   smoothPlayBar: true,                   keyEnabled: true,                   solution: ‘flash, html’,                   preload: ‘auto’,                   size: {                       width: “550px”,                       height: “360px”                       //cssClass: “.blur”   //定义播放窗的背景样式                   },                   ended: function () {//结束事件                       if (document.getElementById(‘CircleAudio’).checked) {$(‘#jp_sound’).jPlayer(‘play’);  
                        $(“#lrc_list”).removeAttr(“style”).html(“

• 歌曲播放完毕…
• “);  
                          //点击开始方法调用lrc。start歌词方法 返回时间time  
                           $.lrc.start($(‘#lrc_content’).val(), function () {  
                              return time;  
                          });  
                      }  
                      else {  
                          NextSong();  
                      }  
                  },  
                  volume: 0.5,  
                  timeupdate: function (event) {//时间更改事件  
                      time = event.jPlayer.status.currentTime;  
                       $("#time").html(" " +$.jPlayer.convertTime(event.jPlayer.status.currentTime) + “/” +  $.jPlayer.convertTime(event.jPlayer.status.duration));$(“#currentProgress”).css(“width”, event.jPlayer.status.currentPercentRelative + “%”);  
                      currentPro = event.jPlayer.status.currentPercentRelative;  
                  }  
              });  
          })  
    
    
          //播放  
          function Play() {  
              isPlay = true;  
               $(‘#jp_sound’).jPlayer(‘play’);$(“#playSong”).text(“正在播出：” + song);  
  //            if (lrc != “”)  
  //                ChangeLrc(lrc);  
  //            //点击开始方法调用lrc。start歌词方法 返回时间time  
  //             $.lrc.start($(‘#lrc_content’).val(), function () {  
  //                return time;  
  //            });  
    
          }  
          //停止  
          function Stop() {  
              isPlay = false;  
               $(‘#jp_sound’).jPlayer(‘stop’);$(“#time”).html(“  00:00/00:00”);  
               $(“#playSong”).text(“”);$(“#lrc_list”).hide();  
              // $(“#jp_sound”).jPlayer(“destroy”);//销毁实例           }           //暂停           function Pause() {$(‘#jp_sound’).jPlayer(‘pause’);  
          }  
          //静音  
          function StopAudio() {  
               $(‘#jp_sound’).jPlayer(‘mute’);           }           //恢复音量           function RecoverAudio() {$(‘#jp_sound’).jPlayer(‘unmute’);  
          }  
          //选择某个进度播放  
          function SetProgress(event) {  
              if (isPlay == true) {  
                  var precent = event.clientX / 551;  
                   $(“#jp_sound”).jPlayer(“playHead”, precent * 100);$(‘#jp_sound’).jPlayer(‘play’);  
              }  
          }  
          //是否循环播放  
          function CircleAudio() {  
              if (document.getElementById(‘CircleAudio’).checked) {  
                  if (isPlay == true)  
                       $(‘#jp_sound’).jPlayer(‘play’);               }           }           //上一首           function PreSong() {               if (isPlay == true) {                   songId–;                   if (songId < 0) {                       songId = songList.length - 1;                   }                   PlaySong(songId);               }           }           //下一首           function NextSong() {               if (isPlay == true) {                   songId++;                   if (songId >= songList.length) {                       songId = 0;                   }                   PlaySong(songId);               }           }           //快进           function FastForward() {               if (isPlay == true) {                   var pogress = currentPro + 3;                   if (pogress >= 100)                       NextSong();$(“#jp_sound”).jPlayer(“playHead”, pogress);  
                   $(‘#jp_sound’).jPlayer(‘play’);               }           }           //后退           function BackAway() {               if (isPlay == true) {                   var pogress = currentPro - 3;                   if (pogress <= 0)                       PreSong();$(“#jp_sound”).jPlayer(“playHead”, pogress);  
                   $(‘#jp_sound’).jPlayer(‘play’);               }           }           //播放某一首歌曲           function PlaySong(id) {               var songAddr;               var img;               var format;               switch (id) {                   case 0:                       song = ‘video.mp4’;                       songAddr = songList[0];                       img = ‘/Image/1.jpg’;                       lrc = “”;                       format = “mp4”;                       break;                   case 1:                       song = ‘火烧的寂寞.mp3’;                       songAddr = songList[1];                       img = ‘/Image/2.jpg’;                       lrc = ‘/Lrc/火烧的寂寞.lrc’;                       format = “mp3”;                       break;                   case 2:                       song = ‘走在冷风中-刘思涵.mp3’;                       songAddr = songList[2];                       img = ‘/Image/3.jpg’;                       lrc = ‘/Lrc/走在冷风中.lrc’;                       format = “mp3”;                       break;                   case 3:                       song = ‘父亲.mp3’;                       songAddr = songList[3];                       img = ‘/Image/4.jpg’;                       lrc = ‘/Lrc/父亲.lrc’;                       format = “mp3”;                       break;                   case 4:                       song = ‘匆匆那年.mp3’;                       songAddr = songList[4];                       img = ‘/Image/5.jpg’;                       lrc = ‘/Lrc/匆匆那年.lrc’;                       format = “mp3”;                       break;                   default:                       break;               }               if (lrc != “”)                   ChangeLrc(lrc);               //点击开始方法调用lrc。start歌词方法 返回时间time$.lrc.start( $(‘#lrc_content’).val(), function () {                   return time;               });               SetPlayer(format, song, songAddr, img);               Play();           }           //设置Media           function SetPlayer(format, song, songAddr, img) {$(‘#jp_sound’).jPlayer(“clearMedia”);  
              if (format == “mp3”)  
                   $(‘#jp_sound’).jPlayer(‘setMedia’, { title: song, mp3: songAddr, poster: img });               else if (format == “mp4”) {$(‘#jp_sound’).jPlayer(‘setMedia’, { title: song, m4v: songAddr, poster: img });  
                   $(‘#lrc_list’).hide();                }           }           //气泡显示title           function ShowTip(id) {               layer.tips($(“#” + id).text(), ‘#’ + id, { tips: 3, time: 1500 });  
          }  
          //更换歌词  
          function ChangeLrc(lrc) {  
              if (lrc != “”) {  
                  var text = Ajax(lrc);  
                  if (text == “0”)  
                      alert(“获取歌词失败！”);  
                  else {  
                      $(‘#lrc_content’).html(text);  
                  }  
              }  
          }  
          function Ajax(url, fnSucc, fnFaild) {  
              //1.创建ajax对象  
              if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
                  var oAjax = new XMLHttpRequest();  
              }  
              else {// code for IE6, IE5  
                  var oAjax = new ActiveXObject(“Microsoft.XMLHTTP”);  
              }  
              //2.链接服务器（打开服务器的连接）  
              //open(方法，文件名，异步传输)  
              oAjax.open(‘GET’, url, false);  
              //3.发送  
              oAjax.send();  
              //4.接收返回  
              if (oAjax.readyState == 4) {  
                  if (oAjax.status == 404)  
                      return “0”;  
                  else  
                      return oAjax.responseText;  
              }  
              else {  
                  return “0”;  
              }  
          }  
    
    
    
  JPlayer插件：  
      
  
    
  

    
      

  •   
            
  •