验证中...
Languages: HTML
Categories: Web开发技术
Latest update 2019-02-12 19:32
音乐播放器.html
Raw Copy
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="播放器">
<meta name="Description" content="">
<title>音乐播放器</title>
<style type="text/css">
*{margin:0;padding:0;}
#phone{
width:320px;
height:633px;
background:#000;
margin:auto;
}
.title{
width:320px;
height:30px;
color:#ccc;
font-size:34px;
font-weight:bold;
text-align:center;
}
.singer{
width:320px;
height:30px;
color:#ccc;
margin:5px 0 0 0;
text-align:center;
font-size:14px;
line-height:30px;
}
.play{
width:190px;
height:190px;
background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549978487162&di=e061b8e3271e7fbabe87666729d92d0b&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F01%2F23%2F72%2F30%2F58fdf1c8cf2d3.png") no-repeat 0 0 / 100% 100%;
border-radius:95px;
box-shadow:0px 18px 25px -10px #4791FF inset,0px -18px 25px -10px #4791FF inset;
margin:auto;
}
.rotate{
animation:rot 10s linear infinite;
}
@keyframes rot{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}}
.fileinput-button{
background-color: #ccc;
color: red;
position: relative;
display: inline-block;
overflow: hidden;
}
.fileinput-button input{
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
}
.lrc{
width:98%;
height:278px;
margin:auto;
color:#ccc;
font-size:12px;
line-height:20px;
text-align:center;
overflow:hidden;
}
#content{
position:relative;
top:0;
}
</style>
</head>
<body>
<div id="phone">
<div class="title" id="title">title</div>
<div class="singer">by</div>
<div class="play" id="play"></div>
<span class="fileinput-button"">
<span>选择路径</span>
<input type="file" id="file" onchange="onInputFileChange()">
</span>
<div class="lrc">
<div id="content"></div>
</div>
<canvas id="canvas" width="320" height="100"></canvas>
</div>
<audio id="myMusic" autoplay loop>Your browser can't support HTML5 Audio</audio><!-- controls,autoplay -->
<script>
function onInputFileChange() {
var f = document.getElementById("file").files;
//上次修改时间
console.log(f[0].lastModifiedDate);
//路径
var url = URL.createObjectURL(f[0]);
//名称
var name = f[0].name;
//大小 字节
console.log(f[0].size);
//类型
console.log(f[0].type);
document.getElementById("myMusic").src = url;
document.getElementById("title").innerText = name;
}
</script><!-- file函数,防跨域 -->
<textarea id="text" style="display:none">
[00:00.00]买辣椒也用券 - 起风了
[00:01.00]作词:米果
[00:02.00]作曲:高桥优
[00:29.06]这一路上走走停停
[00:32.08]顺着少年漂流的痕迹
[00:35.36]迈出车站的前一刻
[00:38.33]竟有些犹豫
[00:41.47]不禁笑这近乡情怯
[00:44.91]仍无可避免
[00:46.91]而长野的天
[00:48.47]依旧那么暖
[00:49.99]吹起了从前
[00:52.26]从前初识这世间
[00:55.34]万般流连
[00:57.20]看着天边似在眼前
[00:59.73]也甘愿赴汤蹈火
[01:01.90]去走它一遍
[01:04.76]如今走过这世间
[01:07.79]万般流连
[01:09.51]翻过岁月不同侧脸
[01:12.23]措不及防
[01:13.90]闯入你的笑颜
[01:18.29]我曾难自拔于世界之大
[01:21.92]也沉溺于其中梦话
[01:25.15]不得真假
[01:26.61]不做挣扎
[01:27.72]不惧笑话
[01:30.80]我曾将青春翻涌成她
[01:34.02]也曾指尖弹出盛夏
[01:37.21]心之所动
[01:38.73]且就随缘去吧
[01:43.01]逆着光行走
[01:44.98]任风吹雨打
[01:59.50]短短的路走走停停
[02:02.48]也有了几分的距离
[02:05.66]不知抚摸的是故事
[02:08.69]还是段心情
[02:11.87]也许期待的
[02:13.84]不过是与时间为敌
[02:17.31]再次看到你
[02:18.78]微凉晨光里
[02:20.34]笑的很甜蜜
[02:22.76]从前初识这世间
[02:25.79]万般流连
[02:27.40]看着天边似在眼前
[02:30.17]也甘愿赴汤蹈火
[02:32.29]去走它一遍
[02:35.16]如今走过这世间
[02:38.14]万般流连
[02:39.86]翻过岁月不同侧脸
[02:42.65]措不及防
[02:44.21]闯入你的笑颜
[02:48.71]我曾难自拔于世界之大
[02:52.74]也沉溺于其中梦话
[02:55.56]不得真假
[02:56.98]不做挣扎
[02:58.13]不惧笑话
[03:01.21]我曾将青春翻涌成她
[03:04.49]也曾指尖弹出盛夏
[03:07.56]心之所动
[03:09.03]且就随缘去吧
[03:38.56]晚风吹起你鬓间的白发
[03:42.24]抚平回忆留下的疤
[03:45.50]你的眼中
[03:46.91]明暗交杂
[03:48.12]一笑生花
[03:50.99]暮色遮住你蹒跚的步伐
[03:54.67]走进床头藏起的画
[03:57.85]画中的你
[03:59.41]低着头说话
[04:03.55]我仍感叹于世界之大
[04:06.83]也沉醉于儿时情话
[04:09.95]不剩真假
[04:11.42]不做挣扎
[04:12.93]无谓笑话
[04:15.91]我终将青春还给了她
[04:19.24]连同指尖弹出的盛夏
[04:22.83]心之所动
[04:24.34]就随风去了
[04:28.49]以爱之名
[04:30.15]你还愿意吗
</textarea>
<script>
var oPlay = document.getElementById("play");
var myMusic = document.getElementById("myMusic");
var onOff = true;
oPlay.onclick = function(){
if (onOff)
{
myMusic.play();
onOff = false;
this.className = "play rotate";
}else{
myMusic.pause();
onOff = true;
this.className = "play";
}
}
var html = "";
var text = document.getElementById("text").value;
var oCon = document.getElementById("content");
//console.log(text);
var arr = text.split("[");
for (var i=0;i<arr.length ;i++ )
{
var lrc = arr[i].split("]");
var times = lrc[0].split(".");
var time = times[0].split(":");
var cut = time[0]*60 + time[1]*1;
//console.log(cut)
if(lrc[1])
{
html += "<p id="+cut+">"+lrc[1]+"</p>";
}
}
oCon.innerHTML = html;
var aP = oCon.getElementsByTagName("p");
var n = 0;
myMusic.addEventListener("timeupdate",function(){
// console.log(parseInt(this.currentTime));
var curt = parseInt(this.currentTime);
if (document.getElementById(curt))
{
// document.getElementById(curt).style.color = "red";
for (var i=0;i<aP.length ;i++ )
{
aP[i].style.color = "#ccc";
aP[i].style.backgroundColor = "#000";
aP[i].style.fontSize = "12px";
}
document.getElementById(curt).style.color = "#32CD32";
document.getElementById(curt).style.backgroundColor = "#888";
document.getElementById(curt).style.fontSize = "16px";
if (aP[n+6].id == curt)
{
oCon.style.top = -n*20 +"px" ;
n++;
}
}
});
</script>
</body>
</html>

Comment list( 1 )

Mcayear 2019-02-12 19:32

大佬求轻揍

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close