js音乐播放器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js音乐播放器相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
*
{
margin:0;/*外边距*/
padding:0;/*内边距*/
}
#photo
{
width:320px;
height:600px;
background:#000;
margin:5px auto;
}
.top
{
width:320px;
height:23px;
background:url("img/1.png");
}
.title
{
width:320px;
height:30px;
background:url("img/2.png");
color:#ccc;
text-align:center;
font-size:24px;
font-weight:bold;
}
.singer
{
width:320px;
height:30px;
color:#ccc;
text-align:center;
font-size:14px;
font-weight:bold;
line-height:30px;
}
.play
{
width:190px;
height:190px;
background:url(img/3.png);
margin:20px auto;
border-radius:50%;
}
.lrc
{
width:300px;
height:264px;
/*border:1px solid red;*/
margin:auto;
text-align:center;
color:#ccc;
font-size:12px;
line-height:20px;
overflow:hidden;
}
/*用一个类名保存旋转功能*/
.rotate
{
animation:rot 5s linear infinite; /*名称，时间，速度曲线（匀速），无限重复*/
}
@keyframes rot
{
0%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(360deg);
}
}
#lrc
{
display:none;
}
.content
{
position:relative;/*相对定位*/
left:0;
top:0px;
}
</style>
</head>
<body>
<div id="photo">
<div class="top"></div>
<div class="title">小幸运</div>
<div class="singer">谭佳伟</div>
<div class="play"></div>
<div class="lrc">
<div class="content"></div>
</div>
</div>
<audio src="muic/谭嘉仪-小幸运.mp3" id="myMusic"></audio>
<textarea id="lrc">
[00:00.64]小幸运 - 谭嘉仪
[00:02.15]词：徐世珍&吴辉福
[00:03.70]曲：JerryC
[00:04.14]编曲：JerryC
[00:13.77]我听见雨滴落在青青草地
[00:19.89]我听见远方下课钟声响起
[00:25.74]可是我没有听见你的声音
[00:30.74]认真 呼唤我姓名
[00:37.92]爱上你的时候还不懂感情
[00:44.12]离别了才觉得刻骨 铭心
[00:50.09]为什么没有发现遇见了你
[00:54.70]是生命最好的事情
[01:00.30]也许当时忙着微笑和哭泣
[01:06.36]忙着追逐天空中的流星
[01:12.12]人理所当然的忘记
[01:16.55]是谁风里雨里一直默默守护在原地
[01:24.44]原来你是我最想留住的幸运
[01:29.69]原来我们和爱情曾经靠得那么近
[01:35.67]那为我对抗世界的决定
[01:40.29]那陪我淋的雨
[01:43.28]一幕幕都是你 一尘不染的真心
[01:50.60]与你相遇 好幸运
[01:53.96]可我已失去为你泪流满面的权利
[01:59.98]但愿在我看不到的天际
[02:04.63]你张开了双翼
[02:07.68]遇见你的注定 她会有多幸运
[02:27.28]青春是段跌跌撞撞的旅行
[02:33.44]拥有着后知后觉的美丽
[02:39.55]来不及感谢是你给我勇气
[02:44.22]让我能做回我自己
[02:49.72]也许当时忙着微笑和哭泣
[02:55.55]忙着追逐天空中的流星
[03:01.61]人理所当然的忘记
[03:06.03]是谁风里雨里一直默默守护在原地
[03:13.79]原来你是我最想留住的幸运
[03:19.05]原来我们和爱情曾经靠得那么近
[03:25.17]那为我对抗世界的决定
[03:29.68]那陪我淋的雨
[03:32.56]一幕幕都是你 一尘不染的真心
[03:39.89]与你相遇 好幸运
[03:43.40]可我已失去为你泪流满面的权利
[03:49.32]但愿在我看不到的天际
[03:53.97]你张开了双翼
[03:56.98]遇见你的注定
[04:00.47]Oh 她会有多幸运
</textarea>
<script>
//先获取点击元素
var btn = document.getElementsByClassName(‘play‘)[0];
var mymusic = document.getElementById("myMusic");
var con = document.getElementsByClassName(‘content‘)[0];
//同一个按钮要实现两个功能（播放和暂停）做一个标记来存储点击暂停
var onOff = true;//自定义一个开关
btn.onclick = function () {//点击实现播放暂停功能
if (onOff) {
mymusic.play();
onOff = false;//把开关设为假
//添加rotate的类名
this.className = ‘play rotate‘;
}
else {
mymusic.pause();//暂停
onOff = true;
//去掉rotate的类名
this.className = "play";
}
}
//获取歌词文本
var txt = document.getElementById("lrc");
var lrc = txt.value;//获取文本域的值
// console.log(lrc);//在控制台输出
var lrcArr = lrc.split("[");//去除[
var html = "";//定义一个空变量保存文本
for (var i = 0; i < lrcArr.length; i++)
{
var arr = lrcArr[i].split("]");
var allTime = arr[0].split(".");
var time = allTime[0].split(":");
//把时间转化为秒钟
var timer = time[0] * 60 + time[1] * 1;
var text = arr[1];//文本
if (text)
{
//用一个p标签来保存具体的
html +="<p id="+timer+">"+text+"</p>"
}
con.innerHTML = html;//把html文本添加到歌词盒子里
}
var oP = con.getElementsByTagName("p");//根据标签名
var num = 0;
//监听音乐播放进度实现歌词同步
mymusic.addEventListener("timeupdate", function () {
//获取当前播放时间
var curTime = parseInt(this.currentTime);
//把当前时间和p标签的id名进行对比，如果相同标签变色
if (document.getElementById(curTime))
{
for (var i = 0; i < oP.length; i++) {
oP[i].style.cssText = "color:#ccc;font-size:12px;";
}
document.getElementById(curTime).style.cssText = "color:rgb(242,110,111);font-size:18px;"
if (oP[num+7].id == curTime) {//判断成功一次num+1下次虽然curtime可能不变但是num变了 ，所以就每次只能判断成功一次
con.style.top= -20 * num + "px";
num++;//
}
}
})
//监听歌曲播放完成，停止旋转
mymusic.addEventListener("ended", function () {
btn.className = "play";
onOff = true;
con.style.top = 0;
this.currentTime = 0;
})
</script>
</body>
</html>
以上是关于js音乐播放器的主要内容，如果未能解决你的问题，请参考以下文章
❤️使用 HTMLCSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️