<!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. 大约PF_RING/Intel 82599/透明VPN一些事

    接近崩溃的边缘,如今,在医院这篇文章地方的想法,小病,我宁愿不吃药瓶.一台笔记本电脑,但无法上网,我不称职.想知道的东西.唯一可用3G,不开的热点.由于没人给我报销流程.这个周末,我只有一天,由于下雨 ...

  2. javascript 10进制和64进制的转换

    原文:javascript 10进制和64进制的转换 function string10to64(number) { var chars = '0123456789abcdefghigklmnopqr ...

  3. js实现是倒计时功能

    工作中经常用到倒计时的功能,最近在整理之前做的项目的时候,发现自己写过一个倒计时的功能的效果,这里和大家分享下!实现这个功能是用原生js写的,不需要加载额外的库文件!功能比较简单,但是可以在此基础上扩 ...

  4. 增强型for语句与java,c#的不同之处,with语句的使用

    <script type="text/javascript" language="javascript"> //遍历数组 var arr = [&q ...

  5. Mvc快速开发

    Asp.Net Mvc + ComBoost.Mvc快速开发   ComBoost项目地址 http://comboost.wodsoft.com https://github.com/Kation/ ...

  6. NPOI 2.0 Excel读取显示

    NPOI 2.0 Excel读取显示   最近接到需求,需要把excel表格里的数据原样展示到web页面,主要是满足随意跨行跨列. 之前用过一点NPOI,不过接触的不太多,趁这次机会再熟悉一下.由于操 ...

  7. 建立Ftp站点

    建立Ftp站点步骤: 1.首先创建一个用户 我的电脑右键->管理->本地用户和组->用户->“右键”新建用户->输入用户名和密码再点创建就行了! 2.其次是在C盘新建文件 ...

  8. HTML5 CANVAS制图 基础总结

    一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...

  9. VS2012的安装项目只能用InstallShield Limited Edition

    [吐槽]VS2012的安装项目只能用InstallShield Limited Edition[附资源下载]   以前版本的Visual Stuido中安装项目都可以使用微软自家的Visual Stu ...

  10. 微信移动支付V3开发详细教程服务端采用.net mvc webapi（C#）

    转自:http://www.kwstu.com/ArticleView/netmvc_201511132050268716 最近开发手机app需要实现移动支付功能,由于考虑支付安全将微信支付生成签名写 ...