<!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音乐播放器的更多相关文章

  1. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  2. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  3. Asp.Net MVC中Aplayer.js音乐播放器的使用

    1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...

  4. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  5. js 音乐播放器

    在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好. 好了,那我们开始做这个音乐播放器 ...

  6. js音乐播放器【简洁】

    辞职的第二天没有去找工作还,准备回家. 但到了火车站才发现沃特玛的买的票不是在这个火车站坐. 这就耽误了行程...... 说出来真舒服!!!淦 代码 这里已经上传到码云了,大家可以直接引用. 目前只有 ...

  7. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  8. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  9. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

随机推荐

  1. 目前比较流行的Python科学计算发行版

    经常有身边的学友问到用什么Python发行版比较好? 其实目前比较流行的Python科学计算发行版,主要有这么几个: Python(x,y) GUI基于PyQt,曾经是功能最全也是最强大的,而且是Wi ...

  2. Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题

    细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!   在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...

  3. IIS发布网站，浏览网站时候，出现 试图加载格式不正确的程序。

    异常来自HRESULT:0x8007000B 缘由:在64位操作系统下IIS发布32位的项目,报“项目依赖的dll无法读取,试图加载格式不正确的程序”错误. 原因:程序集之间的通讯要么全是64位环境下 ...

  4. 手机APP下单支付序列图

    今天安装了Visio,学习了下如何使用,画了一下公司现在项目的下单支付序列图,话就不多说了,直接上图,处女作,欢迎指正!

  5. 增删查改-MySQL

    查询: 在MySQL中,select的基本语法形式: select 属性列表 from 表名和视图 [where 条件表达式] [group by 属性名 [having 条件表达式]] [order ...

  6. BT是如何下载的

    BT协议简介 一.BT下载是怎么来的? 在互联网上下载文件的方式大概有这么几种:FTP.HTTP.BT.eMule(电驴)等, 浏览器会直接支持FTP和HTTP下载,BT和eMule下载一般需要专用的 ...

  7. Code First 启用迁移时出错 HRESULT:0x80131040

    问题:Enable-Migrations 使用“8”个参数调用“CreateInstanceFrom”时发生异常 (异常来自 HRESULT:0x80131040) PM> Enable-Mig ...

  8. SQL 语句中的union操作符

    前端时间,用到了union操作符,周末有时间总结下,w3c手册内容如下: SQL UNION操作符 UNION操作符用于合并两个或多个select语句的结果集. 注意:UNION内部select语句必 ...

  9. infiniband学习总结

    一．什么是infiniband InfiniBand架构是一种支持多并发链接的“转换线缆”技术,它是新一代服务器硬件平台的I/O标准.由于它具有高带宽.低延时. 高可扩展性的特点,它非常适用于服务器与 ...

  10. Linux 中 crontab 详解及示例

    cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务: /sbin/service c ...