jquery write audio playback

I own a small demo, the main advantage jquery, H5 of <audio> tag to generate audio playback, change audio style, feeling ugly, one of the icons from font-awesome

 

The main function is to click play, fast forward, etc., do not download, but would like to add on is very simple, you can add a click event.

html + css Code: positioning the main use 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>

 

The following code by cyclic generate labels, a plurality of audio can be added,

        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);
        }

　　When the following code, when you click play, start playing, and click on another player, all audio to stop playing, then start it playing against the string. Progress bar (long (total length of the progress bar / audio total) * time point of currently playing) is obtained by calculating the progress of, by writing a cycle timer. Click the same again, stop playing

        var Time; // global, save recurring events 
        // Click event: 
        function onPlay (This) {
             var the above mentioned id = $ (This) .attr ( 'uname') // audio Id 
            var allTime = $ (This) .attr ( 'time') // long audio 
            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);
            }
        }

The time format converted to the 00:00 format,

        //时间格式：
        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;
        }

Finally, moving the progress bar, click the trigger under the first onmousedown mouse, then move mousemove been triggered, (the mouse focus to the distance from the screen - that point to the distance from the screen). Is the distance it needs to move even calculate its representatives currently playing point in time. Mouse up, not as a delete event.

        // progress bar move 
        function the onMove (obj) {
             var Event Event = || the window.event;
             var bar = $ (obj) .attr ( 'moveId') // ID of the video 
            var allTime = $ (obj) .attr ( 'time'); // long video 
            var currentTime = ''; // current playback time point of the video 
            var leftVal = event.clientX - obj.offsetLeft
             var barleft; 
            document.onmousemove = function (Event) {
                 var Event Event = || the window.event; 
                barleft = event.clientX - leftVal;// moving distance 
                IF (barleft <0 ) { 
                    barleft = 0 ; 
                } the 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; // current time movement distance represented 
                $ ( 'currentTime-.' + bar ).text(getTime(currentTime));//Write the current time stamp 
                var Audio = $ ( '#' + bar) [0 ]; 
                audio.currentTime = currentTime; // is clicked, the current playing time 
            } 
            document.onmouseup = function () { // mouse lit, as can 
                document.onmousemove = null ; 
            } 
        }

 The current demo, in fact, can be simplified. Found errors, dynamically generated div, id attribute has two identical #myaudio, the need to change.