可控制进度的音频播放器

功能

1. 上一曲下一曲
2. 显示进度与时间
3. 能够快进和后退
4. 调节音量大小
5. 实际情况样式需求可调
6. 后期可能补充歌词功能

实现

HTML

    
    
    
    
    
    



    

        

            

                

                    

                    

                        
在线听宪法
                        
科大讯飞提供语音合成
                        

                            

                        
                        
00:00
                        
36:12
                    
                
            
            

                

                    

                    

                        
在线听宪法
                        
科大讯飞提供语音合成
                        

                            

                        
                        
00:00
                        
36:12
                    
                
            
        
        
        

            
1 / 3
            分享
            

            

        
    

//兼容移动端处理rem的js


//下文中的js

css(实际用less写，抛弃传统的css写法)

html {
    font-size: 100px;
    width: 100%;
    height: 100%;
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}
body {
    width: 100%;
    height: 100%;
    max-width: 640px;
    background: #fff no-repeat;
    overflow: hidden;
    font-size: .28rem;
    position: relative;
    top: 0;
    left: 0;
}
.pages {
    width: 100%;
    height: 100%;
    position: relative;
}
.pages .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.pages .swiper-wrapper {
    position: relative;
}
.pages .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    font-size: 18px;
    background: #ffeec6;
}
.pages .topBtn {
    display: block;
    width: 4.6rem;
    height: 1.4rem;
    padding: .05rem .25rem;
    padding-bottom: 0;
    margin: .2rem auto;
    background: #fcfcfc;
}
.pages .voice {
    width: .82rem;
    height: .82rem;
    float: left;
    background: url("../images/pause_03.png") no-repeat;
    background-size: 100%;
    margin-top: .1rem;
}
.pages .progressWrap {
    float: left;
    font-size: .2rem;
    color: #b3b3b3;
    width: 3.4rem;
    margin: .1rem;
    position: relative;
}
.pages .progressWrap p:nth-of-type(1) {
    font-size: .26rem;
    line-height: .26rem;
    color: #b12e29;
}
.pages .progressWrap p:nth-of-type(2) {
    font-size: .2rem;
    margin-top: .1rem;
    line-height: .2rem;
    margin-bottom: .1rem;
    color: #666666;
}
.pages .progressWrap .current {
    position: absolute;
    width: .7rem;
    margin-top: .14rem;
    text-align: center;
    overflow: hidden;
    color: #666666;
}
.pages .progressWrap .progress {
    width: 3.4rem;
    height: .06rem;
    vertical-align: middle;
    display: inline-block;
    border-radius: .03rem;
    background: #efefef;
    position: relative;
}
.pages .progressWrap .progress .bar {
    content: "";
    display: block;
    width: .06rem;
    height: .3rem;
    background: #b12e29;
    position: absolute;
    top: -0.1rem;
}
.pages .progressWrap .duration {
    position: absolute;
    color: #666666;
    right: 0;
    top: .26rem;
    margin-top: .7rem;
    text-align: center;
}
.pages .listsHide {
    position: absolute;
    right: -6.4rem;
    transition: all .5s linear;
}
.butBtn {
    width: 100%;
    height: 1rem;
    position: absolute;
    z-index: 9;
    bottom: 0;
    background: rgba(255,238,198,.8);
    -webkit-tap-highlight-color: transparent;
    -webkit-box-shadow: 20px -20px 30px #ffeec6;
    box-shadow: 20px -20px 30px #ffeec6;
}
.getPoster {
    display: block;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    width: 2.4rem;
    font-size: .28rem;
    border: none;
    border-radius: .25rem;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
    margin: 0 auto;
    margin-top: .25rem;
    margin-left: 2.5rem;
    background: #333;
    background-size: 100%;
    background: #b12e29;
}
.swiper-pagination {
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    font-size: .28rem;
    color: #d9000e;
    margin-left: 1rem;
    bottom: 0;
}
.swiper-button-prev {
    width: .52rem;
    height: .52rem;
    background: url("../images/footBtn.png") no-repeat;
    background-size: 100%;
    margin-top: -0.28rem;
}
.swiper-button-prev:hover,
.swiper-button-prev:active {
    background: url("../images/footBtn.png") no-repeat;
    background-size: 100%;
}
.swiper-button-next {
    width: .52rem;
    height: .52rem;
    background: url("../images/footBtn_05.png") no-repeat;
    background-size: 100%;
    margin-top: -0.28rem;
}
.swiper-button-next:hover,
.swiper-button-next:active {
    background: url("../images/footBtn_05.png") no-repeat;
    background-size: 100%;
}

js（定义类）

