博客

主要是做快进、后退、歌曲切换以及音量调节，歌词只弄了一首歌的歌词。

1. 播放暂停
   

在css里面设置的背景图片，利用音频的play、pause属性控制播放暂停，在改变样式就可以。

<div id="mainControl" class="mainControl"></div>
<div id="stopControl" class="stopControl" style="display:none"></div>

//获取标签
let mainControl = document.querySelector("#mainControl");//开始
let stopControl = document.querySelector("#stopControl");//暂停
//播放
    mainControl.onclick=function(){
        myAudio.play();
        //播放按钮隐藏，暂停按钮出现
        mainControl.style.display = "none";
        stopControl.style.display = "block";
        timeSpan();
    }
    //暂停
    stopControl.onclick=function(){
        myAudio.pause();
        //播放按钮隐藏，暂停按钮出现
        mainControl.style.display = "block";
        stopControl.style.display = "none";
    }

2. 快进、后退
   

currentTime获取当前的时间，在当前的时间上进行-=或者+=

<div class="leftControl"></div>
<div class="rightControl"></div>

let leftControl = document.querySelector(".leftControl");//后退
let rightControl = document.querySelector(".rightControl");//快进
//后退30s
    leftControl.onclick = function(){
        myAudio.currentTime -= 30;
    }
    //前进30s
    rightControl.onclick = function(){
        myAudio.currentTime += 30;
    }

3. 音量控制
   

写一个rang的input框，可以通过滑动来控制音量的大小。把inpu的value值赋给audio的volume。

<div class="voiceFull"><img src="./images/声音.png"></div>
<input type="range" min="0" max="1" step="0.1" class="voidProcess" id="Volume" onclick="setVolume()"/>

let Volume = document.getElementById("Volume");//音量
 //音量调节
    function setVolume() {
        myAudio.volume = Volume.value;
    }

4. 进度条、时间跟着动
   

 <div class="processControl" >
    <div id="songTime" class="songTime">00:00&nbsp;|&nbsp;00:00</div>
    <div id="process" style="width:350px" class="process" ></div>
    <div id="processYet" class="processYet"></div>
</div>

  let songTime = document.querySelector("#songTime");//音乐时间
  let process = document.querySelector("#process");//进度条
  let processYet = document.querySelector("#processYet");//走动进度条
 //时间更新
    function timeDispose(time){
        let mm = parseInt(time/60);
        let ss = parseInt(time%60);
        mm = mm>=10?mm:'0'+mm;
        ss = ss>=10?ss:'0'+ss;
        return mm + ":" + ss;
    }
function timeSpan(){
        setInterval(function(){
            //时间走动
            songTime.innerHTML = timeDispose(myAudio.currentTime)+"|"+timeDispose(myAudio.duration);
            //求音乐进度条长度，去掉px
            let processWidth = process.style.width.split("px")[0];
            //进度条走动
            processYet.style.width = (myAudio.currentTime/myAudio.duration)*processWidth+"px";
        },1000)
}

5. 播放上一曲、下一曲
   

我是弄了两个图片来点击。

写一个歌曲、歌手、歌名的数组，当是第一首歌的时候，计算length – 1，就变成了她的后一个，也就是下一首歌，此时，audio的src变成了相应的地址，再play一下就可以。

<div id="songName" class="songName">爱要坦荡荡</div>
<div class="songAuther">潇潇</div>
<div class="lastMusic" id="lastMusic"></div>
<div class="nextMusic" id="nextMusic"></div>

var musicsrc = ['./music/爱要坦荡荡.mp3','./music/偷偷的爱.mp3','./music/感恩的心.mp3'];
let songName = document.querySelector("#songName");//歌名
let songAuther = document.querySelector(".songAuther");//歌手名字
let titleList = new Array("爱要坦荡荡", "偷偷的爱", "感恩的心");
let AutherList = new Array("潇潇", "严爵/丁当", "欧阳菲菲");
let lastMusic = document.getElementById("lastMusic");//上一首
let nextMusic = document.getElementById("nextMusic");//下一首
 // 下一首歌
    nextMusic.onclick=function (){
        if (i == 0)
            i = musicsrc.length - 1;
        else
            i--;
        myAudio.pause();
        myAudio.src = musicsrc[i];
        songName.innerHTML = titleList[i];
        songAuther.innerHTML = AutherList[i];
        myAudio.play();
    }
    //上一首歌
    lastMusic.onclick=function (){
        if (i == musicsrc.length - 1){
            i = 0;
        }else{
            i++;
            myAudio.pause();
            myAudio.src = musicsrc[i];
            songName.innerHTML = titleList[i];
            songAuther.innerHTML = AutherList[i];
            myAudio.play();
        }
    }

6. 制作播放列表
   

制作一个音乐列表。

外面的for循坏实现，可以点击列表的次数。

里面的点击事件，如果li[i]标签的class为play，那些就切换到i的src。

<div id="playList" class="playList">
     <ul class="mList">
           <p class="play">爱要坦荡荡</p>
           <p>偷偷的爱</p>
           <p>感恩的心</p>
     </ul>
</div>

//点击列表播放
    let li= document.getElementsByTagName("p");
    for (i = 0; i < li.length; i++) {
        li[i].onclick = function () {
            for (var i = 0; i < li.length; i++) {
                if (this == li[i]) {
                    li[i].className = 'play';
                    myAudio.src = musicsrc[i];
                    songName.innerHTML = titleList[i];
                    songAuther.innerHTML = AutherList[i];
                    myAudio.play();
                } else {
                    li[i].className = '';
                }
            }
        }
    }

7. 滚动歌词
   

找到带有时间的歌词，然后对歌词进行切割。

用createElement进行li标签的增加。

对某句歌词进行着重处理，算出相应的高度。

😖还有点没弄懂！还要再琢磨一下子

<div class="container">
      <ul class="wordList">
      </ul>
</div>

let container = document.querySelector(".container");//歌词
let wordList = document.querySelector(".wordList");//歌词
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 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() {   //增加歌词li标签
    for (let index = 0; index < lrcArray.length; index++) {
        var li = document.createElement("li");
        li.innerText = lrcArray[index].words;
        wordList.appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
        return;
    }
    var lrc_li_height = 60, lrc_ul_height = 220;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
        top = 0;
    }
    wordList.style.marginTop = -top + "px";
    var activeLi = wordList.querySelector(".active");
    if(activeLi){
        activeLi.classList.remove("active");
    }
    wordList.children[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = myAudio.currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}
myAudio.ontimeupdate = setPosition;