音乐播放器实战记录

主要功能:

音乐开始播放、暂停
音乐文件总时长、当前播放时长
进度的显示与调节
音量的显示与调节
音乐结束的判断

**

主要代码块（Js）：

**

1.进度条：（进度的调节及显示）

 var music = document.getElementById("music");
 var btn = document.getElementById("play_pause_btn");
 var current_time = document.getElementById("music_time");
 var music_progress =   document.getElementById("music_progress");
  var voice_progress = document.getElementById("voice");
        music.volume = 0.5;
//计时
        function showTime() {
            //返回音乐时长
            var music_time = music.duration;
            var now_time = music.currentTime;
            var minutes = parseInt(music_time / 60);
            var seconds = parseInt(music_time - minutes * 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            //返回播放时长
            var seconds_now = parseInt(now_time % 60);
            var minutes_now = parseInt(now_time / 60);
            seconds_now = seconds_now < 10 ? '0' + seconds_now : seconds_now;
            minutes_now = minutes_now < 10 ? '0' + minutes_now : minutes_now;

            //显示到文本中
            current_time.innerHTML = minutes_now + ":" + seconds_now + "/" + minutes + ":" + seconds;

            //显示到音乐进度条中
            var plan = parseFloat(now_time / music_time);
            var value1 = parseInt(plan * 100);
            music_progress.value=value1;

            if (music.ended) {`在这里插入代码片`
                console.log("end");
                music.currentTime = 0;
                btn.style.transform = "rotate(0deg)";
                clearInterval(timer2);
            }
        }

2.播放按钮：（音乐的播放与暂停）

var deg = 0;
        var timer2;
        //按钮开关
        btn.onclick = function() {
            if (music.paused) {
                music.play();
                timer2 = setInterval(function() {
                    if (deg == 360) { deg = 0; }
                    deg += 5;
                    console.log(deg);
                    btn.style.transform = "rotate(" + deg + "deg)"
                }, 100);
            } else {
                music.pause();
                clearInterval(timer2);
                btn.style.transform = "rotate(" + deg + "deg)"
            }
        }

3.音量调节 :

 music_progress.onclick = function(event) {
            var e = event ? event : window.event;
            console.log(e.pageX);
            var start = 100;
            music.currentTime = (e.pageX - start) * music.duration / 400;
        }

        voice_progress.onclick = function(eevet) {
            var e = event ? event : window.event;
            var start = 600;
            music.volume = (e.pageX - start) / 200;
            this.value = music.volume * 100;
            var voice_tb = document.getElementById("voice_tb");
            voice_tb.innerHTML = "音量：" + this.value + "%";
        }
        //定时器  : 设置时间 / 结束停止计时 / 重新开始
        var timer = setInterval(function() {
            showTime();
        }, 10);