99国产在线,亚洲精品一区二区三区新线路

4-5 場(chǎng)景音樂(lè)
收藏

第1章效果預(yù)覽與介紹
視頻：1-1 課程簡(jiǎn)介(03:16)

第2章設(shè)計(jì)思路與蘊(yùn)涵的知識(shí)點(diǎn)
視頻：2-1 整體介紹(01:40)
視頻：2-2 編程思路(02:15)

第8章最終效果與總結(jié)
編程：8-1 最終效果與總結(jié)

場(chǎng)景音樂(lè)

圣誕主題會(huì)有一個(gè)全局的背景音樂(lè)+一個(gè)最后雪花循環(huán)，背景音樂(lè)實(shí)現(xiàn)還是很簡(jiǎn)單，可以直接用HTML5的audio元素播放。在HTML5標(biāo)準(zhǔn)網(wǎng)頁(yè)里面，我們可以運(yùn)用audio標(biāo)簽來(lái)完成我們對(duì)聲音的調(diào)用及播放。

使用：

var audio = new Audio(url);   //創(chuàng)建一個(gè)音頻對(duì)象并傳入地址
audio.loop  = loop ||  false; //是否循環(huán)
audio.play(); //開(kāi)始播放

傳遞一個(gè)視頻的地址，創(chuàng)建一個(gè)Audio對(duì)象，設(shè)置屬性loop是否循環(huán)播放，然后調(diào)用play方法就可以實(shí)現(xiàn)播放了

在圣誕的主題效果中，音樂(lè)跟隨主題頁(yè)面不斷的切換而變化，其實(shí)只有一段音樂(lè)，在配音上給人的感覺(jué)是跟主題頁(yè)面的切換是比較吻合的，主要是因?yàn)橹黝}的的動(dòng)畫(huà)時(shí)間，都是按照音頻的音樂(lè)設(shè)置的，這樣在實(shí)現(xiàn)上是最簡(jiǎn)單的，當(dāng)然帶來(lái)的問(wèn)題就是不靈活了

如果要實(shí)現(xiàn)一個(gè)頁(yè)面獨(dú)立配一段音頻也是可以的，頁(yè)面在切換的時(shí)候可以調(diào)用音頻的一些重新開(kāi)始與停止接口就行了

在右邊christmas.js的代碼區(qū)域，把video封裝到了HTML5Audio函數(shù)中，暴露了一個(gè)end的接口，音頻有一個(gè)ended的事件，用來(lái)得到音頻是放播放完畢的通知，通過(guò)事件監(jiān)聽(tīng)從可以處理多個(gè)音頻的連續(xù)調(diào)用

var audio1 = HTML5Audio(playURl)
audio1.end(function() {
    Html5Audio(cycleURL, true)
})

任務(wù)

參考christmas.js的代碼，給出了背景音樂(lè)的調(diào)用

請(qǐng)?jiān)诖a38行處寫(xiě)出循環(huán)音樂(lè)的代碼，音頻的地址：http://idcbgp.cn/upload/media/two.mp3

?不會(huì)了怎么辦: Hmlt5Audio('http://idcbgp.cn/upload/media/two.mp3', true)

||

index.html
christmas.js
common.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣誕主題</title> <link rel='stylesheet' href='common.css' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script src="christmas.js"></script> </head> <body> <section class="container">  <section class="page-a bg-adaptive"> </section>  <section class="page-b bg-adaptive"> </section>  <section class="page-c bg-adaptive"> </section> </section> <button>點(diǎn)擊播放音樂(lè)</button> <button>點(diǎn)擊播放循環(huán)音樂(lè)</button> <script type="text/javascript"> /** * 自適應(yīng)頁(yè)面大小 * @param {[type]} doc [description] * @param {[type]} win [description] * @return {[type]} [description] */ var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //自適應(yīng)設(shè)置容器高度 var container = document.querySelector(".container") //原始比例 var proportion = 900 / 1440; container.style.height = container.clientWidth * proportion + "px"; }; window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </body> </html>

/** * 慕課網(wǎng)特制 * 圣誕主題效果 * @type {Object} */ /** * 背景音樂(lè) * @param {[type]} url [description] * @param {[type]} loop [description] */ function HTML5Audio(url, loop) { var audio = new Audio(url); audio.autoplay = true; audio.loop = loop || false; //是否循環(huán) audio.play(); return { end: function(callback) { audio.addEventListener('ended', function() { callback() }, false); } } } $(function() { $("button:first").click(function() { //背景音樂(lè) var audio1 = HTML5Audio('http://idcbgp.cn/upload/media/one.mp3') audio1.end(function() { alert("音樂(lè)結(jié)束") }) }) $("button:last").click(function() { //循環(huán)播放那 // ? url = http://idcbgp.cn/upload/media/two.mp3' }) })

*{ margin: 0; padding: 0; } /*body{ width: 100%; height: 100%; }*/ .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; } .container .page-a { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png"); position: absolute; z-index: 5; } .container .page-b { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png"); position: absolute; z-index: 4; } .page-c { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png"); position: absolute; z-index: 3; } /** * 頁(yè)面切換 * 鏡頭方法 */ .effect-out{ -webkit-animation: effectOut 8s ease-in-out forwards; -webkit-transform-origin:71% 72%; -moz-animation: effectOut 8s ease-in-out forwards; -moz-transform-origin:71% 72%; } @-webkit-keyframes effectOut{ 0% { opacity:1; } 100% { -webkit-transform: scale(20); opacity:0; } } @-moz-keyframes effectOut{ 0% { opacity:1; } 100% { -moz-transform: scale(20); opacity:0; } } .effect-in{ z-index: 15; display: block; opacity:0; -webkit-transform: scale(8); -webkit-animation: effectIn 5s ease-in-out forwards; -webkit-transform-origin:58.5% 73.5%; -moz-transform: scale(8); -moz-animation: effectIn 5s ease-in-out forwards; -moz-transform-origin:58.5% 73.5%; } @-webkit-keyframes effectIn{ 100% { -webkit-transform: scale(1); opacity:1; } } @-moz-keyframes effectIn{ 100% { -moz-transform: scale(1); opacity:1; } }

提問(wèn)題

提交

其他問(wèn)答

查看更多本節(jié)問(wèn)答

寫(xiě)筆記

公開(kāi)筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開(kāi)微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問(wèn)題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

4-5 場(chǎng)景音樂(lè)

場(chǎng)景音樂(lè)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫(xiě)筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

4-5 場(chǎng)景音樂(lè)

熱搜

最近搜索清空

場(chǎng)景音樂(lè)

任務(wù)

提問(wèn)題

其他問(wèn)答

寫(xiě)筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～