首頁技術(shù)文章正文

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(){
        //通過標(biāo)簽名獲取button按鈕
        document.getElementsByTagName("button")[0].onclick=function(){
           //通過標(biāo)簽名獲取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中,使用標(biāo)簽名來獲取某個標(biāo)簽時,默認(rèn)得到的是數(shù)組對象,數(shù)組對象的下標(biāo)從0開始,這里每種標(biāo)簽只有一個,所以使用下標(biāo)0來獲取對象,單擊圖3-7所示“播放音樂”按鈕,音樂開始播放。

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

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

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

以上屬性是Audio對象沒有的哦!






猜你喜歡:

嵌入視頻如何為video標(biāo)簽添加寬高?

WEB前端開發(fā)之video標(biāo)簽使用教程

Html5 aside標(biāo)簽的用法和作用

HTML img標(biāo)簽的用法及相關(guān)屬性介紹

黑馬程序員HTML&js前端與開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!