1. 程式人生 > >HTML5中使用audio元素播放音訊

HTML5中使用audio元素播放音訊

1. 首先介紹的是JS程式碼如何檢測當前瀏覽器是否支援某種音訊格式。主要使用audio的canPlayType()方法:

   function checkAudio(){

      var myAudio = document.createElement('audio');

      if(myAudio.canPlayType){

          if(""!=myAudio.canPlayType('audio/mpeg')){

                  document.write("您的瀏覽器支援mp3編碼。<br>");

           }

            if(""!=myAudio.canPlayType('audio/mp4;codecs="mp4a.40.5")){

                  document.write("您的瀏覽器支援acc編碼。<br>");

           }

           if(""!=myAudio.canPlayType('audio/ogg;codecs="vorbis")){

                  document.write("您的瀏覽器支援acc編碼。<br>");

           }

      }

   }

2. audio元素的幾個重要屬性

   a. autobuffer: 即自動緩衝,但不播放,預設為false.如果使用autoplay則會被忽略。

   b. autoplay: 音訊載入足夠時即開始播放

   c. controls: 用於指定瀏覽器內建播放控制元件。如果不指定,那麼頁面上不會顯示播放器。

   d. loop:指定是否迴圈播放。

   e. muted: ture開啟靜音,false未開啟靜音。

   f. src:指定媒體資源的url地址。

   g. volume:獲取或設定媒體資源的播放音量,範圍為0.0-1.0.0.0為靜音。

3.audio元素的幾個重要方法:

    a. canPlayType方法 - 用於檢測瀏覽器是否支援某種媒體型別。

    b. load方法 - 可用於重新載入媒體。

    c. pause方法 - 暫停媒體播放

    d. play方法- 播放媒體。

4. 播放音訊例子

    <!DOCTYPE html>

   <html>

   <body>

    <audio controls="controls">

            <source src="XXXX.ogg" type="audio/ogg">

           <source src="XXX.mp3" type="audio/mpeg">

         您的瀏覽器不支援audio標籤

    </audio>

    </body>

    </html>

    如果ogg支援則播放ogg檔案,否則繼續檢視mp3檔案是否支援,如果都不支援則顯示文字。

5. 背景音樂

<!DOCTYPE html>
<html>
  <audio autoplay loop>
     <source src = "XXX.mp3">
  </audio>
</html>