H5音頻處理的一些小知識

時間 2019-11-16

標籤 h5 音頻處理些小知識简体版

原文原文鏈接

前言javascript

LiuDaPcss

　十一事後，小編要作一個關於音樂播放器的項目，要用到大量H5音頻處理的內容，因而在十月一日國慶黃金週閒暇之際，本身學習了一下H5音頻的相關內容。雖然自學的沒有那麼深刻，可是對於像我這種剛剛入行的菜鳥來講作一個簡易的音樂播放功能仍是有必定幫助的吧，畢竟我也拿着我學的這點東西作出了一個有播放功能的播放器。html

　那麼今天就給你們介紹一下關於H5音頻處理的一些相關知識。java

　　其實H5音頻處理，就是audio標籤的使用與操做，掌握了其中一些咱們經常使用的屬性和方法就能夠了。ios

1、關於audio標籤的瀏覽器支持狀況

　　對於audio標籤，絕大多數主流瀏覽器仍是支持的，可是對於一些IE老用戶來講，IE8及之前的版本的瀏覽器不支持audio標籤。下面咱們來舉個例子看一看。瀏覽器

1 <body>
2     <audio src="music/guowang.mp3" controls="controls">您的瀏覽器版本過老了，不支持audio</audio>
3 </body>

這裏要注意的是：函數

　　<audio></audio>標籤之間的文字將顯示在不支持audio標籤的瀏覽器中，支持audio標籤的元素不會被顯示。oop

2、關於audio標籤的使用

　　上面在介紹瀏覽器支持狀況時，用到了一種寫法就是直接給audio添加src屬性，下面還有一種方法就是運用source元素進行。具體代碼以下：學習

1 <body>
2     <audio controls="controls">
3         您的瀏覽器版本過老了，不支持audio
4         <source src="music/guowang.mp3"></source>
5         <source src="music/guowang.ogg"></source>
6     </audio>
7 </body>

如上代碼一樣會在網頁中添加音樂文件。這裏要特別提醒一下source元素flex

source元素能夠在audio標籤中寫多個，並且能夠寫不一樣格式的音樂，瀏覽器會自動識別它所支持的那一個文件進行播放。

3、audio標籤經常使用的一些屬性和方法

　　一、audio元素中的一些新增屬性

　　（1）、controls屬性：添加此屬性，會給播放器自動添加一些控制播放的控件，如：開始、暫停、進度條、音量控制等。具體效果圖以下：

　　（2）、autoplay屬性：添加此屬性，表示在音頻文件就緒後馬上播放

　　（3）、loop屬性：添加此屬性，表示音樂循環播放。

　　（4）、src屬性：要播放的音頻地址。

　　利用上面的這些新增的屬性，咱們就能夠在網頁中播放本身想要的音樂。可是每一個音樂播放器都有本身的界面，都有本身的風格，若是每一個播放器都使用這樣一個樣式那是太俗套了，因此在這些新增的屬性基礎上，audio元素還爲咱們提供了許多對象屬性和方法，咱們能夠用js進行DOM操做，來實現更多不同的播放風格。

　　二、audio元素經常使用的一些對象屬性（屬性太多，我就介紹一些常常用到的）

　　（1）、autoplay屬性：設置或返回是否音頻在加載完成後，隨即播放。

　　（2）、currentTime屬性：設置或返回當前音頻播放的位置，注意：以秒計

　　（3）、defaultMuted屬性：設置或返回音頻是否爲靜音

　　（4）、duration屬性：返回音頻的總時間，注意：以秒計

　　（5）、paused屬性：設置或返回音頻是否暫停

　　（6）、volume屬性：設置或返回音頻的音量

　　三、audio元素的一些對象方法

　　（1）、canPlayType()：檢查瀏覽器是否可以播放指定的音頻類型

　　（2）、fastSeek()：在音頻播放器中指定播放時間

　　（3）、play()：開始播放音頻

　　（4）、pause()：暫停當前播放的音頻

4、舉幾個具體的播放器的例子

　　一、js修改音樂播放器的樣式

