jquery編寫音頻播放

自己做了一個小demo,主要利用了jquery,H5的<audio>標簽，生成音頻播放，改變了audio的樣式，感覺太丑了，其中的圖標來自font-awesome

 

這次的功能主要是點擊播放，快進等，下載功能還沒做，不過想添加上也很簡單，添加點擊事件即可。

html+css代碼：主要利用position定位

        #myaudio {
            width: 260px;
            height: 30px;
            background-color: #ddebf7;
            border-radius: 4px;
            position: relative;
            margin-bottom: 10px;
            box-shadow: 0 0 4px #a1a5a9;
        }

        .download {
            display: inline-block;
            width: 15px;
            height: 15px;
            position: absolute;
            top: 4px;
            left: 15px;
            font-size: 15px;
            color: #9ca3aa;
            cursor: pointer;
            line-height: 22px;
            margin-right: 8px;
        }

        .open {
            display: inline-block;
            width: 10px;
            height: 15px;
            line-height: 22px;
            margin-right: 8px;
            cursor: pointer;
            color: #2f96f4;
            position: relative;
            top: 4px;
            left: 38px;
        }

        .time {
            width: 72 px;
            height: 15px;
            line-height: 22px;
            margin-right: 8px;
            position: absolute;
            top: 4px;
            left: 57px;
            font-size: 11px;
        }

        .progress {
            float: left;
            width: 104px;
            height: 3px;
            background: #ccc;
            position: absolute;
            top: 14px;
            left: 140px;
        }

        .progress > span:first-child {
            position: absolute;
            left: 0;
            width: 0;
            height: 100%;
            background: #2f96f4;
            display: inline-block;
        }

        .progress >span:last-child {
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #fff;
            top: -11px;
            border-radius: 100%;
            border: 3px solid rgba(0, 0, 0, .4);
            cursor: pointer;
            position: relative;
        }
    </style>

　　

<div id="demo" style="margin-top:10px;"></div>

 

以下代碼，通過循環生成標簽，可添加多個音頻，

        var url = [
            { id: 'mp0', name: 'hello.mp3', time: '301.134' },
            { id: 'mp1', name: 'world.mp3', time: '281.324' }
        ]
        for (var i = 0; i < url.length; i++) {
            var html = '';
            html += '<div id="myaudio" class="' + url[i].id + '">'
            html += '<audio src="' + url[i].name + '" id="' + url[i].id + '"></audio>'
            html += '<span class="download-' + url[i].id + ' download fa fa-download"></span>'
            html += '<span class="open fa fa-play" name="' + url[i].name + '" uname="' + url[i].id + '" time="'+ url[i].time +'" onclick="onPlay(this);return false;"></span>'
            html += '<span class="time">'
            html += '<span class="currentTime-'+ url[i].id +'">00:00</span>/'
            html += '<span class="allTime">' + getTime(url[i].time) + '</span>'
            html += '</span>';
            html += '<div class="progress-'+ url[i].id+' progress" ><span class="bar-'+ url[i].id +'"></span><span class="control-'+ url[i].id +'" moveId="'+ url[i].id +'" time="'+ url[i].time+'"  onmousedown="onMove(this);return false;"></span></div></div>'
            $('#demo').append(html);
        }

　　以下代碼，點擊播放時，開始播放，且點擊另一個播放時，所有音頻先停止播放，再開始它的播放，防止串了。進度條通過計算（（進度條總長/總音頻時長）*當前播放的時間點）獲得進度，通過循環定時器進行寫入。再次點擊相同的，為停止播放

        var time;//全局，保存循環事件
        //點擊事件：
        function onPlay(This) {
            var id = $(This).attr('uname')//音頻的Id
            var allTime = $(This).attr('time')//音頻的時長
            var audio = $('#' + id)[0];
            if (audio.paused) {
                for (var key in url) {
                    var stop = $('#' + url[key].id)[0];
                    stop.pause();
                }
                audio.play();
                time = setInterval(function(){
                    //時間：
                    $('.currentTime-'+id).text(getTime(audio.currentTime))
                    //進度條：
                    var nowWidth = audio.currentTime*(Number($('#myaudio > .progress').width())/allTime);
                    $('.bar-' + id).css('width',nowWidth + 'px');
                    $('.control-' + id).css('left',nowWidth + 'px');
                    //停止時，停止循環
                    if (audio.paused) {
                        clearInterval(time);
                    }
                 },100);
            } else {
                audio.pause();
                clearInterval(time);
            }
        }

將時間格式換算為00:00格式，

        //時間格式：
        function getTime(time){
            var minute = parseInt(time/60);
            if (minute < 10) {
                minute = '0'+minute;
            }
            var second = parseInt(time%60);
            if (second < 10){
                second = '0' + second;
            }
            return minute + ':' +second;
        }

最后是進度條的移動，先是onmousedown鼠標點擊下觸發，然后移動時mousemove一直觸發，（鼠標焦點到屏幕距離-該點到屏幕距離）就是其需要移動的距離.還要計算出其代表的當前播放時間點。鼠標彈起時，不能作為，刪除事件。

        //進度條移動
        function onMove(obj){
            var event = event || window.event;
            var bar = $(obj).attr('moveId')//視頻的ID
            var alltime = $(obj).attr('time');//視頻的時長
            var currentTime = '';//視頻的當前播放時間點
            var leftVal = event.clientX -obj.offsetLeft
            var barleft;
            document.onmousemove = function (event) {
                var event = event || window.event;
                barleft = event.clientX -  leftVal;//移動距離
                if (barleft < 0) {
                    barleft = 0;
                } else if (barleft > $('#myaudio > .progress').width()) {
                    barleft = $('#myaudio > .progress').width();
                }
                $('.bar-' + bar).css('width',barleft + 'px');
                $(obj).css('left',barleft + 'px');
                currentTime = (barleft/Number($("#myaudio > .progress").width()))*alltime;//移動的距離代表的當前時間
                $('.currentTime-' + bar).text(getTime(currentTime));//寫入當前時間標簽
                var audio = $('#' + bar)[0];
                audio.currentTime = currentTime;//點擊時，在當前時間播放
            }
            document.onmouseup = function (){//鼠標點起，不能作為
                document.onmousemove = null;
            }
        }

 目前的demo，其實可以簡化。還發現個錯誤，動態生成的div，擁有兩個相同的id屬性#myaudio，需要改下。