序
html5开启了一个新时代，因为它让浏览器本身变得不那么被动，audio api就是一个典型的列子，在html5还没确定之前，如果想要在听音乐看视频唯一的办法就是用flash
意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，当然这些能否实现
还跟你用的浏览器有关。
这是demo地址 http://www.feman.cn/h5/audio.html
在手机上浏览效果会更好
文章结构
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{ 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; } 12 #audio{ 100%;} 13 #control{ 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{ 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;} 21 .progressBar div{ position: absolute;} 22 .progressBar .progressBac{ 100%; height: 10px; left: 0; top:0; background: #e4e4e4;} 23 .progressBar .speed{ 100%; height: 10px; left: -100%; background: #f06060; } 24 .progressBar .drag{ 30px; height: 30px; left: 0; top:-10px; background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;} 25 /*时间样式*/ 26 #time{ 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;} 27 .tiemDetail{ position: absolute; right:10px; top:0;} 28 #songInfo{overflow: hidden; 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