Javascript云音乐系统 js音乐播放器代码

转载

墨韵流香 2023-10-08 08:58:31

文章标签 Javascript云音乐系统进度条 Math ide 文章分类 JavaScript 前端开发

用js写了一个简易的播放器但是还是有点疑问没搞懂

希望看见的大佬 help me

先看代码和效果

Javascript云音乐系统 js音乐播放器代码_进度条

下面的js代码

let play = document.querySelector("#play");//播放 暂停
let audio = document.querySelector("#audio");
let next = document.querySelector(".next");//下一曲
let audioSrc = ["./video/1.mp3", "./video/2.mp3", "./video/3.mp3"]
//创建一个数组保存SRC的地址
let prev = document.querySelector(".prev");//上一曲
let num = 0;//索引
//num来保存索引
let stop = document.querySelector(".stop");//暂停归零
let playerList = document.querySelectorAll("#playerList li");//音乐列表
let curProgrees = document.querySelector("#curProgrees");//进度条
let totalTime = document.querySelector("#totalTime");//总时间
let presentTime = document.querySelector("#presentTime");//当前时间


play.addEventListener("click", thePlay); //为暂停播放按钮绑定点击事件
var flag = true;
next.addEventListener("click", theNext);//为下一曲绑定事件
prev.addEventListener("click", thePrev);//为上一曲绑定事件
stop.addEventListener("click", theStop);//为暂停绑定事件


//暂停 播放  函数
function thePlay() {
    if (flag) {
        play.className = "play2";
        play.title = "暂停";
        audio.play();
    } else {
        play.className = "play1";
        play.title = "播放";
        audio.pause();
    }
    flag = !flag;
    theProgress();//播放时调用进度条函数  让进度条动
    theTime(); //开始播放就调用
}


//下一曲
function theNext() {
    num++;//索引加一才能到下一曲
    if (num > audioSrc.length - 1) { //如果num大于了最后一个地址的索引  改为0  第一个地址
        num = 0;
    }
    audio.src = audioSrc[num];
    flag = true;   //为了调用时自动播放
    thePlay();//调用播放函数  
    theChange();//调用改变列表函数  歌变的时候跟着变 
}

//上一曲
function thePrev() {
    num--;//索引减一才能到上一曲
    if (num < 0) { //如果num大于了最后一个地址的索引  改为0  第一个地址
        num = audioSrc.length - 1;
    }
    audio.src = audioSrc[num];
    flag = true;   //为了调用时自动播放
    thePlay();//调用播放函数  
    theChange();//调用改变列表函数  歌变的时候跟着变  
}

//暂停 归零
function theStop() {
    flag = false;
    thePlay();
    audio.currentTime = 0;  //音频当前播放时间设置为零
}

//改变列表
function theChange() {
    for (let i = 0; i < playerList.length; i++) {
        playerList[i].className = "";
    }
    playerList[num].className = "active";
}

//进度条变化
function theProgress() {
    
    setInterval(function () {
        let allTime = audio.duration;//总音频长度
        let curTime = audio.currentTime;//当前音频长度
        // let allTime = audio.duration;//总长度
        curProgrees.style.width = (curTime / allTime * 550) + "px";
        if (curTime >= allTime) {
            //如果当前时间等于总时间  自动下一首
            theNext();//调用下一首
        }
    }, 30)
}

//时间变化
function theTime() {
    
            
    setInterval(function () {
        //总时长
        let curTime = audio.currentTime;//当前音频长度
        let allTime = audio.duration;//总音频长度
        let allMinute = Math.floor(allTime / 60);//总分钟
        if (allMinute < 10) {
            allMinute = "0" + allMinute;
        }
        let allSecond = Math.floor(allTime % 60);//总秒数
        if (allSecond < 10) {
            allSecond = "0" + allSecond;
        }
        totalTime.innerHTML = allMinute + ":" + allSecond;
        //正在时长
        let curMinute = Math.floor(curTime / 60);//总分钟
        if (curMinute < 10) {
            curMinute = "0" + curMinute;
        }
        let curSecond = Math.floor(curTime % 60);//总秒数
        if (curSecond < 10) {
            curSecond = "0" + curSecond;
        }
        presentTime.innerHTML = curMinute + ":" + curSecond;

    }
        , 30)

}

但是还有点小疑惑
就是这里

Javascript云音乐系统 js音乐播放器代码_Math_02