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，需要改下。