作者：浪子花梦，一个有趣的程序员 ~
HTML、CSS、JS 方面的内容也学了许多，我也写了相关的文章在博客之中，需要学习两个小项目巩固一下知识所学的知识，在此作一个分享，资料源于B站，链接如下所示：

Html+Css+JavaScript 打造个性音乐播放器（教程）

效果如下所示：

不会在 CSDN上面放视频，只会弄个 gif . . .

HTML 代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <textarea name="" id="txt" cols="30" rows="10" style="display: none;">
        [00:00.00]Lemon - 米津玄師 (よねづ けんし)
        [00:05.20]词：米津玄師
        [00:10.30]曲：米津玄師
        [00:25.60]夢ならば
        [00:26.50]どれほどよかったでしょう
        [00:30.96]未だにあなたのことを夢にみる
        [00:35.14]忘れた物を取りに帰るように
        [00:41.68]古びた思い出の埃を払う
        [00:49.13]戻らない幸せがあることを
        [00:55.43]最後にあなたが教えてくれた
        [01:00.93]言えずに隠してた昏い過去も
        [01:06.53]あなたがいなきゃ
        [01:08.91]永遠に昏いまま
        [01:12.67]きっともうこれ以上
        [01:15.15]傷つくことなど
        [01:17.80]ありはしないとわかっている
        [01:22.54]あの日の悲しみさえ
        [01:25.28]あの日の苦しみさえ
        [01:28.11]そのすべてを愛してた
        [01:31.04]あなたとともに
        [01:33.64]胸に残り離れない
        [01:36.59]苦いレモンの匂い
        [01:39.65]雨が降り止むまでは帰れない
        [01:45.30]今でもあなたはわたしの光
        [02:01.93]暗闇であなたの背をなぞった
        [02:07.16]その輪郭を鮮明に覚えている
        [02:12.78]受け止めきれないものと
        [02:15.81]出会うたび
        [02:18.24]溢れてやまないのは涙だけ
        [02:24.37]何をしていたの
        [02:26.81]何を見ていたの
        [02:29.58]わたしの知らない横顔で
        [02:34.66]どこかであなたが今
        [02:37.12]わたしと同じ様な
        [02:40.92]涙にくれ
        [02:41.31]淋しさの中にいるなら
        [02:45.41]わたしのことなどどうか
        [02:48.67]忘れてください
        [02:51.48]そんなことを心から願うほどに
        [02:56.17]今でもあなたはわたしの光
        [03:05.76]自分が思うより
        [03:11.96]恋をしていたあなたに
        [03:16.37]あれから思うように
        [03:22.00]息ができない
        [03:27.58]あんなに側にいたのに
        [03:33.97]まるで嘘みたい
        [03:38.18]とても忘れられない
        [03:44.80]それだけが確か
        [03:54.69]あの日の悲しみさえ
        [03:57.16]あの日の苦しみさえ
        [04:00.87]そのすべてを愛してた
        [04:03.67]あなたとともに
        [04:05.27]胸に残り離れない
        [04:08.41]苦いレモンの匂い
        [04:11.29]雨が降り止むまでは帰れない
        [04:17.83]切り分けた果実の片方の様に
        [04:22.39]今でもあなたはわたしの光
    </textarea>

    <div class="photo">
        <div class="title">Lemon</div>
        <div class="singer">米津玄師</div>
        <div class="play"></div>
        <div class="lrc">
            <div class="content"></div>
        </div>
    </div>

    <audio id="myMusic" src="./mp3/Lemon.mp3" autoplay>
        您的浏览器不支持播放音频文件！！！
    </audio>

    <script src="./index.js"></script>
</body>
</html>

CSS 代码如下所示：

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: black;
}

.photo{
    width: 320px;
    height: 630px;
    background:linear-gradient(180deg,#ead6ee,#a0f1ea);
    margin: 50px auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: darkcyan;
    border-radius: 5px;
    box-shadow: 0 0 15px #ead5ee;
    overflow: hidden;
}

.title{
    margin-top: 5px;
    width: 100%;
    height: 70px;
    font-size: 32px;
    text-align: center;
    line-height: 70px;
}

.singer{
    width: 100%;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
}

.play{
    width: 182px;
    height: 193px;
    background-image: url("./img/music.png");
    background-repeat: no-repeat;
    margin: 20px auto;
}

.lrc{
    width: 100%;
    height: 220px;
    margin: 40px auto;
    text-align: center;
    overflow: hidden;
}

.lrc p{
    line-height: 20px;
    font-size: 15px;
}

.content{
    position: relative;
}

.play.rotate{
    animation: rot 5s linear infinite;
}

@keyframes rot{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

JavaScript 代码如下所示：


// 提取控制图片的权限
var btn = document.getElementsByClassName("play")[0];

// 提取控制音乐的权限
var myMusic = document.getElementById("myMusic");

// 提取控制歌词的权限
var txt = document.getElementById("txt");

// 提取控制歌词地方的权限
var con = document.getElementsByClassName("content")[0];

// 标记音乐是否播放
var mark = true;

// 当音乐图片被点击时的事件处理器
btn.onclick = function(){
    if(mark){
        this.className += " rotate";
        myMusic.play();
        mark = false;
    }
    else{
        this.className = "play";
        myMusic.pause();
        mark = true;
    }
}

var lrc = txt.value;
var lrcArr = lrc.split("[");
var html = ""       // 存放标签 p所代表的歌词 
for(var i = 0; i < lrcArr.length; ++i){
    var arr = lrcArr[i].split("]");
    var time = arr[0].split(".");
    var timer = time[0].split(":");
    var ms = timer[0] * 60 + timer[1] * 1;  // 以当前时间作 id
    var text = arr[1];                      // 歌词部分
    if(text){
        html += "<p id = " + ms + ">" + text + "</p>";
    }

    con.innerHTML = html;
}
console.log("huameng");
var num = 0;
var oP = con.getElementsByTagName("p");     // 获取所有标签的内容
// 添加音乐的时间更新事件的事件处理器
myMusic.addEventListener("timeupdate", function(){

    var curTime = parseInt(this.currentTime);
    if(document.getElementById(curTime)){
        for(var i = 0; i < oP.length; ++i){
            oP[i].style.cssText = "font-size: 15px;";
        }
        
        document.getElementById(curTime).style.cssText = "background: linear-gradient(-3deg,#eebd89 0%,#d13abd 100%); -webkit-background-clip: text; color:transparent;font-size: 20px";
        if(oP[7 + num].id == curTime){
            con.style.top = -20 * num + "px";
            ++num;
        }
    }
});

上面的代码复制可直接使用，加个mp3、png文件就行了 . . .

本文地址：https://blog.csdn.net/weixin_42100963/article/details/107389375

音乐播放器制作 (HTML + CSS + JavaScript）

HTML 代码如下所示：

CSS 代码如下所示：

JavaScript 代码如下所示：

相关推荐

ASP页面中怎么嵌入JavaScript或CSS

JavaScript引擎如何实现async/await

Javascript中promise,async和await的区别是什么

Javascript中async与await的捕捉错误怎么理解

JavaScript如何优雅的处理async/await

JavaScript中的Async和Await怎么用

JavaScript如何实现await多个async函数

如何使用HTML+CSS+JS制作3D立方体图像库