Web前端技術(shù)課件-9 音頻與視頻

HTML5音頻與視頻學(xué)習(xí)導(dǎo)圖9.1HTML5音頻元素9.1.1audio元素<audioid="music"src="music.mp3"controlsloopautoplay></audio>語法形式src用來指定音頻文件所在的路徑；controls表示顯示播放控制欄，這里采用簡寫形式，實(shí)際上可以寫成controls="controls"；屬性loop表示循環(huán)播放，同樣可以寫成loop="loop"的形式；屬性autoplay表示自動(dòng)播放。在移動(dòng)設(shè)備中，音頻或視頻的自動(dòng)播放會(huì)導(dǎo)致流量劇增，所在該屬性在移動(dòng)端會(huì)被屏蔽，必須通過相應(yīng)的用戶交互事件才能觸發(fā)。9.1.1audio元素由于不同手機(jī)平臺(tái)或?yàn)g覽器支持的文件格式不同，為了更好的兼容性，有時(shí)候還需要為同一個(gè)音頻準(zhǔn)備不同的文件格式，常用格式有OGG、MP3、WAV等。<audiocontrolsloopautoplay><sourcesrc="music.ogg"type="audio/ogg"><sourcesrc="music.mp3"type="audio/mpeg"><sourcesrc="music.wav"type="audio/wav">

你的瀏覽器不支持音頻播放</audio>語法形式9.1.2Audio對(duì)象創(chuàng)建一個(gè)audio對(duì)象使用createElement方法，同時(shí)使用setAttribute方法為audio對(duì)象設(shè)置相應(yīng)的屬性。9.1.2Audio對(duì)象audio對(duì)象實(shí)現(xiàn)了一系列的屬性和方法，方便在DOM中進(jìn)行調(diào)用，從而實(shí)現(xiàn)對(duì)音頻播放的控制。9.1.2Audio對(duì)象audio對(duì)象常用方法。9.1.2Audio對(duì)象控制音頻播放。9.1.3個(gè)性化音樂播放器9.1.4WebAudioAPIWebAudioAPI提供了一系列JavaScript可以訪問的編程接口，主要用于處理和合成Web應(yīng)用程序中的音頻，可以實(shí)現(xiàn)諸如混音、音效、平移等各種復(fù)雜的音頻處理功能的開發(fā)。獲取麥克風(fēng)音量應(yīng)用實(shí)例9.2HTML5視頻元素9.2.1video元素HTML5中還新增了video元素，用來在網(wǎng)頁中實(shí)現(xiàn)視頻的播放。9.2.2Video對(duì)象創(chuàng)建一個(gè)video對(duì)象同樣是使用createElement方法，并且可以使用setAttribute方法設(shè)置相應(yīng)的