<!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. js获取最近几天的日期（转载）

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. jQuery在线选座订座（影院篇）

    原文:jQuery在线选座订座(影院篇) 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选 ...

  3. Solr 教程

    1.Solr安装 下载jdk-8u111-windows-i586_8.0.1110.14 下载solr-6.3.0.zip 2.配置JAVA_HOME 在"系统变量"中,设置3项 ...

  4. easyui datagrid 前台分页

    核心方法 //分页data function pagerFilter(data, pagegrid) { if (typeof data.length == 'number' && t ...

  5. 读书笔记—CLR via C#线程25-26章节

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  6. linux 启动oracle报cannot restore segment prot after reloc: Permission denied

    error while loading shared libraries: $ORACLE_HOME/lib/libnnz10.so: cannot restore segment prot afte ...

  7. HFile文件解析异常解决

    1. 场景说明 需要对离线的 HFile 进行解析,默认可以使用如下的方式: hbase org.apache.hadoop.hbase.io.hfile.HFile -f $HDFS_PATH -p ...

  8. FormsAuthentication登录ReturnUrl使用绝对路径

    ASP.NET]更简单的方法:FormsAuthentication登录ReturnUrl使用绝对路径   被这个问题困扰多年,今天终于找到了更简单的解决方法,分享一下. 问题场景 假设我们在i.cn ...

  9. IOC and DI

    Spring.Net 技术简介 IOC and DI   一 简单介绍            IOC 控制转移,就是将创建放到容器里,从而达到接耦合的目的,DI是 在容器创建对象的时候,DI读取配置文 ...

  10. [转]Inside Swift

    原文地址:http://www.eswick.com/2014/06/inside-swift/   Inside Swift Swift is Apple's new programming lan ...