欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-15 18:17:18
作者：浪子花梦，一个有趣的程序员 ~HTML、CSS、JS 方面的内容也学了许多，我也写了相关的文章在博客之中，需要学习两个小项目巩固一下知识所学的知识，在此作一个分享，资料源于B站，链接如下所示：Html+Css+JavaScript 打造个性音乐播放器（教程）效果如下所示：......

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

Html+Css+JavaScript 打造个性音乐播放器（教程）
音乐播放器制作 (HTML + CSS + JavaScript）

效果如下所示：
音乐播放器制作 (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

相关标签： 前端 杂谈

上一篇： Anaconda的安装与环境配置

下一篇： 排序算法之插入排序介绍

推荐阅读