个性的音乐播放

最新推荐文章于 2024-11-01 15:19:31 发布

吾等汝多时

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量144

点赞数 1

分类专栏： javaScript 文章标签： html css js css3

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

版权

javaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="js/index.css" />
</head>
<body>
<textarea rows="30" cols="10" id="txt" style="display:none;">
	[00:17.73]运命のルーレット廻して
	[00:25.73]ずっと 君を见ていた
	[00:44.98]何故なの こんなに 幸せなのに
	[00:50.98]水平线を见ると 哀しくなる
	[00:56.63]あの顷の自分を远くで 见ている そんな感じ
	[01:08.13]运命のルーレット廻して
	[01:19.39]アレコレ深く考えるのはMystery
	[01:23.84]ほら 运命の人はそこにいる
	[01:32.14]ずっと 君を见ていた
	[01:43.19]星空を见上げて 笑颜ひとつで
	[01:49.64]この高い所からでも 飞べそうじゃん
	[01:55.74]スピード上げ 望远镜を 覗いたら
	[02:04.64]未来が见えるよ
	[02:09.79]运命のルーレット廻して
	[02:17.60]何処に行けば 想い出に会える
	[02:23.40]青い地球の ちっぽけな二人は
	[02:30.51]今も 进化し続ける
	[03:03.21]运命のルーレット廻して
	[03:09.51]旅立つ时の翼はbravely
	[03:14.76]ほら どんな时も 幸运は待ってる
	[03:23.07]ずっと 君を见ていた
	[03:30.12]ずっと 君を见ていた
</textarea>
	<!-- 架子 -->
<article class="photo">
	<div class="title">转动命运之轮</div>
	<div class="singer">仓木麻衣</div>
	<div class="play"></div>
	<div class="lrc">
		<div class="content"></div>
	</div>
</article>

<audio id="myMusic" src="img/转动命运之轮.mp3">
	你的浏览器不支持
</audio>
<script src="js/index.js"></script>
</body>
</html>

css

*{
	margin:0;
	padding:0;
}
.photo{
	width:320px;
	height:600px;
	background:linear-gradient(180deg,#EAD6EE,#A0F1EA)fixed;
	margin:30px auto;
	margin-bottom:0;
	border-radius:10px;
	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("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);
	}
}

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 ++
        }
    }
})