[转载]html5 audio音频播放全解析——html5系列

序

html5开启了一个新时代，因为它让浏览器本身变得不那么被动，audio api就是一个典型的列子，在html5还没确定之前，如果想要在听音乐看视频唯一的办法就是用flash
意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，当然这些能否实现
还跟你用的浏览器有关。

这是demo地址 http://www.feman.cn/h5/audio.html

在手机上浏览效果会更好

071244071627995.png

文章结构

1.audio的概念以及属性和方法
2.audio的一些事件
3.写一个完整的音频播放页面

详

1.html5 audio的语法以及属性和方法
使用语法

1 <audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>

 


属性
src  是歌曲的路径
controls  播放控制 如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.
loop 歌曲循环 在标签里添加该属性歌曲循环 如果你的歌曲是从后台调取的的 也可以在ajax里设置 loop=true/false来控制;
autoplay 当歌曲加载后自动播放，但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签 他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢
对象属性：
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false
对象方法：
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

以上这些属性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多关于audio的属性和方法可以去w3shool看下 http://www.w3school.com.cn/jsref/dom_obj_audio.asp

2.html5 audio的一些事件
play 播放事件 可判断歌曲是否正在播放中
pause 暂停事件 判断歌曲是否暂停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）
以上这些事件可以通过事件监听对其做相应处理

3.完整的音频播放页面

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
  6     <link rel="shortcut icon" href="img/logo.png">
  7     <title>html5 audio音频播放</title>
  8     <style>
  9         *{ margin: 0; padding:0;}
 10         body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"}
 11         h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }
 12         #audio{ width: 100%;}
 13         #control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}
 14         .color_gray{ background: #e4e4e4}
 15         .hide{ display: none;}
 16         .show{ display: block;}
 17         .play{ background:  #f06060;}
 18         .pause{ background:skyblue}
 19         /*进度条样式*/
 20         .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}
 21         .progressBar div{ position: absolute;}
 22         .progressBar .progressBac{ width: 100%; height: 10px;  left: 0; top:0; background: #e4e4e4;}
 23         .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }
 24         .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px;  background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}
 25         /*时间样式*/
 26         #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
 27         .tiemDetail{ position: absolute; right:10px; top:0;}
 28         #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e;   margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
 29         .shareImg{ position: absolute; left: 100000px;}
 30     </style>
 31 </head>
 32      
 33 <body>
 34     <script>
 35 $(function() {
 36     getSong();
 37 })
 38  
 39 //获取歌曲链接并插入dom中
 40 function getSong() {
 41     var audio = document.getElementById("audio");
 42     audio.src = "http://frontman.qiniudn.com/songnotime.mp3";
 43     audio.loop = true; //歌曲循环
 44     playCotrol(); //播放控制函数
 45  
 46 }
 47  
 48 //点击播放/暂停
 49 function clicks() {
 50     var audio = document.getElementById("audio");
 51     $("#control").click(function() {
 52         if ($("#control").hasClass("play")) {
 53             $("#control").addClass("pause").removeClass("play");
 54             audio.play();//开始播放
 55             dragMove();//并且滚动条开始滑动
 56             $("#control").html("暂停播放");
 57         } else {
 58             $("#control").addClass("play").removeClass("pause");
 59             $("#control").html("点击播放");
 60             audio.pause();
 61         }
 62     })
 63 }
 64  
 65 //播放时间
 66 function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
 67     var timePlace = document.getElementById(timePlace);
 68     //分钟
 69     var minute = time / 60;
 70     var minutes = parseInt(minute);
 71     if (minutes < 10) {
 72         minutes = "0" + minutes;
 73     }
 74     //秒
 75     var second = time % 60;
 76     seconds = parseInt(second);
 77     if (seconds < 10) {
 78         seconds = "0" + seconds;
 79     }
 80     var allTime = "" + minutes + "" + ":" + "" + seconds + ""
 81     timePlace.innerHTML = allTime;
 82 }
 83  
 84 //播放事件监听
 85 function playCotrol() {
 86     audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
 87         function() {
 88             $("#control").addClass("play").removeClass("color_gray");
 89             $("#control").html("点击播放");
 90             addListenTouch(); //歌曲加载之后才可以拖动进度条
 91             var allTime = audio.duration;
 92             timeChange(allTime, "allTime");
 93             setInterval(function() {
 94                 var currentTime = audio.currentTime;
 95                 $("#time .currentTime").html(timeChange(currentTime, "currentTime"));
 96             }, 1000);
 97             clicks();
 98         }, false);
 99  
