<audio> 標簽定義聲音，比如音樂或其他音頻流。html5 audio可以不用Flash插件就可以聽音樂看視頻，並不是全部的瀏覽器都支持此標簽。
audio不支持style調整，要想有一個漂亮的播放器，只能用JS控制
1.audio的語法以及屬性和方法
<audio src="音頻地址" controls="controls" loop="loop" autoplay="autoplay">您的瀏覽器不支持html5的audio標簽</audio>
controls="controls"如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop="loop"播放次數，如果出現該屬性，則每當音頻結束時重新開始播放。
autoplay="autoplay"如果出現該屬性，則音頻在就緒后馬上播放。
preload="preload"如果出現該屬性，則音頻在頁面加載時進行加載，並預備播放。如果使用 "autoplay"，則忽略該屬性。
audio不單單是個標簽 他也是window下的一個對象，對象就有屬性和方法
對象屬性：
currentTime 獲取當前播放時間
duration 獲取歌曲的總時間
play 是否在播放 返回true/false
pause 是否暫停 返回true/false
對象方法：
play() 播放歌曲
pause() 暫停歌曲
load()重新加載歌曲
2.audio的一些事件
play 播放事件 可判斷歌曲是否正在播放中
pause 暫停事件 判斷歌曲是否暫停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（這些事件在加載過程中是按以上順序觸發的）
以上這些事件可以通過事件監聽對其做相應處理
3.完整的html5 audio音頻播放頁面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> <link rel="shortcut icon" href="img/logo.png"> <title>html5 audio音頻播放</title> <style> *{ margin: 0; padding:0;} body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微軟雅黑"} h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; } #audio{ width: 100%;} #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;} .color_gray{ background: #e4e4e4} .hide{ display: none;} .show{ display: block;} .play{ background: #f06060;} .pause{ background:skyblue} /*進度條樣式*/ .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;} .progressBar div{ position: absolute;} .progressBar .progressBac{ width: 100%; height: 10px; left: 0; top:0; background: #e4e4e4;} .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; } .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px; background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;} /*時間樣式*/ #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;} .tiemDetail{ position: absolute; right:10px; top:0;} #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;} .shareImg{ position: absolute; left: 100000px;} </style> <script src="js/jquery.min.js"></script> </head> <body> <script> $(function() { getSong(); }) //獲取歌曲鏈接並插入dom中 function getSong() { var audio = document.getElementById("audio"); audio.src = "http://frontman.qiniudn.com/songnotime.mp3"; audio.loop = true; //歌曲循環 playCotrol(); //播放控制函數 } //點擊播放/暫停 function clicks() { var audio = document.getElementById("audio"); $("#control").click(function() { if ($("#control").hasClass("play")) { $("#control").addClass("pause").removeClass("play"); audio.play();//開始播放 dragMove();//並且滾動條開始滑動 $("#control").html("暫停播放"); } else { $("#control").addClass("play").removeClass("pause"); $("#control").html("點擊播放"); audio.pause(); } }) } //播放時間 function timeChange(time, timePlace) {//默認獲取的時間是時間戳改成我們常見的時間格式 var timePlace = document.getElementById(timePlace); //分鍾 var minute = time / 60; var minutes = parseInt(minute); if (minutes < 10) { minutes = "0" + minutes; } //秒 var second = time % 60; seconds = parseInt(second); if (seconds < 10) { seconds = "0" + seconds; } var allTime = "" + minutes + "" + ":" + "" + seconds + "" timePlace.innerHTML = allTime; } //播放事件監聽 function playCotrol() { audio.addEventListener("loadeddata", //歌曲一經完整的加載完畢( 也可以寫成上面提到的那些事件類型) function() { $("#control").addClass("play").removeClass("color_gray"); $("#control").html("點擊播放"); addListenTouch(); //歌曲加載之后才可以拖動進度條 var allTime = audio.duration; timeChange(allTime, "allTime"); setInterval(function() { var currentTime = audio.currentTime; $("#time .currentTime").html(timeChange(currentTime, "currentTime")); }, 1000); clicks(); }, false); audio.addEventListener("pause", function() { //監聽暫停 $("#control").addClass("play").removeClass("pause"); $("#control").html("點擊播放"); if (audio.currentTime == audio.duration) { audio.stop(); audio.currentTime = 0; } }, false); audio.addEventListener("play", function() { //監聽暫停 $("#control").addClass("pause").removeClass("play"); $("#control").html("暫停播放"); dragMove(); }, false); audio.addEventListener("ended", function() { alert(0) }, false) } //進度條 //這里我用的是事件實現進度拖動 如果不太熟悉touch的可以看下我之前寫的一個小demo http://www.cnblogs.com/leinov/p/3701951.html var startX, x, aboveX = 0; //觸摸時的坐標 //滑動的距離 //設一個全局變量記錄上一次內部塊滑動的位置 //1拖動監聽touch事件 function addListenTouch() { document.getElementById("drag").addEventListener("touchstart", touchStart, false); document.getElementById("drag").addEventListener("touchmove", touchMove, false); document.getElementById("drag").addEventListener("touchend", touchEnd, false); var drag = document.getElementById("drag"); var speed = document.getElementById("speed"); } //touchstart,touchmove,touchend事件函數 function touchStart(e) { e.preventDefault(); var touch = e.touches[0]; startX = touch.pageX; } function touchMove(e) { //滑動 e.preventDefault(); var touch = e.touches[0]; x = touch.pageX - startX; //滑動的距離 //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式 drag.style.left = aboveX + x + "px"; // speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px"; } function touchEnd(e) { //手指離開屏幕 e.preventDefault(); aboveX = parseInt(drag.style.left); var touch = e.touches[0]; var dragPaddingLeft = drag.style.left; var change = dragPaddingLeft.replace("px", ""); numDragpaddingLeft = parseInt(change); var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖動圓圈的長度，減掉是為了讓歌曲結束的時候不會跑到window以外 audio.currentTime = currentTime; } //3拖動的滑動條前進 function dragMove() { setInterval(function() { drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px"; speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px"; }, 500); } </script> <h1>html5 audio 音頻播放demo</h1> <!--audiostart--> <audio id="audio" src="" loop="loop" autoplay="autoplay" ></audio> <!--audio End--> <!--播放控制按鈕start--> <button id="control" class="">loading</button> <!--播放控制按鈕end--> <!--時間進度條塊兒start--> <section class="progressBar"> <div class="progressBac"></div> <div class="speed" id="speed"></div> <div class="drag" id="drag"></div> </section> <!--時間進度條塊兒end--> <!--播放時間start--> <div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div></div> <!--播放時間end--> <!--歌曲信息start--> <div id="songInfo">沒時間-Leinov<div class="shareImg"><img src="img/html5audio.jpg" alt=""></div></div> <!--歌曲信息end--> </body> </html>
原文地址：http://www.cnblogs.com/leinov/p/3896772.html