JavaScript制作音乐播放器。实现了进度条拖动。音量大小控制，上一首下一首的切换

袁俊弼

2023-12-01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/music.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/icon.css">
</head>
<body>
<!--音乐播放器-->
<div class="musicPlayer">
    <!--歌曲信息-->
    <div class="musicInfo">
        <!--歌曲图片-->
        <div class="musicImg" id="musicImg">
            <img src="img/1.jpg" id="musicpic">
        </div>
        <!--歌曲图片 end-->
        <!--歌曲名称-->
        <div class="musicName">
            <h1 id="sname">歌曲名称</h1>
            <h2 id="singer">歌手</h2>
        </div>
        <!--歌曲名称 end-->
    </div>
    <!--歌曲信息 end-->

    <!--快捷文字-->
    <div class="kj">
        <ul>
        <li><img id="aiXin" src="img/aixin1.png"><p>喜欢</p></li>
        <li><img id="shouCang" src="img/shoucang.png"><p>收藏</p></li>
        <li><img id="xiaZai" src="img/xiazai.png"><p>下载</p></li>
        <li><img id="fenXiang" src="img/fenxiang.png"><p>分享</p></li>
        </ul>
    </div>

    <!--快捷文字 end-->

    <!--进度条-->
    <div class="jdt">
        <span class="jdt-left time" id="jdtLeft">00:00</span>
        <span class="jdt-right time" id="jdtRight">00:00</span>
        <div class="clears"></div>

        <div class="jdt_1" id="gequJDBar">
            <div class="jdt_color" id="gequjd">
            </div>
        </div>
        <!--进度条 end-->
        <!--控制按钮-->
        <div class="ctrls" id="ctrls">
            <button class="preBtn" id="preBtn" type="button"><img src="img/pre.png"></button>
            <button class="playBtn" id="playBtn" type="button"><span class='icon iconfont icon-zanting'></span></button>
            <button class="nextBtn" id="nextBtn" type="button"><img src="img/next.png"></button>
            <!--音量控制-->
            <div class="vol" id="volJd">
                <img src="img/yinliang.png">
                <div class="vol_color" id="volColor"></div>
                <div class="vol_blok" id="volBlok"></div>
            </div>
            <!--音量控制 end-->
            <!--音量显示百分比-->
            <div class="text" id="text">
                100%
            </div>
            <!--音量显示百分比  end-->
        </div>
        <!--控制按钮 end-->
    </div>

    <audio src="#" id="music"></audio>
</div>
<!--音乐播放器 end-->
<script src="js/music.js"></script>
</body>
</html>