100     audio.addEventListener("pause",
101         function() { //监听暂停
102             $("#control").addClass("play").removeClass("pause");
103             $("#control").html("点击播放");
104             if (audio.currentTime == audio.duration) {
105                 audio.stop();
106                 audio.currentTime = 0;
107             }
108         }, false);
109     audio.addEventListener("play",
110         function() { //监听暂停
111             $("#control").addClass("pause").removeClass("play");
112             $("#control").html("暂停播放");
113             dragMove();
114         }, false);
115     audio.addEventListener("ended", function() {
116         alert(0)
117     }, false)
118 }
119      
120 //进度条
121 这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
122  var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置
123  
124 //1拖动监听touch事件
125 function addListenTouch() {
126     document.getElementById("drag").addEventListener("touchstart", touchStart, false);
127     document.getElementById("drag").addEventListener("touchmove", touchMove, false);
128     document.getElementById("drag").addEventListener("touchend", touchEnd, false);
129     var drag = document.getElementById("drag");
130     var speed = document.getElementById("speed");
131 }
132  
133 //touchstart,touchmove,touchend事件函数
134  function touchStart(e) { 
135      e.preventDefault();
136      var touch = e.touches[0];
137      startX = touch.pageX;
138  }
139  function touchMove(e) { //滑动         
140      e.preventDefault();
141      var touch = e.touches[0];
142      x = touch.pageX - startX; //滑动的距离
143      //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式    
144      drag.style.left = aboveX + x + "px"; // 
145      speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
146  }
147  function touchEnd(e) { //手指离开屏幕
148      e.preventDefault();
149      aboveX = parseInt(drag.style.left);
150      var touch = e.touches[0];
151      var dragPaddingLeft = drag.style.left;
152      var change = dragPaddingLeft.replace("px", "");
153      numDragpaddingLeft = parseInt(change);
154      var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外
155      audio.currentTime = currentTime;
156  }
157 //3拖动的滑动条前进
158 function dragMove() {
159     setInterval(function() {
160         drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";
161         speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";
162     }, 500);
163 }
164 </script>
165  
166 <h1>html5 audio 音频播放demo</h1>
167  
168 <!--audiostart-->
169 <audio id="audio" src=""  loop="loop" autoplay="autoplay" ></audio>
170 <!--audio End-->
171  
172  
173  
174 <!--播放控制按钮start-->
175 <button id="control" class="">loading</button>
176 <!--播放控制按钮end-->
177  
178 <!--时间进度条块儿start-->
179 <section class="progressBar">
180     <div class="progressBac"></div>
181     <div class="speed" id="speed"></div>
182     <div class="drag" id="drag"></div>
183 </section>
184 <!--时间进度条块儿end-->
185  
186 <!--播放时间start-->
187 <div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div></div>
188 <!--播放时间end-->
189 <!--歌曲信息start-->
190 <div id="songInfo">没时间-Leinov<div class="shareImg"><img src="img/html5audio.jpg" alt=""></div></div>
191 <!--歌曲信息end-->
192 <script src="js/zepto.js"></script>
193 </body>
194 </html>

http://www.open-open.com/lib/view/open1407401112973.html

posted @ 2015-09-06 01:04  浅浅浅红莉栖  阅读(342)  评论(0)  编辑  收藏  举报