JavaScript小练习（四）简易音乐播放器

最新推荐文章于 2021-09-05 17:03:18 发布

加油学前端

最新推荐文章于 2021-09-05 17:03:18 发布

阅读量128

点赞数

分类专栏：笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45851902/article/details/115658939

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、实现目标

1.进度条：
（1）进度条样式
（2）随音乐播放进度条相应加载
2.播放和暂停按钮
（1）点击播放按钮，音乐播放，按钮样式即时改变
（2）点击暂停按钮，音乐停止，按钮样式即时改变
3.音乐播放时间显示
随音乐播放进行加载
二、效果图
静态（先把表面工作做好）
在这里插入图片描述
动态：

三、代码
html

<body>
    <div id="container">
        <div id="info">
            <span id="title">
                <h2>七里香</h2>
                <p>周杰伦</p>
            </span>
            <span id="album">
                <img src="img/qlx.png" alt="">
            </span>
        </div>
        <div id="music_progress">
            <div id="music_slide">
                <audio id="on_music" src="music/七里香 - 周杰伦.mp3"></audio>
            </div>
            <div id="music_progress_change"></div>
        </div>
        <div id="btns">
            <ul>
                <li style="text-align: center; line-height: 80px;">
                    时间显示
                </li>
                <li>
                    <img class="switch" src="img/last.png" alt="" title="上一首">
                </li>
                <li>
                    <img id="on" src="img/on.png" alt="" title="播放">
                </li>
                <li>
                    <img class="switch" src="img/next.png" alt="" title="下一首">
                </li>
                <li>

                </li>
            </ul>
        </div>
    </div>
</body>

css

       *{ margin: 0px; padding: 0px; list-style: none;}
        body{ background-color: #99CC99;}
        #container{ width: 800px; height: 600px; margin: 80px auto;/* background-color: blue;*/}
        #info{ width: 100%; height: 400px; margin: 20px auto; /*background-color: blueviolet; */position: relative;}
        #info span{ position: absolute; display: block; float: left;}
        #title{ width: 100%; height: 70px; /*background-color: cornflowerblue;*/}
        #title h2{ width: 100%; height: 30px; line-height: 30px; text-align: center; /*background-color: darkcyan;*/ color: white;}
        #title p{ width: 100px; height: 20px; line-height: 20px; text-align: center; margin: 10px auto;/* background-color: darkolivegreen; */color: white;}
        #album{ width: 100%; height: 330px; top: 70px; /*background-color: cornsilk;*/ position: absolute;}
        #album img{ width: 265px; height: 300px; /*background-color: darksalmon; */left: 267px; margin-top: 15px; position: absolute;}
        #music_progress{ width: 600px; height: 8px; margin: 20px auto; background-color: #CCCCCC; border-radius: 5px;}
        #music_slide{ width: 10px; height: 100%; background-color: #FFCC99; border-radius: 5px; float: left;}
        #music_progress_change{ width: 6px; height: 8px; float: left; position: absolute; margin-left: 10px; background-color: whitesmoke; border-radius: 5px;}
        #btns{ width: 100%; height: 152px; /*background-color: chocolate;*/ position: relative;}
        #btns ul{ width: 600px; height: 120px; margin-left: 104px;/* background-color: darkturquoise;*/}
        #btns ul li{ width: 100px; height: 100px; line-height: 100px;/* background-color: deeppink;*/ float: left; margin-left: 10px; color: white;}
        #btns ul li img{ width: 50px; height: 50px; margin-left: 52px;}
        #btns ul li .switch{ width: 30px; height: 30px;}

html+css的框架图（本来是三个按钮，后面的li后来改成了5个，添上了时间—）
在这里插入图片描述 js

window.onload = function(){
            var oPrc = document.getElementById('music_progress');
            var oSlide = document.getElementById('music_slide');
            var oMusic = document.getElementById('on_music');
            var oPlay = document.getElementById('on');
            var oPrcChange = document.getElementById('music_progress_change');
            var oBtns = document.getElementById('btns');
            var aBtns = oBtns.getElementsByTagName('li');

            var timer = null;
            var totalTime = oPrc.offsetWidth;  //进度条总长度
            var slideTime = oSlide.offsetWidth;  //进度条滑动部分的长度
            var music_total = oMusic.duration;  //音乐总时间（秒为单位）
            var music_total_set = setTime(music_total); //时间格式化（mm:ss)
            var music_current = 0; //播放进度
            
            aBtns[0].innerHTML = `00:00/${music_total_set}`;
            var count = 0;
            //点击播放按钮
            oPlay.onclick = function(){
                clearInterval(timer);
                timer = setInterval(setTimer, 1000);
                //播放按钮和暂停按钮的转换
                if(count%2 == 0){
                    this.src = 'img/pause.png';
                    this.setAttribute('title', '暂停');
                    oMusic.play(); //音乐播放
                    
                }else{
                    this.src = 'img/on.png';
                    this.setAttribute('title', '播放');
                    oMusic.pause(); //音乐暂停
                    clearInterval(timer); //定时器停止，进度条不再继续增加
                }
                count++; 
                
                
                
            }

            //进度条定时器
            function setTimer(){
                slideTime += totalTime/music_total; 
                //进度条边界
                if(slideTime >= totalTime){
                    clearInterval(timer);
                    slideTime = totalTime - 6;
                }
                
                music_current++;
                //时间边界
                if(music_current >= music_total){
                    clearInterval(timer);
                }
                var music_current_set = setTime(music_current);
                // console.log(music_current_set);
                aBtns[0].innerHTML = `${music_current_set}/${music_total_set}`;
                oSlide.style.width = slideTime + 'px';
                oPrcChange.style.left = slideTime + 450 + 'px';
                //console.log(oSlide.style.width);
            }

            //时间格式化（mm:ss）
            function setTime(time){
                var min;
                var sec;

                min = Math.floor(time / 60);
                sec = Math.floor(time % 60);

                if(min < 10){
                    min = '0' + min;
                }
                if(sec < 10){
                    sec = '0' + sec;
                }

                return `${min}:${sec}`;
            }
        }

总结：

这次只做了很简易的一个播放功能，进度条的拖动和音量播放在后面的学习中慢慢完善。这次重点说audio的方法：

（1）oMusic.duration获取音乐总时长
（2）音乐当前播放本可以用oMusic.currentTime,可是在赋值时出了一点问题，感觉不太好解决，就直接定义了一个当前播放时间的变量music_current，随定时器时间增加而增加（一个笨办法）

（欢迎提出建议~）

加油学前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小练习（四）简易音乐播放器

一、实现目标1.进度条：（1）进度条样式（2）随音乐播放进度条相应加载2.播放和暂停按钮（1）点击播放按钮，音乐播放，按钮样式即时改变（2）点击暂停按钮，音乐停止，按钮样式即时改变3.音乐播放时间显示随音乐播放进行加载二、效果图静态（先把表面工作做好）动态：三、代码html<body> <div id="container"> <div id="info"> <span id="titl
复制链接

扫一扫