4-5 场景音乐
本节编程练习不计算学习进度，请电脑登录imooc.com操作

场景音乐

圣诞主题会有一个全局的背景音乐+一个最后雪花循环，背景音乐实现还是很简单，可以直接用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

index.htmlchristmas.jscommon.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <link rel='stylesheet' href='common.css' />
  8.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  9.     <script src="christmas.js"></script>
  10. </head>
  11.  
  12. <body>
  13.     <section class="container">
  14.         <!-- 第一幅画面 -->
  15.         <section class="page-a bg-adaptive">
  16.         </section>
  17.         <!-- 第二幅画面 -->
  18.         <section class="page-b bg-adaptive">
  19.         </section>
  20.         <!-- 第三幅画面 -->
  21.         <section class="page-c bg-adaptive">
  22.         </section>
  23.     </section>
  24.     <button>点击播放音乐</button>
  25.     <button>点击播放循环音乐</button>
  26.     <script type="text/javascript">
  27.     /**
  28.      * 自适应页面大小
  29.      * @param  {[type]} doc [description]
  30.      * @param  {[type]} win [description]
  31.      * @return {[type]}     [description]
  32.      */
  33.     var docEl = document.documentElement,
  34.         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  35.         recalc = function() {
  36.             //自适应设置容器高度
  37.             var container = document.querySelector(".container")
  38.                 //原始比例
  39.             var proportion = 900 / 1440;
  40.             container.style.height = container.clientWidth * proportion + "px";
  41.         };
  42.     window.addEventListener(resizeEvt, recalc, false);
  43.     document.addEventListener('DOMContentLoaded', recalc, false);
  44.     </script>
  45. </body>
  46.  
  47. </html>
  48.  
  1. /**
  2.  * 慕课网特制
  3.  * 圣诞主题效果
  4.  * @type {Object}
  5.  */
  6.  
  7.  
  8. /**
  9.  * 背景音乐
  10.  * @param {[type]} url  [description]
  11.  * @param {[type]} loop [description]
  12.  */
  13. function HTML5Audio(url, loop) {
  14.     var audio = new Audio(url);
  15.     audio.autoplay = true;
  16.     audio.loop = loop || false; //是否循环
  17.     audio.play();
  18.     return {
  19.         end: function(callback) {
  20.             audio.addEventListener('ended', function() {
  21.                 callback()
  22.             }, false);
  23.         }
  24.     }
  25. }
  26.  
  27.  
  28. $(function() {
  29.     $("button:first").click(function() {
  30.         //背景音乐
  31.         var audio1 = HTML5Audio('http://www.imooc.com/upload/media/one.mp3')
  32.         audio1.end(function() {
  33.             alert("音乐结束")
  34.         })
  35.     })
  36.     $("button:last").click(function() {
  37.         //循环播放那
  38.         // ? url = http://www.imooc.com/upload/media/two.mp3'
  39.     })
  40. })
  41.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. /*body{
  7.     width: 100%;
  8.     height: 100%;
  9. }*/
  10.  
  11. .container {
  12.     width: 100%;
  13.     height: 100%;
  14.     position: relative;
  15.     overflow: hidden;
  16. }
  17.  
  18. .bg-adaptive {
  19.     background-size: 100% 100%;
  20. } 
  21.  
  22. .container .page-a {
  23.     width  : 100%;
  24.     height : 100%;
  25.     background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
  26.     position: absolute;
  27.     z-index: 5;
  28. }
  29.  
  30. .container .page-b {
  31.     width  : 100%;
  32.     height : 100%;
  33.     background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
  34.     position: absolute;
  35.     z-index: 4;
  36. }
  37.  
  38. .page-c {
  39.     width  : 100%;
  40.     height : 100%;
  41.     background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
  42.     position: absolute;
  43.     z-index: 3;
  44. }
  45.  
  46.  
  47.  
  48.  
  49. /**
  50.  * 页面切换
  51.  * 镜头方法
  52.  */
  53. .effect-out{
  54.     -webkit-animation: effectOut 8s ease-in-out forwards;
  55.     -webkit-transform-origin:71% 72%;
  56.     -moz-animation: effectOut 8s ease-in-out forwards;
  57.     -moz-transform-origin:71% 72%;
  58.  
  59.  
  60. }
  61. @-webkit-keyframes effectOut{
  62.     0% { opacity:1; }
  63.     100% { -webkit-transform: scale(20); opacity:0; }
  64. }
  65. @-moz-keyframes effectOut{
  66.     0% { opacity:1; }
  67.     100% { -moz-transform: scale(20); opacity:0; }
  68. }
  69.  
  70. .effect-in{
  71.     z-index: 15;
  72.     display: block;
  73.     opacity:0;
  74.     -webkit-transform: scale(8); 
  75.     -webkit-animation: effectIn 5s ease-in-out forwards;
  76.     -webkit-transform-origin:58.5% 73.5%;
  77.     -moz-transform: scale(8); 
  78.     -moz-animation: effectIn 5s ease-in-out forwards;
  79.     -moz-transform-origin:58.5% 73.5%;
  80.  
  81.  
  82. }
  83. @-webkit-keyframes effectIn{
  84.     100% { -webkit-transform: scale(1); opacity:1; }
  85. }
  86. @-moz-keyframes effectIn{
  87.     100% { -moz-transform: scale(1); opacity:1; }
  88. }
下一节