音乐播放器
2019-04-03 本文已影响0人
Wo信你个鬼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="关键字">
<!--关键字-->
<meta name="Description" content="描述">
<!--描述-->
<title>手机音乐播放器</title>
<style>
* {
margin: 0;
padding: 0;
}
#phone {
width: 353px;
/*宽度*/
height: 600px;
/*高度*/
background-color: #000;
margin: 100px auto;
/*上下为100px,左右居中*/
}
.top {
width: 353px;
height: 23px;
background: url("image/1.png");
}
.menu {
width: 36px;
height: 30px;
margin-left: 6px;
margin-top: -3px;
cursor: pointer;
float: left;
position: absolute;
}
.title {
width: 353px;
height: 34px;
background: url("image/2.png");
color: #ccc;
/*文本颜色*/
font-size: 24px;
font-weight: bold;
text-align: center;
font-family: 'kaiti';
padding-top: 10px;
}
.singer {
width: 353px;
height: 34px;
color: #ccc;
/*文本颜色*/
text-align: center;
font-size: 14px;
line-height: 34px;
}
.play {
width: 103px;
height: 103px;
background: url("image/3.png");
margin: 30px auto;
border-radius: 50%;
cursor: pointer;
}
.rotate {
/*
css3自定义动画： 动画名称 时间 匀速运动 无限重复
*/
animation: rot 10s linear infinite;
}
.lrc {
width: 301px;
height: 315px;
margin: auto;
font-size: 14px;
color: #ccc;
line-height: 24px;
text-align: center;
overflow: hidden;
/*超出隐藏*/
}
.context {
position: relative;
}
/*关键帧控制每一帧*/
@keyframes rot {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
textarea {
display: none;
}
</style>
</head>
<body>
<div id="phone">
<div class="top">
</div>
<div class="title">
<div id="menu" class="menu">
</div>
达拉崩吧
</div>
<div class="singer">双笙</div>
<div class="play" id="play"></div>
<div class="lrc" id="lrc">
<div id="context" class="context">
</div>
</div>
</div>
<textarea id="text">
[ar:双笙]
[ti:达拉崩吧]
[00:00.32]双笙 - 达拉崩吧
[00:00.02]词：ilem
[00:00.03]曲：ilem
[00:00.04]改编词：海苔
[00:10.35]很久很久以前
[00:12.35]巨龙突然出现
[00:14.35]带来灾难
[00:15.72]带走了公主又消失不见
[00:18.39]王国十分危险
[00:20.32]世间谁最勇敢
[00:22.33]一位勇者赶来大声喊
[00:25.67]我要
[00:26.40]带上最好的剑
[00:28.38]翻过最高的山
[00:30.30]闯进最深的森林
[00:32.12]把公主带回到面前
[00:34.48]国王非常高兴
[00:36.30]忙问他的姓名
[00:38.32]年轻人想了想
[00:40.27]他说
[00:41.21]陛下我叫
[00:42.14]风流倜傥京城酒吧鸡王南梦华
[00:45.41]再来一次
[00:46.16]风流倜傥京城酒吧鸡王南梦华
[00:49.52]是不是
[00:50.07]风流倜傥京城酒吧鸡王南梦华
[00:53.64]对对
[00:54.14]风流倜傥京城酒吧鸡王南梦华
[01:14.54]英雄鸡王梦华
[01:16.34]骑上最快的马
[01:18.32]带着大家的希望
[01:20.37]从城堡里出发
[01:22.28]战胜怪兽来袭
[01:24.32]获得十二金币
[01:26.33]无数伤痕见证他慢慢升级
[01:30.42]偏远美丽村庄
[01:32.32]打开所有宝箱
[01:34.34]一路风霜伴随指引前路的圣月光
[01:38.32]闯入一座山洞
[01:40.34]公主和可怕巨龙
[01:42.28]英雄拔出宝剑
[01:44.30]巨龙说
[01:45.56]我是
[01:46.07]村头恶霸女装扶她卡通狗蛋龙
[01:49.42]再说一次
[01:50.11]村头恶霸女装扶她卡通狗蛋龙
[01:53.58]是不是
[01:54.10]满嘴龅牙像个西瓜喷火不倒翁
[01:57.59]不对是
[01:58.10]村头恶霸女装扶她卡通狗蛋龙
[02:17.91]于是
[02:18.25]风流倜傥京城酒吧鸡王南梦华
[02:21.65]砍向
[02:22.06]村头恶霸女装扶她卡通狗蛋龙
[02:25.57]然后
[02:26.06]村头恶霸女装扶她卡通狗蛋龙
[02:29.61]咬了
[02:30.08]风流倜傥京城酒吧鸡王南梦华
[02:33.56]最后
[02:34.06]风流倜傥京城酒吧鸡王南梦华
[02:37.43]他战胜了
[02:38.14]村头恶霸女装扶她卡通狗蛋龙
[02:41.51]救出了
[02:42.15]公主露娜貌美如花
[02:44.14]Hentai
[02:44.59]蘭香红
[02:45.56]回到了
[02:46.14]上游洗头一片绿色春意盎然城
[02:49.54]国王听说
[02:50.24]风流倜傥京城酒吧鸡王南梦华
[02:53.47]他打败了
[02:54.15]村头恶霸女装扶她卡通狗蛋龙
[02:57.52]就把
[02:58.05]公主露娜貌美如花
[03:00.03]Hentai
[03:00.60]蘭香红
[03:01.56]嫁给
[03:02.02]风流倜傥京城酒吧鸡王南梦华
[03:06.15]鸡王梦华
[03:07.11]公主露娜幸福得像个童话
[03:10.21]他们生下一个孩子也在天天渐渐长大
[03:14.19]为了避免以后麻烦
[03:16.01]孩子称作王浩然
[03:18.24]他的全名十分难念
[03:20.04]我不想说一遍
</textarea>
<audio src="music/其实都没有.mp3" id="myMusic"></audio>
<script>
/*
业务需求：点击播放按钮，实现音乐的播放、暂停
1.获取点击按钮标签及音频标签
2、实现播放暂停功能
*/
var oPlay = document.getElementById("play");
var oMyMusic = document.getElementById("myMusic");
var oLrc = document.getElementById("context");
var html = ""; //用来存储歌词
//2、实现播放暂停功能
var onoff = true; //做一个开关来存储音乐的播放状态
oPlay.onclick = function() {
if(onoff) { //如果onff为真就播放音乐
oMyMusic.play(); //播放音乐
onoff = false;
this.className = "play rotate";
} else {
oMyMusic.pause(); //暂停音乐
onoff = true;
this.className = "play";
}
}
//需求：歌词同步
//1、获取歌词并添加到lrc中
var text = document.getElementById("text").value;
console.log(text);
var arr = text.split("["); //从[处切割开
console.log(arr);
var context = document.getElementById("context");
var n = 0; //用来存储播放了多少行
for(var i = 0, len = arr.length; i < len; i++) {
// console.log(arr[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>"
}
}
oLrc.innerHTML = html;
var aP = oLrc.getElementsByTagName("p");
//2、歌词同步
//2.1监听歌曲播放的进度
oMyMusic.addEventListener("timeupdate", function() {
//console.log(this.currentTime);//oMyMusic当前时间
//console.log(parseInt(this.currentTime));//parseInt取整，去小数
var curt = parseInt(this.currentTime); //根据音乐播放秒数来获取P标签的id
if(document.getElementById(curt)) { //存在
//先把所有的都变为原来的颜色
for(var i = 0, len = aP.length; i < len; i++) {
aP[i].style.color = "#ccc";
aP[i].style.fontSize = "14px";
}
document.getElementById(curt).style.color = "red";
document.getElementById(curt).style.fontSize = "16px";
//运用context的marginTop值，relative，overflow来实现歌词滚动
if(aP[n + 6] && aP[n + 6].id == curt) {
console.log(n)
context.style.marginTop = -24 * n + "px";
n++;
}
}
})
//2.2监听歌曲播放完成
oMyMusic.addEventListener("ended", function() {
context.style.marginTop = 0;
this.currentTime = 0; //当前时间改为0
oPlay.className = "play";
onoff = true;
})
</script>
</body>
</html>
