<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body,ul,li,p{margin:0;padding:0;}
ul{list-style:none;}
#main{
width:400px;
height:600px; /*高度要由内容调整*/
background-color:#ccc;
margin:30px auto;
background-image:url("img/b.jpg"); /*背景图片*/
background-size:100%;
position:relative;/*声音相对定位*/
}
/* 歌单切换歌曲*/
#songlist{
text-align:center;/*文字水平居中*/
position:relative;
}
#songlist>p{
height:30px;
line-height:30px;
font-size:20px;
}
#songlist>ul{
width:100%;
display:none;
background-color:#fff;
position:absolute;
left:0;
top:30px;
z-index:10;
}
/*唱片手臂的图片样式*/
#songlist>#changpian{
width:80px;
height:80px;
z-index:10;
position:absolute;
float:left;
left:50%;
transform:rotateZ(-45deg);
transition:all 0.3s linear;
transform-origin:top left;
}
#songlist>ul>li:hover{background-color:green;}
/* 歌手图片*/
#singer{
width:220px;
height:220px;
border-radius:50%;
background-image:url("img/c.png");/*黑胶片图片*/
background-size:100% 100%;
margin:20px auto;
position:relative;
transform:rotate(0deg);
}
#singer>img{
width:50%;
height:50%;
border-radius:50%;
position:absolute;
left:25%;
top:25%;
}
/* #singer>div{*/
/* width:100%;*/
/* height:100%;*/
/* border-radius:50%;*/
/* background-color:#fff;*/
/* opacity:0.8;*/
/* }*/
/* 时间和进度条 */
#showT{
width:300px;
height:20px;
margin:0 auto;
}
#showT>p{
width:40px;
float:left;
text-align:center;
}
/************进度条*****************/
#jindutiao{
width:200px;
height:20px;
background-color:#fff;
border-radius:10px;
float:left;
margin:0 10px;
}
#jindutiao>div{
width:0; /*可变值*/
height:20px;
border-radius:10px;
background-color:#f00;
}
/************按钮样式************/
#anniu{
width:300px;
height:80px;
margin:20px auto;
}
#anniu>img{
width:50px;
height:50px;
border-radius:50%;
margin-top:20px;
float:left;
}
#anniu>#bofang{
width:80px;
height:80px;
margin:0 60px;
}
#leftbtn{transform:rotate(180deg);}
/**************声音图标*******************/
#a>ul{
list-style:none;/*列表前面的符号看不到*/
display:none;/*不显示*/
}
#a{
width:30px;
height:150px;
top:-264px;
left:351px;
border-radius:25px;
/* background-color:#ddd;*/
position:relative;
transform:rotateZ(180deg);
float:left;
}
#a:hover{
background-color:#ddd;
}
#a:hover>ul{
display:block;
}
#shengyin{
width:10px;
height:100px;
top:35px;
left:10px;
float:left;
border-radius:25px;
position:absolute;
background-color:#fff;
z-index:1;
opacity:0.2; /*给白色进度条一个透明度*/
}
#yanse{
width:10px;
height:100px;
top:35px;
left:10px;
float:left;
border-radius:25px;
position:absolute;
background-color:green;
}
#syimg{
width:51px;
height:51px;
top:-10px;
left:-10px;
z-index:1;
position:absolute;
transform:rotateZ(180deg);
}
/************播放模式************/
#bfms{
width:300px;
margin:0 auto;
top:320px;
left:200px;
position:absolute;
text-align:center;/*文字和行内元素水平居中*/
}
#bfms>select{
width:80px;
height:22px;
border-radius:15px;/*边框圆角*/
padding-top:0px;
}
/******************歌词部分*****************/
#gc{
width:300px;
height:90px;
text-align:center;
margin:0 auto;
overflow:hidden;
}
#gcdz{
margin-top:30px;
}
#gcdz>p{
height:30px;
line-height:30px;
opacity:0.5;
}
#gcdz>p.show{
color:#f00;
opacity:0.7;
font-size:20px;
transition:all 0.3s linear;
}
</style>
<body>
<!-- 音乐播放器 -->
<div id="main">
<!-- 歌名歌单切换歌曲 -->
<div id="songlist">
<p>薛之谦 - 丑八怪</p>
<img id="changpian" src="img/a.png"> <!-- 黑胶唱片手臂 -->
<ul>
<li οnclick="songchange(this.innerHTML)">薛之谦 - 丑八怪</li>
<li οnclick="songchange(this.innerHTML)">赵雷 - 鼓楼</li>
<li οnclick="songchange(this.innerHTML)">毛不易 - 别再闹了</li>
</ul>
</div>
<!-- 歌手图片 -->
<div id="singer">
<!-- <div></div> -->
<img src="img/薛之谦 - 丑八怪.jpg">
</div>
<!-- 时间和进度条 -->
<div id="showT">
<p id="curT">0:00</p>
<div id="jindutiao">
<div></div>
</div><!--进度条-->
<p id="durT">0:00</p>
</div>
<!-- 按钮 -->
<div id="anniu">
<img id="leftbtn" src="img/qh.jpg" οnclick="leftsong()">
<img id="bofang" src="img/zt.jpg">
<img id="rightbtn"src="img/qh.jpg" οnclick="rightsong()">
</div>
<!-- 播放模式 -->
<div id="bfms" class="">
<select>
<img src="img/sxxh.jpg">
<option value="0">单曲循环</option>
<option value="1">顺序播放</option>
<option value="2">随机播放</option>
</select>
</div>
<!-- 声音控件 -->
<div id="a">
<img id="syimg" src="img/sy.png">
<ul>
<li><div id="shengyin"></div></li>
<li><div id="yanse"></div></li>
</ul>
</div>
<!-- 歌词 -->
</br>
<div id="gc">
<div id="gcdz">
<!-- <p class="show">丑八怪 - 薛之谦</p> -->
<!-- <p>作词：甘世佳</p> -->
<!-- <p>作曲：李荣浩 </p> -->
<!-- <p>如果世界漆黑 其实我很美</p> -->
<!-- <p>在爱情里面进退 最多被消费</p> -->
</div>
</div>
</div>
<!-- 音频标签 -->
<audio id="audio" src="img/薛之谦 - 丑八怪.mp3"></audio>
<!-- 歌词lrc文本内容 -->
<textarea hidden>
[00:00.63]丑八怪 - 薛之谦
[00:03.13]作词：甘世佳
[00:05.32]作曲：李荣浩
[00:16.98]
[00:20.26]如果世界漆黑 其实我很美
[00:23.88]在爱情里面进退 最多被消费
[00:27.70]不管同样的是非
[00:29.69]又怎么不对 无所谓
[00:35.69]如果像你一样 总有人谄媚
[00:39.32]围绕着我的卑微 也许能消退
[00:43.32]其实我并不在意 有很多机会
[00:46.69]像巨人一样的无畏
[00:49.51]放纵我心里的鬼
[00:51.20]可是我不配
[00:54.46]丑八怪 能否别把灯打开
[01:02.21]我要的爱 出没在漆黑一片的舞台
[01:09.46]丑八怪 在这暧昧的时代
[01:17.58]我的存在 像意外
[01:24.48]
[01:37.79]有人用一滴泪 会红颜祸水
[01:41.35]有人丢掉称谓 什么也不会
[01:45.29]只要你足够虚伪
[01:47.10]就不怕魔鬼 对不对
[01:53.05]如果剧本写好 谁比谁高贵
[01:56.74]我只能沉默以对 美丽本无罪
[02:00.63]当欲望开始贪杯 有更多机会
[02:04.07]像尘埃一样的无畏
[02:06.89]化成灰谁认得谁管他配不配
[02:08.65]
[02:11.96]丑八怪 能否别把灯打开
[02:19.52]我要的爱 出没在漆黑一片的舞台
[02:26.83]丑八怪 在这暧昧的时代
[02:34.96]我的存在 不意外
[02:42.33]
[03:01.96]丑八怪 其实见多就不怪
[03:09.96]放肆去high 用力踩
[03:14.15]那不堪一击的洁白
[03:17.21]丑八怪 这是我们的时代
[03:25.48]我不存在 才意外
</textarea>
<textarea hidden>[00:00.40]赵雷 - 鼓楼
[00:01.06]作词：赵雷
[00:01.26]作曲：赵雷
[00:01.46]编曲：赵雷、喜子
[00:01.81]制作人：赵雷、喜子、姜北生
[00:02.31]贝斯：张岭
[00:02.51]鼓：贝贝
[00:02.66]电琴：喜子
[00:02.86]箱琴：赵雷
[00:03.06]口琴：赵雷
[00:03.26]MIDI：喜子
[00:03.46]和声：赵雷、孙嫣然、唐宁
[00:26.14]我走在鼓楼下面
[00:31.66]路在堵着
[00:34.28]雨后的阳光散落
[00:38.56]人们都出来了
[00:42.36]执着的迷惘的
[00:47.79]文艺青年很多
[00:50.39]如果我无聊了就会来这里坐坐
[00:58.39]我是个沉默不语的靠着墙壁
[01:03.49]晒太阳的过客
[01:06.48]如果我有些倦意了
[01:09.98]就让我在这里独自醒过
[01:15.18]我站在鼓楼上面
[01:19.29]一切繁华与我无关
[01:23.19]这是个拥挤的地方
[01:27.26]而我却很平凡
[01:47.28]我走在鼓楼下面
[01:53.08]淋湿的咖啡馆
[01:55.29]睡不着的后海边
[01:58.99]月亮还在抽着烟
[02:03.49]喝醉的亲吻着
[02:09.05]快活的人不眠
[02:11.61]唯有我倚着围栏
[02:15.06]对过往说晚安
[02:21.51]晚安
[02:52.39]我是个沉默不语的靠着车窗
[02:57.39]想念你的乘客
[03:00.25]当一零七路再次经过
[03:04.35]时间是带走青春的电车
[03:09.08]我站在什刹海边
[03:13.14]一切甜蜜与我无关
[03:17.04]这是个拥挤的地方
[03:21.14]而我却很孤单
[03:24.65]我在鼓楼
[03:28.85]我在鼓楼
[03:32.80]我在鼓楼
[03:40.86]我在鼓楼
[03:45.12]我在鼓楼
[03:49.02]我在鼓楼</textarea>
<textarea hidden>
[00:00.00]《别再闹了》
[00:03.00]演唱：毛不易
[00:06.00]作词/作曲：小柯
[00:09.00]
[00:12.00]
[00:15.00]
[00:16.80]我们聊些 有趣的事情
[00:20.85]别把气氛弄的 如此低沉
[00:25.31]我知道 这几天你心烦
[00:29.76]每个人的活 都不简单
[00:32.49]
[00:33.19]我知道 如果把你换做我
[00:37.93]我也会冲动 也会不安
[00:41.83]即使天塌了 还有我在身边
[00:46.59]没有什么 不解的难
[00:50.54]
[00:51.24]外面纷纷扰扰 里面乱乱糟糟
[00:55.05]我们别再闹了
[00:58.55]这个冬天 已然很冷了
[01:02.74]我们靠在一起 好吗
[01:07.03](Music)
[01:21.92]我们聊些 有趣的事情
[01:26.05]别把气氛弄的 如此低沉
[01:30.51]我知道 这几天你心烦
[01:34.96]每个人的活 都不简单
[01:39.03]
[01:39.73]外面纷纷扰扰 里面乱乱糟糟
[01:43.38]我们别再闹了
[01:47.08]现实生活 本来已很累了
[01:51.54]把你的手给我吧
[01:55.90]
[01:56.60]外面纷纷扰扰 里面乱乱糟糟
[02:00.18]我们别再闹了
[02:03.83]这个冬天 已然很冷了
[02:08.17]我们靠在一起 好吗
[02:13.35](Music)
[02:28.32]外面纷纷扰扰 里面乱乱糟糟
[02:31.70]我们别再闹了
[02:35.41]这个冬天 已然很冷了
[02:39.70]我们靠在一起 好吗
[02:44.24]
[02:44.94]外面纷纷扰扰 里面乱乱糟糟
[02:48.56]我们别再闹了
[02:52.27]现实生活 本来已很累了
[02:56.79]把你的手给我吧
[03:00.04]
[03:00.74]这个冬天 已然很冷了
[03:05.05]我们靠在一起 好吗
[03:09.98]
[03:12.00]
</textarea>
<script>
// 歌名歌单切换歌曲
// 点击p显示ul
var pshow = document.querySelector("#songlist>p");/*找到歌的标题*/
var audio = document.getElementById("audio");
pshow.οnclick=function(){
document.querySelector("#songlist>ul").style.display = "block";
}
//点击ul中的li ul不显示 p里面内容变化 歌名切换 歌曲，歌手图片切换
function songchange(obj){
document.querySelector("#songlist>ul").style.display = "none";
//歌名的切换
pshow.innerHTML=obj;
//播放的歌曲切换
audio.src ="img/"+obj+".mp3"
//歌手图片切换
// document.getElementById("singer").style.backgroundImage ="url('img/"+obj+".jpg')";
document.querySelector("#singer>img").src="img/"+obj+".jpg";
//暂停的状态
zt();
//歌手旋转角度归零
deg =0;
document.querySelector("#singer").style.transform = "rotate(0deg)";
// 时间归零
document.getElementById("curT").innerHTML = "0:00";
document.getElementById("durT").innerHTML = "0:00";
// 进度条归零
document.querySelector("#jindutiao>div").style = "width:0px";
歌词的切换///
var s = pshow.innerHTML;
//遍历数组 for循坏
for(var i=0;i<3;i++){
if(songarr[i]==s){
var geci=i;//获取正在播放的歌曲名在数组songarr中的下标
}
}
// console.log(geci);
getgc(geci);
}
//歌手图片旋转
var deg = 0;//自定义图片旋转角度
function imgrotate(){
deg+=3;
document.querySelector("#singer").style.transform = "rotate("+deg+"deg)";
}
var timer1 = null;//定义变量等待接受定时器
var timer2 = null
//播放
function bf(){
audio.play();
document.getElementById("bofang").src="img/bf.jpg";
timer1 = setInterval(imgrotate,100);
document.querySelector("#changpian").style.transform = "rotate(5deg)";
showT();//先调用时间显示函数
timer2 = setInterval(showT,1000);
}
//暂停
function zt(){
audio.pause();
document.getElementById("bofang").src="img/zt.jpg";
document.querySelector("#changpian").style.transform = "rotate(-45deg)";
clearInterval(timer1);
clearInterval(timer2);
}
//播放暂停按钮效果
document.getElementById("bofang").onclick =function(){
//判断，音频文件audio处于播放状态还是暂停状态
if(audio.paused){
//如果是暂停就播放
bf();
}
else{
//如果是播放就暂停
zt();
}
}
//定义一个所有歌名的清单，清单有顺序的 数组[1,2,5]
var songarr=["薛之谦 - 丑八怪","赵雷 - 鼓楼","毛不易 - 别再闹了"];
//上一首切换歌曲，songchange（obj）；
function leftsong(){
//正在播放的歌名 pshow.innerHTML
var songbf = pshow.innerHTML;
//console.log(songbf);
//遍历数组 for循坏
for(var i=0;i<3;i++){
if(songarr[i]==songbf){
var num=i;//获取正在播放的歌曲名在数组songarr中的下标
}
}
//下标数字减1，对应上一首歌歌名
if(num==0){
num = num+2;
}
else{
num = num-1;
}
// 把要切换的歌名给换歌的函数songchange
songchange(songarr[num]);
}
function rightsong(){
//正在播放的歌名 pshow.innerHTML
var songbf = pshow.innerHTML;
//console.log(songbf);
//遍历数组 for循坏
for(var i=0;i<3;i++){
if(songarr[i]==songbf){
var num=i;//获取正在播放的歌曲名在数组songarr中的下标
}
}
//下标数字减1，对应上一首歌歌名
if(num==2){
num = num-2;
}
else{
num = num+1;
}
// 把要切换的歌名给换歌的函数songchange
songchange(songarr[num]);
}
// 时间和进度条
function showT(){
var curT = audio.currentTime;//获取当前播放时间(秒)
var curTM = parseInt(curT/60);//通过取整获取当前分钟
var curTS = parseInt(curT%60);//通过取余数在取整获取当前秒
if(curTS<10){
curTS = "0"+curTS;
}
document.getElementById("curT").innerHTML = curTM+":"+curTS;
var durT = audio.duration;//获取总时长(秒)
var durTM = parseInt(durT/60);//通过取整获取总时长分钟
var durTS = parseInt(durT%60);//通过取余数在取整获取总时长秒
if(durTS<10){
durTS = "0"+durTS;
}
document.getElementById("durT").innerHTML = durTM+":"+durTS;
// 进度条的显示
var num = curT/durT*200;
document.querySelector("#jindutiao>div").style = "width:"+num+"px";
}
// 点击进度条控制音乐播放的快进和快退
document.getElementById("jindutiao").onclick = function(event){
// console.log(event.offsetX);
//进度条显示。鼠标点击的位置event.offsetX
document.querySelector("#jindutiao>div").style = "width:"+event.offsetX+"px";
//调整音乐播放当前时长
audio.currentTime = event.offsetX/200*audio.duration;
//当前播放时间显示发生变化
showT();
}
// 点击进度条控制音乐音量的大小
document.getElementById("shengyin").onclick = function(event){
//console.log(event.offsetY);
//进度条显示。鼠标点击的位置event.offsetY
document.querySelector("#yanse").style = "height:"+event.offsetY+"px";
//调整音乐声音长短
audio.volume = event.offsetY/100*1;
//当前播放时间显示发生变化
}
// 键盘控制声音大小：向上 音量变大 向下 音量变小
// 键盘控制音乐播放的宽进快退 向左 快退 向右 快进
var x = 1;//空格控制音乐的暂停播放的变量
document.onkeydown = function(){
//判断一下，按的是哪个键
if(event.keyCode == 38){
//对最大音量做个限制和判断
if(audio.volume<0.95){
audio.volume +=0.05;
document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/
}
else{
audio.volume = 1;
document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/
}
}
else if(event.keyCode == 40){
//对最小音量做个限制和判断
if(audio.volume>0.05){
audio.volume -=0.05;
document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/
}
else{
audio.volume = 0;
document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/
}
}
else if(event.keyCode == 37){
//对歌曲左右进度条做个限制和判断
if(audio.currentTime>5){
audio.currentTime -=5;
}
else{
audio.currentTime = 0;
}
showT();
}//对歌曲左右进度条做个限制和判断
else if(event.keyCode == 39){
if(audio.currentTime<audio.duration-5){
audio.currentTime +=5;
}
else{
audio.currentTime = audio.duration;
// zt();
// audio.currentTime=0;
}
showT();
}
else if(event.keyCode == 32){//键盘空格控制音乐播放暂停
if(x==1){
zt();
x -= 1;
}
else if(x==0)
{
bf();
x+=1;
}
}
//console.log(audio.currentTime);//控制台调试
}
//播放模式功能
audio.onended = function(){
//先暂停
zt();
//判断一下，现在是哪种模式？
var value = document.querySelector("#bfms>select").value;
//console.log(value);控制台输出是哪种模式
if(value==0){
//单曲循环
}else if (value==1){
//顺序播放 下一首切换
rightsong();
}
else if (value==2){
//随机播放 歌单中随意一首歌
var num =parseInt(Math.random()*3);//0,1,2 0~3
//把要切换的歌名给函数songchange
songchange(songarr[num]);
}
//最后在播放
bf();
}
歌词高亮滚动效果
var gctime = [];//定义数组接收歌词对应时间
var gcarr = [];//定义数组接收歌词对应文本
//定义获取歌词函数 把lrc内容转换成五个数组 动态加载歌词
function getgc(i){
//两个数组初始化
gctime=[];
gcarr =[];
//通过标签名称获取元素放置集合中，下标为0的元素的网页显示内容
var gctext = document.getElementsByTagName("textarea")[i].innerHTML;
gctext = gctext.split("\n");//以换行分隔字符串，返回值为数组
//console.log(gctext);
//遍历数组找那个每一个元素，处理元素字符串
gctext.map(function(item){
var msnum = item.slice(item.indexOf("[")+1,item.indexOf("]"));//分秒结构
//console.log(msnum.split(":")[0],msnum.split(":")[1]);
num = (msnum.split(":")[0]*60+Number(msnum.split(":")[1]-0.5));//分钟数*60+秒钟数 Number 把括号中的转为数字
gctime.push(num);
gcarr.push(item.slice(item.indexOf("]")+1));
});//map遍历数组 JavaScript语法ES5
//歌词袋子中，初始化
document.getElementById("gcdz").innerHTML = "<p class='show'></p>";
//动态加载歌词
gcarr.map(function(item){
//新建一个P标签
var p = document.createElement("p");
//p添加网页显示内容，每句歌词
p.innerHTML = item;
//新建的P标签放到
document.getElementById("gcdz").appendChild(p);
});
}
//首先给歌词初始化 第一首歌的歌词
var geci = 0;
getgc(geci);
console.log(gctime,gcarr);
//歌词高亮滚动
audio.ontimeupdate = function(){
var index = 0;//定义gctime数组下标，初始值为0
while(audio.currentTime>gctime[index]){
index ++;
}
//获取到整在播放的歌词下标 index-1
//console.log(index);
//在上面的获取歌词中，gcdz里初始化添加了一个空的P标签class=show
//歌词滚动
var num=30-30*index;
document.getElementById("gcdz").style = "margin-top:"+num+"px";
//高亮状态 下标index-1 父元素的第 index个子元素
document.querySelector("#gcdz>p.show").className = ""; //清除之前红色的清除 class=show清除
document.querySelector("#gcdz>p:nth-child("+(index+1)+")").className = "show";//添加
}
</script>
</body>
</html>
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
