更新時(shí)間:2022-03-31 來源:黑馬程序員 瀏覽量:
HTML5為Audio對(duì)象提供了用于DOM操作的方法和事件,常用方法如表3-8所示。
表3-8Audio對(duì)象的常用方法
Audio對(duì)象用于DOM操作的常用屬性,如表3-9所示。
表3-9Audio對(duì)象的常用屬性
Audio對(duì)象用于DOM操作的的常用事件如表3-10所示。
表3-10Audio對(duì)象的常用事件
以上方法、屬性和事件可以通過JavaScript來操作,用法與Video對(duì)象中的方法屬性等非常相似。
例如使用按鈕來控制音頻的播放,如demo3-5所示。
<!DOCTYPE Doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript操作audio對(duì)象</title> </meta> </head> <script> //頁面加載完畢后執(zhí)行 window.onload=function(){ //通過標(biāo)簽名獲取button按鈕 document.getElementsByTagName("button")[0].onclick=function(){ //通過標(biāo)簽名獲取audio對(duì)象 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)簽名來獲取某個(gè)標(biāo)簽時(shí),默認(rèn)得到的是數(shù)組對(duì)象,數(shù)組對(duì)象的下標(biāo)從0開始,這里每種標(biāo)簽只有一個(gè),所以使用下標(biāo)0來獲取對(duì)象,單擊圖3-7所示“播放音樂”按鈕,音樂開始播放。
多學(xué)一招:深入理解Audio和Video對(duì)象
audio標(biāo)簽和video標(biāo)簽有很大的相似性,Audio對(duì)象和Video對(duì)象的DOM操作功能都是由HTMLMediaElement對(duì)象統(tǒng)一定義的核心功能,Audio對(duì)象指的是HTMLAudioElement對(duì)象,它完全繼承了HTMLMediaElement對(duì)象提供的功能,而Video對(duì)象指的是HTMLVideoElement對(duì)象,在該對(duì)象中提供了額外的功能,主要表現(xiàn)在一些額外的屬性上,如表3-11所示。
表3-11HTMLVideoElement對(duì)象定義的額外屬性
以上屬性是Audio對(duì)象沒有的哦!