用js实现一个简单的音乐播放器

课堂作业记录，js部分我真的有点写不来hhh，有参考

效果图：

实现了音乐器的简单功能，播放暂停，快进后退，音量加减，进度条的显示，以及歌词滚动等功能

1、播放暂停

mainControl.onclick = function () {
    mysong.play();
    //暂停按钮隐藏，播放按钮出现
    mainControl.style.display = "none";
    stopControl.style.display = "block";
    setInterval(timeSpan, 1000);
  };

  stopControl.onclick = function () {
    mysong.pause();
    //播放按钮隐藏，暂停按钮出现
    stopControl.style.display = "none";
    mainControl.style.display = "block";
  };

 2、快进后退

  //后退
  leftControl.onclick = function () {
    mysong.currentTime -= 30;
  };
  //前进
  rightControl.onclick = function () {
    mysong.currentTime += 30;
  };

3、控制音量

function timeDispose(time) {
    let mm = parseInt(time / 60);
    let ss = parseInt(time % 60);
    return mm + ":" + ss;
  }

4、进度条的显示

 //进度条更新
  function timeSpan() {
    songTime.innerHTML =
      timeDispose(mysong.currentTime) +
      " |&nbsp" +
      timeDispose(mysong.duration);
    let process = document.querySelector("#process");
    let processYet = document.querySelector("#processYet");
    let processWidth = process.style.width.split("px")[0];
    //求音乐进度条的长度
    processYet.style.width =
      (mysong.currentTime / mysong.duration) * processWidth + "px";
  }

5、时间更新

//时间更新
  function timeDispose(time) {
    let mm = parseInt(time / 60);
    let ss = parseInt(time % 60);
    return mm + ":" + ss;
  }

6、歌词滚动

歌词直接去网站搜索提取，这个网站可以

萧萧_爱要坦荡荡LRC动态歌词下载 - 一听音乐网 (1ting.com)

歌词滚动完整代码如下：

//歌词滚动
var lrc = ` [00:00.000] 作词 : 许常德
[00:00.017] 作曲 : Rungroth Pholwa
[00:00.34]Da La La La…
[00:17.04]天色是有点暗
[00:18.81]气氛是有点蓝
[00:20.81]皎洁的月光显得特别亮
[00:24.59]对白是很简单
[00:26.63]像是精致装扮
[00:28.29]显得通俗不堪
[00:32.39]你不必太紧张
[00:34.29]诚实会有点难
[00:36.25]也许完美对我反而是假象
[00:40.15]过去我不想谈
[00:42.10]有缺憾也无妨
[00:43.83]我要你的自然
[00:47.67]爱要坦荡荡
[00:51.03]不要装模作样到天长
[00:55.38]要你很善良
[00:58.70]就算对我说谎也温暖
[01:03.06]请你坦荡荡
[01:06.46]世上没有满分的浪漫
[01:10.88]人们口中说的誓言
[01:13.68]真实的可怜
[01:15.50]你难道没有被爱背叛的绝望
[01:19.17]你不必太紧张
[01:20.77]诚实会有点难
[01:22.69]也许完美对我反而是假象
[01:26.50]过去我不想谈
[01:28.60]有缺憾也无妨
[01:30.26]我要你的自然
[01:34.41]Da La La La…
[02:05.16]爱要坦荡荡
[02:08.40]不要装模作样到天长
[02:12.75]要你很善良
[02:16.17]就算对我说谎也温暖
[02:20.47]请你坦荡荡
[02:23.94]世上没有满分的浪漫
[02:28.26]人们口中说的誓言
[02:30.93]真实的可怜
[02:32.85]你难道没有被爱背叛的绝望
[02:36.44]你不必太紧张
[02:38.21]诚实会有点难
[02:40.17]也许完美对我反而是假象
[02:43.99]过去我不想谈
[02:45.95]有缺憾也无妨
[02:47.72]我要你的自然
[02:51.86]Da La La La…
`;

function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便

function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
        parts[index] = getLrcObj(parts[index]);
    }
    return parts;

    function getLrcObj(content) {
        var twoParts = content.split("]");
        var time = twoParts[0].substr(1);
        var timeParts = time.split(":");
        var seconds = +timeParts[1];
        var min = +timeParts[0];
        seconds = min * 60 + seconds;
        var words = twoParts[1];
        return{
            seconds: seconds,
            words: words,
        };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
        var li = document.createElement("li");
        li.innerText = lrcArray[index].words;
        $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
        return;
    }
    var lrc_li_height = 35, lrc_ul_height = 450;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
        top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
        activeLi.classList.remove("active");
    }
    $("ullrc").children[index].classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;

}

拆分一下：

获取时间和歌词

var lrc = `
这里是歌词
`;
var parts=lrc.split("\n");

function getLrcArray() {
    //分割每一列
    var parts = lrc.split("\n");
    //遍历分割每一句
    for (let index = 0; index < parts.length; index++) {
        parts[index] = getLrcObj(parts[index]);
    }
    return parts;

    function getLrcObj(content) {
        //把一句分割为俩部分
        var twoParts = content.split("]");
       
        var time = twoParts[0].substr(1);//将时间前的"["截掉
        var timeParts = time.split(":");//用秒处理比较翻版我们这里这里转换成秒
        var seconds = +timeParts[1];
        var min = +timeParts[0];
        seconds = min * 60 + seconds;
        //歌词获取
        var words = twoParts[1];
        return{//返回秒和歌词
            seconds: seconds,
            words: words,
        };
    }
}

var lrcArray = getLrcArray();//结果存储在这里

歌词位置滚动

用margin-top: -height;来实现

写一个active样式

function setPosition() {
    var index = getLrcIndex();
    var lrc_li_height = 35, lrc_ul_height = 450;//定义行高和歌词box高度
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;//计算
    if (top < 0) {
        top = 0;//如果top为负说明歌词在开始几句,无需滚动,top归零
    }
    $("ullrc").style.marginTop = -top + "px";//改变mt
    var activeLi = $("ullrc").querySelector(".active");//寻找ul下类名为active的元素并返回之
    if(activeLi){
        activeLi.classList.remove("active");//删
    }
    $("ullrc").children[index].classList.add("active");//添
}

歌词行数的获取

这里比较播放时间，出现的播放时间小于数组的播放时间就输出 index-1

function getLrcIndex(){
    var time = $("MusicPlayer").currentTime;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}