HTML DOM Audio對象的方法、屬性和事件

更新時間:2022-03-31 來源:黑馬程序員瀏覽量:

HTML5為Audio對象提供了用于DOM操作的方法和事件，常用方法如表3-8所示。

表3-8Audio對象的常用方法

Audio對象用于DOM操作的常用屬性，如表3-9所示。

表3-9Audio對象的常用屬性

Audio對象用于DOM操作的的常用事件如表3-10所示。

表3-10Audio對象的常用事件

以上方法、屬性和事件可以通過JavaScript來操作，用法與Video對象中的方法屬性等非常相似。

例如使用按鈕來控制音頻的播放，如demo3-5所示。

d

emo

3

-

5.html

<!DOCTYPE Doctype html>
<html>
<head>
     <meta charset="utf-8">
     <title>JavaScript操作audio對象</title>
        </meta>
</head>
<script>
     //頁面加載完畢后執(zhí)行
     window.onload=function(){
        //通過標簽名獲取button按鈕
        document.getElementsByTagName("button")[0].onclick=function(){
           //通過標簽名獲取audio對象
            document.getElementsByTagName("audio")[0].load();
            document.getElementsByTagName("audio")[0].play();
       }
   }
</script>
<body>
<audio src="audio/music.mp3"></audio>
<button>播放音樂</button>
    </body>
</html>

demo3-5.html用瀏覽器打開demo3-5，頁面效果如圖3-5所示。

圖3-7demo3-5頁面效果

在demo3-5中，使用標簽名來獲取某個標簽時，默認得到的是數(shù)組對象，數(shù)組對象的下標從0開始，這里每種標簽只有一個，所以使用下標0來獲取對象，單擊圖3-7所示“播放音樂”按鈕，音樂開始播放。

多學(xué)一招：深入理解Audio和Video對象

audio標簽和video標簽有很大的相似性，Audio對象和Video對象的DOM操作功能都是由HTMLMediaElement對象統(tǒng)一定義的核心功能，Audio對象指的是HTMLAudioElement對象，它完全繼承了HTMLMediaElement對象提供的功能，而Video對象指的是HTMLVideoElement對象，在該對象中提供了額外的功能，主要表現(xiàn)在一些額外的屬性上，如表3-11所示。

表3-11HTMLVideoElement對象定義的額外屬性