js 音乐播放器案例

• html代码块

    

        
        
        

            

            
        
        

            

            
        
        

            

                
            
        


        
        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
        
        

            00:00
            
            00:00
        

        
        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
    

• css代码块

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 75px;
}


body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: aquamarine;

}

.box {
    position: relative;
    width: 90%;
    // border:  1px solid blue;

    .bg {
        position: fixed;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;

        filter: blur(30px); //40px
        background: inherit;
        z-index: -1;
        transform: scale(1.3);
        background-color: rgba(0, 0, 0, .6);
    }
}

.img-top {
    width: 100%;
    position: absolute;
    margin-top: 10px; //40px


    .img-Dots {
        width: .666667rem; //50px
        height: .666667rem; //50px
        border-radius: .64rem; //48px
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: -5%; //120px
        z-index: 999;
        display: inline-block;
        background: white;

    }

    img {
        width: 2rem; //200px
        height: 2.666667rem; //300px
        margin-left: 4.2rem; //165px
        margin-top: .133333rem; //10px
        transition: transform 0.3s;
    }

    .dotsRotate {
        transform: rotate(-20deg);
        transform-origin: top left;
        transition: transform 0.3s;
        // transform-origin: top left;
    }

}


.title-wrap {
    margin-top: 100px; //100px
    margin-bottom: 20px; //20px
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title-wrap1 {
        width: 4rem; //300px
        height: 4rem; //300px

        background: url(../img/disc-ip6.png) no-repeat center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;


        img {
            z-index: -1;
            width: 3.333333rem; //250px
            height: 3.333333rem; //250px
            border-radius: 50%;
            border: 1px solid yellow;
        }

        .imgRotate {
            animation: ImgRotate 5s linear infinite;
        }


        @keyframes ImgRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    }
}

.title-wrap2 {
    text-align: center;
    color: white;
    margin: 20px 0; //20px

    p {
        font-size: .24rem; //18px

    }

    span {
        margin-bottom: 10px; //10px
        font-size: .186667rem; //14px
        color: gray;
    }
}

.play-time {
    text-align: center;
    margin-top: 10px; //20px
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
        margin: .133333rem; //10px
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: .066667rem; //5px
        opacity: 0.7;
        transition: opacity .2s;
        outline: none;
    }

    input::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: .2rem; //15px
        height: .2rem; //15px
        border-radius: 50%;
        background: white;
        cursor: pointer;
    }

    span {
        font-size: .186667rem; //14px
    }
}

// 字体图标
.iconImg {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;

    i{
        font-size: .533333rem;//40px
    }
}

// 播放器
.play-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    margin-top: 40px;

    .fa-3x{
        font-size: .8rem;
    }
    i{
        font-size: .6rem;//45px
    }
}

• js代码块

