H5端歌曲音乐MP3播放器代码

使用方法

var playBtns = document.getElementById('playBtn');
var flag = true ; //判断是否播放歌曲
var presentTime = document.getElementById('audio-this-time'); //当前时长
var totalTime = document.getElementById('audio-count-time'); //歌曲总时长
var audio = document.getElementById('audio'); //播放器
var curProgrees = document.getElementById('audio-cache-setbacks'); //已经播放进度条
var progrees = document.getElementById('progrees'); //播放进度条
var progreesBox = document.getElementById('audio-cache-box');
var animationBox = document.getElementById('animationBox');
//绑定对应事件
playBtns.addEventListener('click',getPlay); //绑定播放和暂停
function getPlay(){
    if(flag){
        playBtns.className = 'play_stop';
        animationBox.classList.add('active')
        audio.play();
        playProgress()
        playTime()
    }else{
        playBtns.className = 'play_icon';
        audio.pause();
        animationBox.classList.remove('active')
    }
    flag = !flag;
}

//停止播放
function stopPlay(){
    flag = false;
    getPlay();
}

//播放时间
function playTime(){
    var time2 = null;
    if(flag){
        time2 = setInterval(function(){
            setTime(audio.duration,totalTime);
            setTime(audio.currentTime,presentTime);
        },1000)
    }else{
        clearInterval(time2)
    }
}

//设置时间
function setTime(audioTime,obj){
    allMinute = Math.floor(audioTime/60);
    if(allMinute < 10){
        allMinute = "0" + allMinute
    }
    allSecond = Math.floor(audioTime%60);
    if(allSecond < 10){
        allSecond = "0" + allSecond;
    }
    var allTime = allMinute + ":" + allSecond;
    obj.innerHTML = allTime;
}

//播放进度条
function  playProgress(){
    let tiems = null;
    if(flag){
        tiems = setInterval(function(){
            if(audio.currentTime >= audio.duration){
                curProgrees.style.width = progrees.offsetWidth + "px";   
                clearInterval(tiems);
                audio.currentTime = 0
                stopPlay();
                
            }else{
                curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px";
                progreesBox.style.left = (audio.currentTime/audio.duration)*progrees.offsetWidth - 10 + "px";
            }
        },30)
    }else{
        clearInterval(tiems);
        
    }
    
}
progrees.addEventListener('mousedown',function(e){
    //判断音乐是否在正常播放
    if(!audio.paused || audio.currentTime != 0){
        let pgsWidth = progrees.offsetWidth;
        let rate = e.offsetX / pgsWidth;
        audio.currentTime = audio.duration * rate;
       
    }

})