//初始化swiper
var voiceList = ['0.mp3','1.mp3', '2.mp3', '3.mp3',"4.mp3","5.mp3","6.mp3","7.mp3","8.mp3","9.mp3","10.mp3","11.mp3"];
function swiperInit() {
    var mySwiper=new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationType: 'fraction',
        touchAngle : 25,//触发水平角
        touchMoveStopPropagation : false,//阻止touchmove冒泡事件
        threshold : 80,//触发最小距离
        //onlyExternal : true,
        onSlideChangeEnd: changeCallback,
    });
    return mySwiper

}
swiperInit();
//换页回调
function changeCallback() {
    if (myAudio.audio) {
        myAudio.audioInit()
        myAudio.audioProgressContral()
    }
}

function DefinedAudio(voiceList,progressRemW){
    this.voiceList=voiceList;//歌曲列表
    this.timer='';//计时器
    this.ProgressW=progressRemW*document.documentElement.clientWidth/640*100;//进度条长度
    var that=this;
    this.init=(function(){
        that.createAudio();
        that.audioInit();
        that.play();
        that.audioProgressContral();
    })();
}
//创建audio标签
DefinedAudio.prototype.createAudio=function(){//创建audio
    this.audio = document.createElement('audio');
    document.body.appendChild(this.audio);
}
//初始audio
DefinedAudio.prototype.audioInit=function(){//初始化
    var that=this;
    this.audio.pause();
    $('.voice').css('background-image','url(../images/pause_03.png)')
    $('.bar').css('left', 0);
    clearInterval(this.timer);
    $('.current').html('00:00');
    var curIndex = $('.swiper-pagination-current').html() - 1;
    this.audio.src = 'http://microblog.people.com.cn/htmlfile/xfAudio/' + this.voiceList[curIndex]+'?'+Math.random();
    var ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {//苹果设备预加载
        this.audio.play()
        this.audio.addEventListener('canplay', function () {
            that.audio.pause();
            var time = that.timeFormat(that.audio.duration);
            $('.duration').html(time);
        }, false);
    } else {
        this.audio.addEventListener('canplay', function () {
            var time = that.timeFormat(that.audio.duration);
            $('.duration').html(time);
        }, false)
    }
}
//时间格式换
DefinedAudio.prototype.timeFormat=function (time) {
    var min = Math.floor(time / 60);
    var sec = Math.floor(time % 60);
    min = min < 10 ? "0" + min : "" + min;
    sec = sec < 10 ? "0" + sec : "" + sec;
    return min + ":" + sec;
}
//手动控制音频进度
DefinedAudio.prototype.audioProgressContral=function (){
    var that=this;
    var bar= $('.bar')[$('.swiper-pagination-current').html()-1];
    bar.addEventListener('touchstart',start,false);
    bar.addEventListener('touchmove',move,false)
    bar.addEventListener('touchend',end,false)
    function start(e){
        that.audio.L=$('.bar').css('left');
        that.audio.X=e.touches[0].clientX
        if(that.audio.paused){
            that.audio.ProgressFlag=1;
        }else{
            that.audio.ProgressFlag=0;
        }
        return false;
    }
    function move(e){
        that.audio.changeX=e.changedTouches[0].clientX-that.audio.X;
        that.audio.changeX=that.audio.changeX+parseFloat(that.audio.L)
        that.audio.endX=that.audio.changeX<0?0:(that.audio.changeX>that.ProgressW?that.ProgressW:that.audio.changeX)
        $('.bar').css('left',that.audio.endX);
        that.audio.currentTime=that.audio.endX/that.ProgressW*that.audio.duration;
        var time = that.timeFormat(that.audio.currentTime);
        $('.current').html(time);
        return false;
    }
    function end(e){
        if(that.audio.ProgressFlag!==1){
            that.audio.play();
        }else{
            that.audio.pause();
        }
        return false;
    }
}
//播放与暂停
DefinedAudio.prototype.play=function () {
    var that=this;
    clearInterval(this.timer);
    if (this.audio.paused) {
        this.audio.play();
        $('.voice').css('background-image','url(../images/play_03.png)')
    } else {
        this.audio.pause();
        $('.voice').css('background-image','url(../images/pause_03.png)')
        clearInterval(this.timer);
        return;
    }
    //进度条
    progress()
    this.timer = setInterval(progress, 1000);
    function progress() {
        if (that.audio.currentTime > that.audio.duration) {
            clearInterval(that.timer);
        }
        var time = that.timeFormat(that.audio.currentTime);
        $('.current').html(time);
        var $bar = $('.bar');
        $bar.css('left', that.audio.currentTime / that.audio.duration * 100 + "%");
    }
}
//控制音量(volume 属性设置或返回音频的音量，从 0.0 (静音) 到 1.0 (最大声)。)
DefinedAudio.prototype.vol=function(n){
    this.volume = n;
}
//实例
var myAudio=new DefinedAudio(voiceList,'3.4');
$('.voice').on('click',function(){
    myAudio.play();
})