1. 程式人生 > >HTML5音訊播放,歌詞同步,及視訊播放功能(JPlayer、JWPlayer、VideoJS)

HTML5音訊播放,歌詞同步,及視訊播放功能(JPlayer、JWPlayer、VideoJS)

最近專案中用到音訊視訊播放,所以就寫了一個demo:

這個是JPlayer外掛的視訊播放:


這個是音訊播放,歌詞同步:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<!--注意:在IIS上配置的時候,需新增mime對映,否則歌詞出不來。在IIS列表中找到“MIME型別”,進行新增.lrc型別;.mp4型別檔案-->
<head>
    <meta charset="utf-8"  content=""/>
    <title></title>
    <!--JPlayer的引用檔案-->
    <script src="JPlayer/jquery.min.js" type="text/javascript"></script>
    <script src="JPlayer/jquery.jplayer.min.js" type="text/javascript"></script>
    <script src="JPlayer/lrc.js" type="text/javascript"></script>
    <link href="Css/style.css" rel="stylesheet" type="text/css" />
    <script src="Layer/layer.js" type="text/javascript"></script>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4"/>
    <meta name="MobileOptimized" content="240"/>

    <!--VideoJS的引用檔案-->
    <link href="VideoJS/video-js.css" rel="stylesheet" type="text/css" />  
    <script type="text/javascript" src="VideoJS/video.js"></script>  
     <script>
         videojs.options.flash.swf = "VideoJS/video-js.swf";
    </script>

     <!--jwplayer的引用檔案-->
    <script src="jwplayer/jwplayer.js" type="text/javascript"></script>

    <style type="text/css">
    * {
    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;}
    </style>

    <script type="text/javascript">

        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("<li>歌曲播放完畢...</li>");
                        //點選開始方法呼叫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("&nbsp;" + $.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("&nbsp; 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";
            }
        }
    </script>
</head>
<body>
<code style="color:green; font-size: x-large; font-weight: bold;">JPlayer外掛:</code>
 <!-- 相容IE所有版本,及谷歌,火狐等瀏覽器-->
<div style="height:360px;width:550px;position:absolute; vertical-align: middle; text-align: center;">
<div class="content">
    <ul id="lrc_list">
        <li></li>
    </ul>
</div>
<textarea id="lrc_content" name="textfield" cols="50" rows="10" style="display:none;"> 
</textarea>
</div>
<div id="jp_sound" style=""></div>

<div>
<div class="jp-Progress">
<div class="progress" id="widthPro" onmousedown="SetProgress(event)" style="width: 100%;background-color: #F9F6B6;background-image: url('/Image/2.jpg')">
  <div class="progress-bar" style="width: 0%;  height: 15px;" 
        id="currentProgress"></div>
</div>
</div>
<div style="margin-top:2px;width:800px;">
<label id="time" style="font-family: 微軟雅黑; font-weight: bold;margin-left:-545px; font-size: 15px; ">&nbsp; 00:00/00:00</label>&nbsp;&nbsp;&nbsp;
<label id="playSong" style="font-family: 微軟雅黑; font-weight: bold;margin-left:0px; font-size: 15px; "></label>
</div>

<br/>
<button id="Play"  class="myButton" onclick="Play()"  onmouseover="ShowTip('Play')">播放</button>
<button id="Pause" class="myButton" onclick="Pause()" onmouseover="ShowTip('Pause')">暫停</button>
<button id="Stop" class="myButton" onclick="Stop()" onmouseover="ShowTip('Stop')">停止</button>
<button id="StopAudio" class="myButton" onclick="StopAudio()" onmouseover="ShowTip('StopAudio')">靜音</button>
<button id="RecoverAudio" class="myButton" onclick="RecoverAudio()" onmouseover="ShowTip('RecoverAudio')">恢復音量</button>
<button id="PreSong" class="myButton" onclick="PreSong()" onmouseover="ShowTip('PreSong')">上一首</button>
<button id="NextSong" class="myButton" onclick="NextSong()" onmouseover="ShowTip('NextSong')">下一首</button>
<button id="FastForward" class="myButton" onclick="FastForward()" onmouseover="ShowTip('FastForward')">快進</button>
<button id="BackAway" class="myButton" onclick="BackAway()" onmouseover="ShowTip('BackAway')">後退</button>
<input id="CircleAudio" type="checkbox"  onclick="CircleAudio()"/>單曲迴圈
</div>

<br/>


<div>
<code style="color:green; font-size: x-large; font-weight: bold;">VideoJS外掛:</code>
    <!-- 支援IE9以上,及谷歌,火狐等瀏覽器-->
    <!-- VideoJS詳細操作:http://www.cnblogs.com/afrog/p/4115377.html -->
    <video width="550px" height="360px" id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"    
      controls preload="auto" width="550px" height="360px"    
      poster="/Image/5.jpg"    
      data-setup='{"example_option":true}'>    
     <source src="/Audio/video.mp4" type='video/mp4' /> 
<!--     <source src="/Audio/video.ogv" type='video/ogg' /> 
     <source src="/Audio/video.webm" type='video/webm' /> -->
    </video>  
</div>

<br />

<code style="color:green; font-size: x-large; font-weight: bold;">jwplayer外掛:</code>
   <!-- 相容IE所有版本,及谷歌,火狐等瀏覽器-->
   <!--jwplayer用法-->
   <div id="container"></div>
<!--    <script type="text/javascript">

        jwplayer("container").setup({
            flashplayer: "/jwplayer/player.swf",
            file: "/Audio/video.mp4",
            image: "/Image/5.jpg",
            height: 360,
            width: 550
//            events: {
//                onReady: function () { this.play(); }
//            }
        });

   </script>-->
   <!--或者快速嵌入用法:-->
   <video class="jwplayer" src="/Audio/video.mp4"poster="/Image/5.jpg" width="550px" height="360px" ></video>
</body>
</html>


完整程式碼,去我的CSDN裡面下載: