歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5應用——簡易播放器

如今HTML已經是比較熱門的了，各種關於HTML5的應用程序、游戲、應用商店等也如火如荼的展開了。各大主流浏覽器也紛紛開始支持HTML5標准，以備打贏新的一輪浏覽器大戰。

話不多說，不知道大家有沒有發現，可以用比較新的版本的谷歌浏覽器直接打開.mp3格式的音樂。自己可以試試：

這是用谷歌浏覽器直接打開mp3文件的情況。 其實，許多新的浏覽器都開始支持HTML5中<audio> <video>標簽，使得一些格式的流媒體可以擺脫對插件的依賴。 下面我就以<audio>標簽做一個簡易的音樂播放器.

<audio>控件可以通過一些內置的JavaSceipt函數和特性進行控制，以及進行二次開發。例如load()、play()、pause()等控制音頻播放的函數，paused、ended、currentTime、startTime等屬性等.

對於這個簡易播放器具有播放\暫停、快進、快退等功能，結合<canvas>對象繪制圖形

  1. <%@language="javascript" %>  
  2. <html>  
  3. <head>  
  4. <title>PlayMusic</title>  
  5. <style type="text/css">  
  6.     div.s{position:absolute;left:100px;top:200px;width:600px;}  
  7.     audio{width:600px;position:absolute;left:0px;top:100px;}  
  8.     canvas{position:absolute;left:0px;top:40px;}  
  9.     marquee{position:absolute;left:250px;top:180px;}  
  10.     h1{color:Red;}  
  11.     h1.a{color:Green;position:absolute;left:200px;top:50px;}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h1 class="a">歡迎使用HTML5播放器</h1>  
  16. <%  
  17.     var name = Request.QueryString("name");  
  18.     if (name == "")  
  19.         name = "";  
  20.   
  21.     name1 = "save_music\\" + name + ".mp3";  
  22.     //Response.Write(name);  
  23.       
  24.  %>  
  25.  <marquee behavior=scroll scrolldelay=200 scrollamount=30 width="300" ><h1><%=name %></h1></marquee>  
  26.  <div class="s">  
  27.  <canvas width="600" height="60" id="MusicCanvas"  onclick="dealclick()"></canvas>  
  28. <audio id="music" src=<%=name1 %> controls>  
  29. 您的浏覽器不支持HTML5中的audio標簽  
  30. </audio>  
  31. </div>  
  32. </body>  
  33. </html>  
  34. <script type="text/javascript">  
  35.     var c = document.getElementById("MusicCanvas");  
  36.     var ccon = c.getContext("2d");  
  37.     var toggle = document.getElementById("music");  
  38.     drawPS();  
  39.     drawQuick();  
  40.      
  41.     function drawPS() //flag=1表示播放命令，flag=0表示暫停  
  42.     {  
  43.         con.save();  
  44.         con.beginPath();  
  45.         var g = con.createRadialGradient(275, 30, 0, 275, 30, 25); //創建漸變顏色  
  46.         if (toggle.paused) //暫停狀態  
  47.         {  
  48.             g.addColorStop(0.2, "#1FD856"); //  
  49.             g.addColorStop(0.8, "black"); //  
  50.             toggle.play();  
  51.         }  
  52.         else //播放狀態  
  53.         {  
  54.             g.addColorStop(0.2, "red"); //黃  
  55.             g.addColorStop(0.8, "black"); //  
  56.             toggle.pause();  
  57.         }  
  58.         con.fillStyle = g;  
  59.         con.arc(275, 30, 25, 0, Math.PI * 2, true);  
  60.         con.fill();  
  61.         con.closePath();  
  62.         con.restore();  
  63.            
  64.     }  
  65.     function drawQuick() //  
  66.     {  
  67.         con.save();  
  68.         con.beginPath();  
  69.         con.fillStyle = "grey";  
  70.         con.fillRect(130, 10, 70, 40);  
  71.         con.fillStyle = "black";  
  72.         con.moveTo(130, 30);con.lineTo(145, 13);con.lineTo(165, 13);con.lineTo(150, 30);con.lineTo(165, 47);con.lineTo(145, 47);con.lineTo(130, 30);  
  73.         con.fill();  
  74.         con.moveTo(160, 30); con.lineTo(175, 13); con.lineTo(195, 13); con.lineTo(180, 30); con.lineTo(195, 47); con.lineTo(175, 47); con.lineTo(160, 30);  
  75.         con.fill();  
  76.         con.closePath();  
  77.         con.beginPath();  
  78.         con.fillStyle = "grey";  
  79.         var x = 350;  
  80.         con.fillRect(x, 10, 70, 40);  
  81.         x += 70;  
  82.         con.fillStyle = "black";  
  83.         con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);  
  84.         x -= 30;  
  85.         con.moveTo(x, 30); con.lineTo(x - 15, 13); con.lineTo(x - 35, 13); con.lineTo(x - 20, 30); con.lineTo(x - 35, 47); con.lineTo(x - 15, 47); con.lineTo(x, 30);  
  86.         con.fill();  
  87.         //con.moveTo(160, 40); con.lineTo(175, 23); con.lineTo(195, 23); con.lineTo(180, 40); con.lineTo(195, 57); con.lineTo(175, 57); con.lineTo(160, 40);  
  88.         con.fill();  
  89.         con.closePath();  
  90.         con.restore();  
  91.     }  
  92.     function dealclick()//處理敲擊事件  
  93.     {  
  94.         var x = event.clientX;  
  95.         var y = event.clientY;  
  96.         var flag = getPos(x, y);  
  97.         //alert(x.toString() + "  " + y.toString()+"  "+flag.toString());  
  98.         if(flag==0)  
  99.         return;  
  100.     switch (flag)//  
  101.     {  
  102.         case 1: drawPS(); break;  
  103.         case 2: quickOrslow(0); break;  
  104.         case 3: quickOrslow(1); break;  
  105.     }  
  106.     }  
  107.     function getPos(x, y) //  
  108.     {  
  109.        var px=100;  
  110.        var py=240;  
  111.        x-=px;  
  112.        y-=py;  
  113.        if (x >= 275 && x <= 325 && y >= 15 && y<= 65)  
  114.            return 1;  
  115.        if (x >= 130 && x <= 200 && y >= 20 && y <= 60)  
  116.            return 2;  
  117.        if (x >= 350 && x <= 420 && y >= 20 && y <= 60)  
  118.            return 3;  
  119.        return 0;  
  120.    }  
  121.    function quickOrslow(flag) //  
  122.    {  
  123.        var total = toggle.duration;  
  124.        var s = Math.ceil(total*0.05);  
  125.        if (flag == 1)//kuaijin  
  126.        {  
  127.            if (toggle.ended == true)  
  128.                return;  
  129.            var now = toggle.currentTime;  
  130.            if (total - now <= s)  
  131.                return;  
  132.            else  
  133.                toggle.currentTime = now + s;  
  134.        }  
  135.        else  //後退  
  136.        {  
  137.            var n = toggle.currentTime;  
  138.            if (n < s)  
  139.                return;  
  140.            else  
  141.                toggle.currentTime = n - s;  
  142.        }  
  143.    }  
  144.   
  145. </script>  

這是全部的源代碼，當然其中包含了一些ASP語句，適用於傳遞歌曲名的，可以不用考慮。

drawPS()是控制播放與暫停的函數,quickOrSlow()是控制快退的函數。 

當然這個播放器是非常簡陋的，但是通過加工美化，還是可以做出優秀的播放器的，而且是沒有插件的。 

Linux編程

Python來做應用題及思路

Java占位符應用

Android應用開發之簡易音頻播放器

Android應用開發之簡易視頻播放器

Android應用開發之視頻播放器

Qt 簡易播放器

Android應用實例之調節播放器音量——AudioManager的應用

應用：Linux下使用Mplayer播放電影

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved