如何设计一个网页版音乐播放器

最新推荐文章于 2024-07-31 16:28:13 发布

人生丶短短几个秋

最新推荐文章于 2024-07-31 16:28:13 发布

阅读量7.7k

点赞数 18

分类专栏： Css 文章标签： javascript 音乐

本文链接：https://blog.csdn.net/IUH_VIC/article/details/78076491

版权

本文介绍了如何使用JavaScript设计一个网页音乐播放器，包括音乐的播放、暂停、时长显示、进度调节和音量控制等功能。并提供了主要的JS代码块和HTML结构。

摘要由CSDN通过智能技术生成

样式预览:

music_player

主要功能:

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

主要代码块（Js）：

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

 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)"
            }
        }