　　<audio></audio>標籤給咱們提供的controls屬性，直接給咱們提供了播放器控件的樣式，可是咱們更加要求播放器的不同凡響，喜歡本身設定樣式。而要完成這一點的思路其實很簡單，就是不用audio標籤提供給咱們的controls屬性，運用js操做DOM的能力來實現。具體代碼以下（爲了插入代碼方便，用原生js來寫吧）。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*只是給p標籤作了一個簡單的樣式*/
 8             #play{
 9                 width: 100px;
10                 height: 100px;
11                 border-radius: 50px;
12                 margin: 10px auto;
13                 background-color: blue;
14             }
15         </style>
16     </head>
17     <body>
18         <!--body部分就用p標籤將audio標籤包裹就行，改樣式直接改p標籤-->
19         <p id="play">
20             <audio id="audio" src="music/guowang.mp3"></audio>
21         </p>
22     </body>
23     <script type="text/javascript">
24         var play=document.getElementById("play"); //取到p標籤
25         var audios=document.getElementById("audio"); //取到audio標籤
26         play.onclick=function(){
27             if(audios.paused){  //進行判斷，判斷音樂是否在播放
28                 audios.play();  //若是音樂是暫停的，點擊播放
29             }else{
30                 audios.pause(); //若是音樂是播放的，點擊暫停
31             }
32             play.style.backgroundColor="yellow";
33         }
34     </script>
35 </html>

　　以上代碼寫出來的效果圖以下：就是一個藍色的球，點擊藍球，音樂播放，顏色變爲黃色。

以上只是一個用來修改樣式的小方法，若是你們想要修改更復雜的樣式，須要你們本身去寫，改樣式的思路就在這裏，但願能幫到你！！！

　　二、js實現音樂進度條功能

　　<audio></audio>的controls屬性也給咱們提供了一個進度條的功能，可是它的進度條樣式太醜了，下面用js操做DOM來實現進度條的功能。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*一些簡單的css樣式*/
 8             div{
 9                 display: flex;
10                 justify-content: center;
11             }
12             #pro{
13                 width: 50%;
14                 height: 2px;
15                 background-color: #CCCCCC;
16                 margin: 10px 10px 0px 10px;
17                 position: relative;
18             }
19             #proInner{
20                 display: inline-block;
21                 width: 1%;
22                 height: 2px;
23                 background-color: red;
24                 position: absolute;
25             }
26             #btn{
27                 display: block;
28                 margin: 10px auto;
29             }
30         </style>
31     </head>
32     <body>
33         <div>
34             <span id="timeStart">00:00</span> <!--動態時間-->
35             <p id="pro">
36                 <span id="proInner"></span> <!--紅色進度條-->
37             </p>
38             <span id="timeAll">00:00</span> <!--音樂總時間-->
39         </div>
40         <button id="btn">
41             點擊播放/暫停音樂
42             <audio id="audio" src="music/guowang.mp3"></audio>
43         </button>
44     </body>
45     <script type="text/javascript">
46         //取到相應的元素
47         var btn=document.getElementById("btn");
48         var play=document.getElementById("audio");
49         var timeAll=document.getElementById("timeAll");
50         var timeStart=document.getElementById("timeStart");
51         var proInner=document.getElementById("proInner");
52         //點擊播放事件
53         btn.onclick=function(){
54             timeAll.innerText=formatTime(play.duration); //獲取音樂播放總時間，轉化爲幾分幾秒並丟給timeAll
55             if(play.currentTime<play.duration){
56                 //每隔以秒獲取一次當前音樂播放的時間
57                 var timeOutId=setInterval(function(){
58                     timeStart.innerText=formatTime(play.currentTime);
59                     var a=(play.currentTime/play.duration)*100; //當前播放時間佔總時間的多少
60                     proInner.style.width=a+"%"; //每隔一秒寬度增長百分之a
61                 },1000);
62             }else{
63                 clearInterval(timeOutId);
64             }
65             
66             if(play.paused){ //判斷音頻是否播放
67                 play.play(); //若是暫停，點擊播放
68             }else{
69                 play.pause(); //若是播放，點擊暫停
70             }
71         }
72         
73         //時間轉化函數，將秒轉化爲幾分幾秒的形式
74         function formatTime(seconds){
75             return[
76                 parseInt(seconds/60%60),
77                 parseInt(seconds%60)
78             ]
79             .join(":")
80             .replace(/\b(\d)\b/g, "0$1");
81         }
82     </script>
83 </html>