html5 audio音頻播放全解析

jopen 10年前發布 | 695K 次閱讀 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的語法以及屬性和方法
使用語法
<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.完整的音頻播放頁面

<!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>

</head>
<body>
    <script>
$(function() {
    getSong();
})
//獲取歌曲鏈接并插入dom中
function getSong() { 
    var audio = document.getElementById("audio");
    audio.src = "
}

//點擊播放/暫停
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-->
<script src="js/zepto.js"></script>
</body>
</html></pre> 

來自：http://www.cnblogs.com/leinov/p/3896772.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1407401112973.html

HTML5 前端技術

html5 audio音頻播放全解析

相關經驗

相關資訊

相關文檔

目錄