慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

场景音乐

圣诞主题会有一个全局的背景音乐+一个最后雪花循环，背景音乐实现还是很简单，可以直接用HTML5的audio元素播放。在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放。

使用：

var audio = new Audio(url);   //创建一个音频对象并传入地址
audio.loop  = loop ||  false; //是否循环
audio.play(); //开始播放

传递一个视频的地址，创建一个Audio对象，设置属性loop是否循环播放，然后调用play方法就可以实现播放了

在圣诞的主题效果中，音乐跟随主题页面不断的切换而变化，其实只有一段音乐，在配音上给人的感觉是跟主题页面的切换是比较吻合的，主要是因为主题的的动画时间，都是按照音频的音乐设置的，这样在实现上是最简单的，当然带来的问题就是不灵活了

如果要实现一个页面独立配一段音频也是可以的，页面在切换的时候可以调用音频的一些重新开始与停止接口就行了

在右边christmas.js的代码区域，把video封装到了HTML5Audio函数中，暴露了一个end的接口，音频有一个ended的事件，用来得到音频是放播放完毕的通知，通过事件监听从可以处理多个音频的连续调用

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

任务

参考christmas.js的代码，给出了背景音乐的调用

请在代码38行处写出循环音乐的代码，音频的地址：http://www.imooc.com/upload/media/two.mp3

?不会了怎么办: Hmlt5Audio('http://www.imooc.com/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>点击播放音乐</button> <button>点击播放循环音乐</button> <script type="text/javascript"> /** * 自适应页面大小 * @param {[type]} doc [description] * @param {[type]} win [description] * @return {[type]} [description] */ var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //自适应设置容器高度 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>

/** * 慕课网特制 * 圣诞主题效果 * @type {Object} */ /** * 背景音乐 * @param {[type]} url [description] * @param {[type]} loop [description] */ function HTML5Audio(url, loop) { var audio = new Audio(url); audio.autoplay = true; audio.loop = loop || false; //是否循环 audio.play(); return { end: function(callback) { audio.addEventListener('ended', function() { callback() }, false); } } } $(function() { $("button:first").click(function() { //背景音乐 var audio1 = HTML5Audio('http://www.imooc.com/upload/media/one.mp3') audio1.end(function() { alert("音乐结束") }) }) $("button:last").click(function() { //循环播放那 // ? url = http://www.imooc.com/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; } /** * 页面切换 * 镜头方法 */ .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; } }

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

4-5 场景音乐

场景音乐

任务

写笔记

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