// 1.创建audio对象
        let audio = new Audio();
        // 获取播放元素
        const playMusic = document.getElementsByClassName("play")[0];
        // audio播放器默认播放状态  true播放 false暂停
        let audioPaly = false;



        // 8.定义音乐资源列表
        let track_list = [{
                name: "王力宏",
                artist: "洗刷刷",
                image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2813440055,1849072238&fm=26&gp=0.jpg",
                path: "http://tyst.migu.cn/public/product08/2018/04/12/2018%E5%B9%B404%E6%9C%8812%E6%97%A515%E7%82%B938%E5%88%86%E7%B4%A7%E6%80%A5%E5%86%85%E5%AE%B9%E5%87%86%E5%85%A5SONY18%E9%A6%96/%E6%AD%8C%E6%9B%B2%E4%B8%8B%E8%BD%BD/MP3_40_16_Stero/%E6%94%B9%E5%8F%98%E8%87%AA%E5%B7%B1-%E7%8E%8B%E5%8A%9B%E5%AE%8F.mp3"
            },
            {
                name: "周杰伦",
                artist: "一路向北",
                image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1860240789,1191019851&fm=26&gp=0.jpg",
                path: "http://tyst.migu.cn/public/product5th/product35/2019/10/1618/2009%E5%B9%B406%E6%9C%8826%E6%97%A5%E5%8D%9A%E5%B0%94%E6%99%AE%E6%96%AF/%E6%AD%8C%E6%9B%B2%E4%B8%8B%E8%BD%BD/MP3_40_16_Stero/60054701934.mp3"
            },
            {
                name: "周杰伦",
                artist: "七里香",
                image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590208012170&di=312f7440f1d5fb6df6c6da8c2efcaf48&imgtype=0&src=http%3A%2F%2Fimg.9ku.com%2Fgeshoutuji%2Fsingertuji%2F4%2F40945%2F40945_4.jpg",
                path: "http://tyst.migu.cn/public/product11/2018/06/21/2009%E5%B9%B406%E6%9C%8826%E6%97%A5%E5%8D%9A%E5%B0%94%E6%99%AE%E6%96%AF/%E6%AD%8C%E6%9B%B2%E4%B8%8B%E8%BD%BD/MP3_40_16_Stero/%E4%B8%80%E8%B7%AF%E5%90%91%E5%8C%97-%E5%91%A8%E6%9D%B0%E4%BC%A6.mp3",
            },
        ];

        // 9.获取当前音乐播放序号
        let index = 0;
        // 获取图片　＆　标题　& span 的元素对象
        let musicImg = document.querySelector(".music-img");
        let musicTitle = document.querySelector(".title");
        let musicName = document.querySelector(".music-name");
        let dotRotate = document.querySelector(".dotsRotate");
        let musicBg = document.querySelector(".bg");

        // 2.添加音乐资源并预加载
        function onLoadMusic(index) {
            audio.src = track_list[index].path; //获取音乐路径
            musicImg.src= track_list[index].image;//获取图片路径
            musicTitle.innerHTML = track_list[index].name;//获取数组中name这个domo元素的内容
            musicName.innerHTML = track_list[index].artist;
            musicBg.src = track_list[index].image;// 获取图片路径并设置为背景图
            audio.load(); //预加载
        }



        // 10.实现下一首 & 上一首
        // 下一首
        function nextTrack() {
            if (++index > track_list.length - 1) { //判断当前音乐播放序号 是否大于 音乐列表序号-1
                index = 0;
            }
            onLoadMusic(index); //调用添加音乐资源函数
            onPlay(); //调用音乐播放函数
        }
        // 上一首
        function prevTrack(){
            if(--index < 0){// 当前序号小于第一首歌的序号时执行判断
                index = track_list.length -1;//将最后一首歌的序号赋值给index
            }
            onLoadMusic(index);
            onPlay();
        }


        // 11.获取音乐背景图片
        


        // 3.点击实现音乐播放与暂停 /字体图标改变
        function onPlayMusic() {
            // 判断播放器默认状态
            if (audioPaly == true) { //播放器为播放状态时
                onPause();
            } else {
                onPlay();
            }
        }
        // 将播放 & 暂停 封装成函数
        function onPlay() {
            audio.play(); //点击播放器执行播放方法
            audioPaly = true; //播放器状态变为播放
            playMusic.innerHTML = ''; //播放元素对象改变，显示暂停状态图标
            musicImg.classList.add("imgRotate"); //播放时为音乐背景图片添加一个类
            musicImg.style.animation = "ImgRotate 5s linear infinite running" //点击播放时给动画添加running来控制动画状态为运行
            dotRotate.style.transform = "rotate(0deg)";//播放时将留声机旋转角度改变为0
        }

        function onPause() {
            audio.pause(); //点击播放器执行暂停方法
            audioPaly = false; //播放器状态变为暂停
            playMusic.innerHTML = ''; //播放元素对象改变，显示播放状态图标
            musicImg.classList.remove("imgRotate"); //暂停时删除 添加的类
            musicImg.style.animation = "ImgRotate 5s linear infinite paused"//点击暂停时给动画添加paused来控制动画状态为暂停
            dotRotate.style.transform = "rotate(-20deg)";//播放时将留声机旋转角度复原

        }




        // 4.获取进度条对象
        const playTime = document.getElementsByClassName("seek-input")[0];
        //  获取当前时间&总时间对象
        let starTime = document.querySelector(".start-time");
        let endTime = document.querySelector(".end-time");

        // 5.设置计时器
        let updateTimer = setInterval(seekUpdate, 1000);


        // 6.播放进度时间更新
        function seekUpdate() {
            if (!isNaN(audio.duration) && audioPaly == true) { //判断播放器总时间为数字 并且 播放器为播放状态时执行
                let valueTime = audio.currentTime / audio.duration * 100 // 获取播放长度
                playTime.value = valueTime; //将播放长度赋值给进度条的value属性


                // 获取当前时间
                let currentMinutes = Math.floor(audio.currentTime / 60); //获取当前时间的分钟数
                let currentSeconds = Math.floor(audio.currentTime - currentMinutes * 60); //获取当前时间的秒数，秒不能超过60，所以需要当前总秒数 减去 分钟的总秒数 得到 剩下秒数
                if (currentMinutes < 10) {
                    currentMinutes = "0" + currentMinutes
                } //当分钟数小于10,执行时在它前面添加字符串0
                if (currentSeconds < 10) {
                    currentSeconds = "0" + currentSeconds
                } //当秒数小于10时，执行时在他前面添加字符串0
                starTime.innerHTML = currentMinutes + ":" + currentSeconds; //当前时间对象的内容等于 当前分钟数+：+当前秒数

                //获取总时间
                let durationMinutes = Math.floor(audio.duration / 60); //获取总时间的分钟数
                let durationSeconds = Math.floor(audio.duration - durationMinutes * 60); // 获取总时间的秒数
                if (durationMinutes < 10) {
                    durationMinutes = "0" + durationMinutes
                } //当分钟数小于10,执行时在它前面添加字符串0
                if (durationSeconds < 10) {
                    durationSeconds = "0" + durationSeconds
                } //当秒数小于10时，执行时在他前面添加字符串0
                endTime.innerHTML = durationMinutes + ":" + durationSeconds; //总时间对象的内容等于 总分钟数+：+总秒数
            }
        }
        // 7.拖动滑块添加
        function seekTo() {
            audio.currentTime = playTime.value / 100 * audio.duration //播放器播放的当前时间 等于 进度条的value值除以100之后加上播放总时间
        }


        // 初始化播放
        onLoadMusic(index);