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音乐播放器的更多相关文章
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- js 音乐播放器
在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好. 好了,那我们开始做这个音乐播放器 ...
- js音乐播放器【简洁】
辞职的第二天没有去找工作还,准备回家. 但到了火车站才发现沃特玛的买的票不是在这个火车站坐. 这就耽误了行程...... 说出来真舒服!!!淦 代码 这里已经上传到码云了,大家可以直接引用. 目前只有 ...
- 原生JS实现音乐播放器！
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
- 小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...
- JS实现音乐播放器
JS实现音乐播放器 前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
随机推荐
- [LeetCode] ZigZag Conversion [9]
称号 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows li ...
- 安装uBuntu操作系统 - 初学者系列 - 学习者系列文章
uBuntu是一款不错的Linux操作系统,在上面的应用软件不少,就是说它的支持率挺高.下面就对这款操作系统的安装做下介绍. 1. 下载uBuntu安装文件 打开中文页面.http://www.ub ...
- NFTS数据流
NFTS数据流 NTFS交换数据流(alternate data streams,简称ADS)是NTFS磁盘格式的一个特性,在NTFS文件系统下,每一个文件都能够存在多个数据流,就是说除了主文件流之外 ...
- Office文档在线编辑的实现之二
讲述了如何通过iis的webdav支持实现客户端的office直接编辑服务器上的文件,本篇将讲解如何实现客户端的office直接编辑数据库中的二进制形式保存的office文件. 实现的关键:模拟IIS ...
- Android有关Volley使用（十）至Request和Reponse意识
我们知道,.网络Http沟通,会有一个Request,相同,也将有Response.我们Volley在使用RequestQueue来之前加入的请求.我们将创建一个Request对象,例StringRe ...
- ThoughtWorks Merchant's Guide To The Galaxy
ThoughtWorks笔试题之Merchant's Guide To The Galaxy解析 一.背景 在某网站上看到ThoughtWorks在武汉招人,待遇在本地还算不错,就投递了简历.第二天H ...
- redmine的邮件配置
redmine的邮件配置 2012-01-04 18:09:21| 分类: 默认分类|举报|字号 订阅 redmine里要用到邮件通知,本来以为很是简单,网上也有许多教程,谁知忙活了一下午, ...
- 使用ServletConfig获得web.xml资源中的参数
适用:一些不需要再Servlet文件中初始化的可以使用,例如:数据库用户名和密码 //Servlet文件 //实例化ServletConfig对象 ServletConfig servletConf ...
- 编写Windows Service 备忘
项目需求要做一个定时扫表,将按条件查询到的数据插入或者更新到另一个数据表的需求,老大要求让用window service来做 因为以前没有做过,把这次的经历写出来.作为备忘. 1.什么是windows ...
- vs2012快速将项目托管到github
vs2012快速将项目托管到github 在VS2012中使用GitHub 注册GitHub账号(DeanZhouLin) https://github.com/ 向GitHub中添加一个仓库(T ...