HTML5标签--音频播放全解析

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的语法以及属性和方法
使用语法

属性
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.完整的音频播放页面

”en”>

    ”UTF-8”>
    ”viewport” content=“width=device-width,initial-scale=1 user-scalable=0”/>
    ”shortcut icon” href=“img/logo.png”>
    html5 audio音频播放
      </li> 
        <li class="alt">        *{ margin: 0; padding:0;}  </li> 
        <li class="">        body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: <span class="string">”微软雅黑”</span>}  </li> 
        <li class="alt">        h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }  </li> 
        <li class=""><span class="preprocessor">        #audio{ width: 100%;}</span>  </li> 
        <li class="alt"><span class="preprocessor">        #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;}</span>  </li> 
        <li class="">        .color_gray{ background: #e4e4e4}  </li> 
        <li class="alt">        .hide{ display: none;}  </li> 
        <li class="">        .show{ display: block;}  </li> 
        <li class="alt">        .play{ background:  #f06060;}  </li> 
        <li class="">        .pause{ background:skyblue}  </li> 
        <li class="alt">        <span class="comment">/*进度条样式*/</span>  </li> 
        <li class="">        .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}  </li> 
        <li class="alt">        .progressBar div{ position: absolute;}  </li> 
        <li class="">        .progressBar .progressBac{ width: 100%; height: 10px;  left: 0; top:0; background: #e4e4e4;}  </li> 
        <li class="alt">        .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }  </li> 
        <li class="">        .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px;  background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}  </li> 
        <li class="alt">        <span class="comment">/*时间样式*/</span>  </li> 
        <li class=""><span class="preprocessor">        #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}</span>  </li> 
        <li class="alt">        .tiemDetail{ position: absolute; right:10px; top:0;}  </li> 
        <li class=""><span class="preprocessor">        #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;}</span>  </li> 
        <li class="alt">        .shareImg{ position: absolute; left: 100000px;}  </li> 
        <li class="">



      </li> 
        <li class="alt"><span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-15-Frame"><span class="math" id="MathJax-Span-29"><span class="noError" id="MathJax-Span-30" style="display: inline-block;">(<span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;getSong();&nbsp;&nbsp;</span></li><li class="alt"><span>})&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span><span class="comment">//获取歌曲链接并插入dom中</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;getSong()&nbsp;{&nbsp;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;audio&nbsp;=&nbsp;document.getElementById(</span><span class="string">"audio"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;audio.src&nbsp;=&nbsp;<span class="string">"http://frontman.qiniudn.com/songnotime.mp3"</span><span>;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;audio.loop&nbsp;=&nbsp;<span class="keyword">true</span><span>;&nbsp;</span><span class="comment">//歌曲循环</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;playCotrol();&nbsp;<span class="comment">//播放控制函数</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span><span class="comment">//点击播放/暂停</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">function</span><span>&nbsp;clicks()&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;audio&nbsp;=&nbsp;document.getElementById(</span><span class="string">"audio"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">"#control"</span><span>).click(</span><span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>&nbsp;(<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-16-Frame"><span class="math" id="MathJax-Span-31"><span class="noError" id="MathJax-Span-32" style="display: inline-block;">(</span><span class="string">"#control"</span><span>).hasClass(</span><span class="string">"play"</span><span>))&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">"#control"</span><span>).addClass(</span><span class="string">"pause"</span><span>).removeClass(</span><span class="string">"play"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio.play();<span class="comment">//开始播放</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dragMove();<span class="comment">//并且滚动条开始滑动</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-17-Frame"><span class="math" id="MathJax-Span-33"><span class="noError" id="MathJax-Span-34" style="display: inline-block;">(<span class="string">"#control"</span><span>).html(</span><span class="string">"暂停播放"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span class="keyword">else</span><span>&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">"#control"</span><span>).addClass(</span><span class="string">"play"</span><span>).removeClass(</span><span class="string">"pause"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-18-Frame"><span class="math" id="MathJax-Span-35"><span class="noError" id="MathJax-Span-36" style="display: inline-block;">(<span class="string">"#control"</span><span>).html(</span><span class="string">"点击播放"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio.pause();&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;</span></li><li class="alt"><span>}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span><span class="comment">//播放时间</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="keyword">function</span><span>&nbsp;timeChange(time,&nbsp;timePlace)&nbsp;{</span><span class="comment">//默认获取的时间是时间戳改成我们常见的时间格式</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;timePlace&nbsp;=&nbsp;document.getElementById(timePlace);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//分钟</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;minute&nbsp;=&nbsp;time&nbsp;/&nbsp;60;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;minutes&nbsp;=&nbsp;parseInt(minute);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>&nbsp;(minutes&nbsp;&lt;&nbsp;10)&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minutes&nbsp;=&nbsp;<span class="string">"0"</span><span>&nbsp;+&nbsp;minutes;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//秒</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;second&nbsp;=&nbsp;time&nbsp;%&nbsp;60;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;seconds&nbsp;=&nbsp;parseInt(second);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>&nbsp;(seconds&nbsp;&lt;&nbsp;10)&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds&nbsp;=&nbsp;<span class="string">"0"</span><span>&nbsp;+&nbsp;seconds;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;allTime&nbsp;=&nbsp;</span><span class="string">""</span><span>&nbsp;+&nbsp;minutes&nbsp;+&nbsp;</span><span class="string">""</span><span>&nbsp;+&nbsp;</span><span class="string">":"</span><span>&nbsp;+&nbsp;</span><span class="string">""</span><span>&nbsp;+&nbsp;seconds&nbsp;+&nbsp;</span><span class="string">""</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;timePlace.innerHTML&nbsp;=&nbsp;allTime;&nbsp;&nbsp;</span></li><li class=""><span>}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span><span class="comment">//播放事件监听</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">function</span><span>&nbsp;playCotrol()&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;audio.addEventListener(<span class="string">"loadeddata"</span><span>,&nbsp;</span><span class="comment">//歌曲一经完整的加载完毕(&nbsp;也可以写成上面提到的那些事件类型)</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">"#control"</span><span>).addClass(</span><span class="string">"play"</span><span>).removeClass(</span><span class="string">"color_gray"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-19-Frame"><span class="math" id="MathJax-Span-37"><span class="noError" id="MathJax-Span-38" style="display: inline-block;">(<span class="string">"#control"</span><span>).html(</span><span class="string">"点击播放"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addListenTouch();&nbsp;<span class="comment">//歌曲加载之后才可以拖动进度条</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;allTime&nbsp;=&nbsp;audio.duration;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeChange(allTime,&nbsp;<span class="string">"allTime"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setInterval(<span class="keyword">function</span><span>()&nbsp;{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">var</span><span>&nbsp;currentTime&nbsp;=&nbsp;audio.currentTime;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">"#time&nbsp;.currentTime"</span><span>).html(timeChange(currentTime,&nbsp;</span><span class="string">"currentTime"</span><span>));&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000);&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clicks();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;<span class="keyword">false</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;audio.addEventListener(<span class="string">"pause"</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">function</span><span>()&nbsp;{&nbsp;</span><span class="comment">//监听暂停</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-20-Frame"><span class="math" id="MathJax-Span-39"><span class="noError" id="MathJax-Span-40" style="display: inline-block;">(<span class="string">"#control"</span><span>).addClass(</span><span class="string">"play"</span><span>).removeClass(</span><span class="string">"pause"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">"#control"</span><span>).html(</span><span class="string">"点击播放"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>&nbsp;(audio.currentTime&nbsp;==&nbsp;audio.duration)&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio.stop();&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;audio.currentTime&nbsp;=&nbsp;0;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;<span class="keyword">false</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;audio.addEventListener(<span class="string">"play"</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">function</span><span>()&nbsp;{&nbsp;</span><span class="comment">//监听暂停</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-21-Frame"><span class="math" id="MathJax-Span-41"><span class="noError" id="MathJax-Span-42" style="display: inline-block;">(<span class="string">"#control"</span><span>).addClass(</span><span class="string">"pause"</span><span>).removeClass(</span><span class="string">"play"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></span>(<span class="string">”#control”</span>).html(<span class="string">“暂停播放”</span>);  </li> 
        <li class="alt">            dragMove();  </li> 
        <li class="">        }, <span class="keyword">false</span>);  </li> 
        <li class="alt">    audio.addEventListener(<span class="string">”ended”</span>, <span class="keyword">function</span>() {  </li> 
        <li class="">        alert(0)  </li> 
        <li class="alt">    }, <span class="keyword">false</span>)  </li> 
        <li class="">}  </li> 
        <li class="alt">      </li> 
        <li class=""><span class="comment">//进度条</span>  </li> 
        <li class="alt">这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http:<span class="comment">//www.cnblogs.com/leinov/p/3701951.html</span>  </li> 
        <li class=""> <span class="keyword">var</span> startX, x, aboveX = 0; <span class="comment">//触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置 </span>  </li> 
        <li class="alt">  </li> 
        <li class=""><span class="comment">//1拖动监听touch事件</span>  </li> 
        <li class="alt"><span class="keyword">function</span> addListenTouch() {  </li> 
        <li class="">    document.getElementById(<span class="string">”drag”</span>).addEventListener(<span class="string">“touchstart”</span>, touchStart, <span class="keyword">false</span>);  </li> 
        <li class="alt">    document.getElementById(<span class="string">”drag”</span>).addEventListener(<span class="string">“touchmove”</span>, touchMove, <span class="keyword">false</span>);  </li> 
        <li class="">    document.getElementById(<span class="string">”drag”</span>).addEventListener(<span class="string">“touchend”</span>, touchEnd, <span class="keyword">false</span>);  </li> 
        <li class="alt">    <span class="keyword">var</span> drag = document.getElementById(<span class="string">“drag”</span>);  </li> 
        <li class="">    <span class="keyword">var</span> speed = document.getElementById(<span class="string">“speed”</span>);  </li> 
        <li class="alt">}  </li> 
        <li class="">  </li> 
        <li class="alt"><span class="comment">//touchstart,touchmove,touchend事件函数</span>  </li> 
        <li class=""> <span class="keyword">function</span> touchStart(e) {    </li> 
        <li class="alt">     e.preventDefault();  </li> 
        <li class="">     <span class="keyword">var</span> touch = e.touches[0];  </li> 
        <li class="alt">     startX = touch.pageX;   </li> 
        <li class=""> }  </li> 
        <li class="alt"> <span class="keyword">function</span> touchMove(e) { <span class="comment">//滑动          </span>  </li> 
        <li class="">     e.preventDefault();  </li> 
        <li class="alt">     <span class="keyword">var</span> touch = e.touches[0];  </li> 
        <li class="">     x = touch.pageX - startX; <span class="comment">//滑动的距离</span>  </li> 
        <li class="alt">     <span class="comment">//drag.style.webkitTransform = ‘translate(‘ + 0+ ‘px, ’ + y + ‘px)’;  //也可以用css3的方式     </span>  </li> 
        <li class="">     drag.style.left = aboveX + x + <span class="string">”px”</span>; <span class="comment">//  </span>  </li> 
        <li class="alt">     speed.style.left = -((window.innerWidth) - (aboveX + x)) + <span class="string">”px”</span>;  </li> 
        <li class=""> }  </li> 
        <li class="alt"> <span class="keyword">function</span> touchEnd(e) { <span class="comment">//手指离开屏幕</span>  </li> 
        <li class="">     e.preventDefault();  </li> 
        <li class="alt">     aboveX = parseInt(drag.style.left);  </li> 
        <li class="">     <span class="keyword">var</span> touch = e.touches[0];  </li> 
        <li class="alt">     <span class="keyword">var</span> dragPaddingLeft = drag.style.left;  </li> 
        <li class="">     <span class="keyword">var</span> change = dragPaddingLeft.replace(<span class="string">“px”</span>, <span class="string">“”</span>);  </li> 
        <li class="alt">     numDragpaddingLeft = parseInt(change);  </li> 
        <li class="">     <span class="keyword">var</span> currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;<span class="comment">//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外</span>  </li> 
        <li class="alt">     audio.currentTime = currentTime;  </li> 
        <li class=""> }  </li> 
        <li class="alt"><span class="comment">//3拖动的滑动条前进</span>  </li> 
        <li class=""><span class="keyword">function</span> dragMove() {  </li> 
        <li class="alt">    setInterval(<span class="keyword">function</span>() {  </li> 
        <li class="">        drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + <span class="string">”px”</span>;  </li> 
        <li class="alt">        speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + <span class="string">”px”</span>;  </li> 
        <li class="">    }, 500);  </li> 
        <li class="alt">}  </li> 
        <li class="">

html5 audio 音频播放demo


”audio” src=“”  loop=“loop” autoplay=“autoplay” >





”control” class=“”>loading



class=“progressBar”>
    class=“progressBac”>

  

    class=“speed” id=“speed”>

  

    class=“drag” id=“drag”>

  

  

  

  

  

”time”>class=“tiemDetail”>class=“currentTime” id=“currentTime”>00:00/class=“allTime” id=“allTime”>00:00

  

  

  

”songInfo”>没时间-Leinovclass=“shareImg”>“img/html5audio.jpg” alt=“”>

  

  

”js/zepto.js”>  

  

  

    
    
    
    
    



    

html5 audio 音频播放demo








loading




    

    

    





00:00/00:00


没时间-Leinov