Html+Css+JavaScript 打造个性音乐播放器

最新推荐文章于 2024-03-05 15:32:42 发布

livana.

最新推荐文章于 2024-03-05 15:32:42 发布

阅读量497

点赞数

分类专栏：前端学习文章标签： html5 css jquery

原文链接：https://www.bilibili.com/video/BV1aE411c79j

版权

学习同时被 2 个专栏收录

30 篇文章 2 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的音乐播放器</title>
    <link rel="stylesheet" href="./Index.css">
</head>

<body>

    <textarea name="" id="txt" cols="30" rows="10" style="display: none;">
        [00:00.00]Lemon - 米津玄師 (よねづ けんし)
        [00:00.20]词：米津玄師
        [00:00.30]曲：米津玄師
        [00:01.60]夢ならば
        [00:02.50]どれほどよかったでしょう
        [00:06.96]未だにあなたのことを夢にみる
        [00:12.14]忘れた物を取りに帰るように
        [00:17.68]古びた思い出の埃を払う
        [00:26.13]戻らない幸せがあることを
        [00:31.43]最後にあなたが教えてくれた
        [00:36.93]言えずに隠してた昏い過去も
        [00:42.53]あなたがいなきゃ
        [00:44.91]永遠に昏いまま
        [00:48.67]きっともうこれ以上
        [00:51.15]傷つくことなど
        [00:53.80]ありはしないとわかっている
        [00:58.54]あの日の悲しみさえ
        [01:01.28]あの日の苦しみさえ
        [01:04.11]そのすべてを愛してた
        [01:07.04]あなたとともに
        [01:09.64]胸に残り離れない
        [01:12.59]苦いレモンの匂い
        [01:15.65]雨が降り止むまでは帰れない
        [01:21.30]今でもあなたはわたしの光
        [01:37.93]暗闇であなたの背をなぞった
        [01:43.16]その輪郭を鮮明に覚えている
        [01:48.78]受け止めきれないものと
        [01:51.81]出会うたび
        [01:54.24]溢れてやまないのは涙だけ
        [02:00.37]何をしていたの
        [02:02.81]何を見ていたの
        [02:05.58]わたしの知らない横顔で
        [02:10.66]どこかであなたが今
        [02:13.12]わたしと同じ様な
        [02:15.92]涙にくれ
        [02:17.31]淋しさの中にいるなら
        [02:21.41]わたしのことなどどうか
        [02:24.67]忘れてください
        [02:27.48]そんなことを心から願うほどに
        [02:33.17]今でもあなたはわたしの光
        [02:41.76]自分が思うより
        [02:46.96]恋をしていたあなたに
        [02:52.37]あれから思うように
        [02:58.00]息ができない
        [03:03.58]あんなに側にいたのに
        [03:08.97]まるで嘘みたい
        [03:14.18]とても忘れられない
        [03:19.80]それだけが確か
        [03:30.69]あの日の悲しみさえ
        [03:33.16]あの日の苦しみさえ
        [03:35.87]そのすべてを愛してた
        [03:38.67]あなたとともに
        [03:41.27]胸に残り離れない
        [03:44.41]苦いレモンの匂い
        [03:47.29]雨が降り止むまでは帰れない
        [03:52.83]切り分けた果実の片方の様に
        [03:58.39]今でもあなたはわたしの光 
    </textarea>

    <!-- 架子 -->
    <article class="photo">
        <div class="title">Lemon</div>
        <div class="singer">米津玄师</div>
        <div class="play"></div>
        <div class="lrc">
            <div class="content"></div>
        </div>
    </article>

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

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

index.css

*{
    margin: 0;
    padding: 0;
}

.photo{
    width: 320px;
    height: 600px;
    background: linear-gradient(180deg,#ead6ee,#a0f1ea)fixed;
    margin: 50px auto;
    font-size: "微软雅黑 Light";
    color: #2c606d;
    border-radius: 5px;
    box-shadow: 0 0 7px #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: 40px;
}

.play{
    width: 152px;
    height: 163px;
    background-image: url("./content/img/index.png");
    background-repeat: no-repeat;
    margin: 20px auto;
}

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

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

.content{
    position: relative;
}

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

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

index.js

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 = ""
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
    var text = arr[1]
    if(text){
        html += "<p id=" + ms +">" + text + "</p>"
    }

    con.innerHTML = html
}

var num = 0
var oP = con.getElementsByTagName("p")
myMusic.addEventListener("timeupdate",function(){
    var curTime = parseInt(this.currentTime)   //视频当中把currentTime写成了curTime,,,,,,,
    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 ++
        }
    }
})

在这里插入图片描述

livana.

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Html+Css+JavaScript 打造个性音乐播放器

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的音乐播放器</title> <link rel="stylesheet" hre
复制链接

扫一扫