html,
body{
    background-color: #003435;
}
.musicPlayer{
    width: 670px;
    height: 400px;
    background: url("../img/bg.jpg") no-repeat center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    border: 2px #006558 solid;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0.0.3);
}
.musicInfo{
    height: 240px;
}
.musicImg{
    width: 200px;
    height: 200px;
    border: 2px #fff solid;
    overflow: hidden;
    border-radius: 100%;
    margin-top: 20px;
    margin-left: 50px;
    float: left;
    animation: myrote 180s infinite linear;
}
@keyframes myrote {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.musicName{
    color: #FFFFFF;
    float: left;
    margin-top: 30px;
    margin-left: 80px;
}
.musicName>h1{
    font-size: 28px;
    font-weight: normal;
    line-height: 60px;
}
.musicName>h2{
    font-size: 18px;
    font-weight: 300;
    line-height: 15px;
    text-align: center;
}
.kj{
    color: #afafaf;
    font-size: 16px;
    margin-left: 30px;
    cursor: pointer;
}
.kj>ul{
    width:265px;
    display: flex;
    justify-content: space-between;
}
.kj>ul>li{
    margin: 0;
    border: 1px #bdbdbd solid;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
.kj>ul>li>img{
    width: 20px;
    height: 20px;
    float: left;
}
.kj>ul>li>p{
    margin-left: 20px;
}
.kj_1{
    margin-top: -23px;
}
.time{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.50;
    color: #FFFFFF;
}
.jdt-left{
    float: left;
}
.jdt-right{
    float: right;
}
.jdt{
    margin-left: 30px;
    margin-right: 30px;
}
.jdt_1{
    width: 100%;
    height: 8px;
    border-radius: 10px;
    background-color: #ccc;
    margin-top: 5px;
    overflow: hidden;
}
.jdt_color{
    height: 10px;
    width: 30%;
    pointer-events: none;
    background-color: #709a70;
}
.ctrls{
    text-align: center;
    margin-top: 10px;
    position: relative;
}
.preBtn{
    width: 50px;
    height: 30px;
    border-radius: 10px;
    background: #3e547f;
    border: 1px #709a70 solid;
}
.preBtn>img{
    width: 30px;
    height: 30px;
}
.preBtn:hover{
    background: #405d8a;
}
.nextBtn{
    width: 50px;
    height: 30px;
    border-radius: 10px;
    background: #3e547f;
    border: 1px #709a70 solid;
}
.nextBtn:hover{
    background: #405d8a;
}
.nextBtn>img{
    width: 30px;
    height: 30px;
}
.playBtn{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #3e547f  ;
    border: 1px #709a70 solid;
    margin-left: 10px;
    margin-right: 10px;
}
.playBtn:hover{
    background: #405d8a;
}
.playBtn>img{
    width: 30px;
    height: 30px;
}
.vol{
    position: absolute;
    width: 100px;
    height: 4px;
    top: 50%;
    right: 55px;
    margin-top: -2px;
    border-radius: 10px;
    background-color: #ccc;
}
.vol>img{
    width: 25px;
    height: 25px;
    margin-left: -135px;
    margin-top: -30px;
}
.vol_color{
    width: 100%;
    height: 4px;
    background-color: #709a70;
    margin-top: -17px;
    pointer-events: none;
}
.vol_blok{
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #709a70;
    border-radius: 100%;
    left: 100%;
    top: 50%;
    pointer-events: none;
    margin-top: -3.5px;
}
.text{
    color: #FFFFFF;
    position: absolute;
    right: 10px;
    top:50%;
    margin-top: -8px;
    }

{
    //找标签
    let music=document.getElementById("music");
    let playBtn=document.getElementById("playBtn");
    let preBtn=document.getElementById("preBtn");
    let nextBtn=document.getElementById("nextBtn");
    let sname=document.getElementById("sname");
    let singer=document.getElementById("singer");
    let musicpic=document.getElementById("musicpic");
    let jdtRight=document.getElementById("jdtRight");
    let gequjd=document.getElementById("gequjd");
    let jdtLeft=document.getElementById("jdtLeft");
    let gequJDBar=document.getElementById("gequJDBar");
    let volJd=document.getElementById("volJd");
    let volColor=document.getElementById("volColor");
    let volBlok=document.getElementById("volBlok");
    let musicImg=document.getElementById("musicImg");
    let text=document.getElementById("text");
    let aiXin=document.getElementById("aiXin");
    let shouCang=document.getElementById("shouCang");
    let xiaZai=document.getElementById("xiaZai");
    let fenXiang=document.getElementById("fenXiang");

    //歌曲。歌曲中的元素
    let songs=[{
        mp3:"img/six.mp3",
        singer:"胡歌",
        name:"六月的雨",
        img:"img/1.jpg",
    },
        {
            mp3:"img/ni.mp3",
            singer:"张杰",
            name:"逆战",
            img:"img/2.jpg",
        },
        {
            mp3:"img/no.mp3",
            singer:"张杰",
            name:"他不懂",
            img:"img/3.jpg",
        }];
    //切歌函数
    let changeMusic=function (index) {
        music.src=songs[index].mp3;//换歌曲
        musicpic.src=songs[index].img;//换图片
        sname.innerHTML=songs[index].name;//换名称
        singer.innerHTML=songs[index].singer;//换歌手
        gequjd.style.width=0;//切歌时进度归0
    };

    //默认加载第一首歌
    let index=0;//当前播放歌曲索引
    changeMusic(index);
    //播放按钮
    playBtn.addEventListener("click",function (event) {
        if(music.paused){
            music.play();
            event.currentTarget.innerHTML="<span class='icon iconfont icon-bofang'></span>";
        }else {
            music.pause();
            event.currentTarget.innerHTML="<span class='icon iconfont icon-zanting'></span>";
        }
    });
    //切歌
    preBtn.addEventListener("click",function (event) {
        index--;
        if(index<=-1){
            index=songs.length-1;
        }
        changeMusic(index);
    });
    nextBtn.addEventListener("click",function (event) {
        index++;
        if(index>songs.length-1){
            index=0;
        }
        changeMusic(index);
    });
    //转换时间
    function setTime(x, times) {
        if (times < 10) {
            x.innerHTML = "0:0" + Math.floor(times);
        } else if (times < 60) {
            x.innerHTML = "0:" + Math.floor(times);
        } else {
            let minute = parseInt(times / 60);
            let second = times - minute * 60;
            if (second < 10) {
                x.innerHTML = "0" + minute + ":" + "0" + parseInt(second);
            }
            else {
                x.innerHTML = "0" + minute + ":" + parseInt(second);
            }
        }
    }
    //歌曲事件
    //元数据加载，显示总时长
    music.addEventListener("loadedmetadata",function (event) {
        let times = music.duration;
        setTime(jdtRight, times);
    });
    //当歌曲可以播放的。切歌的时候就能播放
    music.addEventListener("canplay",function (event) {
        music.play();
    });
    //时间更新事件，歌曲顺利播放的时候，更新进度条和当前的时间
    music.addEventListener("timeupdate",function (event) {
        let jd=music.currentTime/music.duration;//0-1的小数
        let bfb=jd*100+"%";
        gequjd.style.width=bfb;
        let times = music.currentTime;
        setTime(jdtLeft, times);
    });
    //歌曲进度条拖动
    gequJDBar.addEventListener("click",function (event) {
        let x=event.offsetX;//获取鼠标所在位置
        let bfb=x/610*100;
        gequjd.style.width=bfb+"%";
        music.currentTime=music.duration*+bfb/100;
    });
    //音量控制拖动
    let setVol=function(event){
        let x=event.offsetX;//获取音量当前的位置
        let bfb=x/100*100;
        volColor.style.width=bfb+"%";
        volBlok.style.left=bfb+"%";
        text.innerHTML = bfb+"%" ;
        music.volume=bfb/100;
    };
    volJd.addEventListener("click",function (event) {
        setVol(event);
    });
    volJd.addEventListener("mousedown",function (event) {
        volJd.addEventListener("mousemove",setVol);
    });
    volJd.addEventListener("mouseup",function (event) {
        volJd.removeEventListener("mousemove",setVol);
    });
    // 播放完毕，自动下一首
    music.addEventListener("ended",function(){
        nextBtn.click();
    });
    //鼠标点击，爱心变红
    aiXin.addEventListener("click",function (event) {
       event.currentTarget.src = "img/aixin2.png";
    });
    //鼠标点击，已收藏
    shouCang.addEventListener("click",function (event) {
        event.currentTarget.src = "img/shoucang1.png";
    });
    //鼠标点击，已下载
    xiaZai.addEventListener("click",function (event) {
        event.currentTarget.src = "img/xiazai1.png";
    });
    //鼠标点击，已分享
    fenXiang.addEventListener("click",function (event) {
        event.currentTarget.src = "img/fenxiang1.png";
    });
}

JavaScript制作音乐播放器。实现了进度条拖动。音量大小控制，上一首下一首的切换

相关阅读

相关文章

相关问答

相关文档