音乐播放器

最新推荐文章于 2023-05-29 09:00:08 发布

不是我的货

最新推荐文章于 2023-05-29 09:00:08 发布

阅读量498

点赞数

分类专栏： css3 html 文章标签： html

本文链接：https://blog.csdn.net/wym1581/article/details/50421107

版权

html 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
ul,li {
	list-style: none;
}
body{
	background: url(images/bg.jpg);
	font-family: "微软雅黑";
	font-size: 16px;
	color: green;
}
.phone{
	width: 322px;
	height: 634px;
	margin: 30px auto;
	font-family: "微软雅黑";
	position: relative;
}
.phone .p_top{
	height: 42px;
	background: url(images/phone_top.png);
}
.phone .p_info{
	height: 20px;
	background: url(images/top.gif);
}
.phone .p_title{
	width:320px;
	height: 40px;
	line-height: 40px;
	background: #000;
	font-size: 20px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	color: #666;
	text-align: center;
}
.phone .p_con{
	width: 320px;
	height: 486px;
	background: url(images/1.jpg);
	background-size: cover;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.phone .p_bottom{
	height: 47px;
	background: url(images/phone_bottom.png);
}
.phone .p_music{
	width: 40px;
	height: 40px;
	display: block;
	background: url(images/normalmusic.svg);
	background-size:cover;
	position: absolute;
	top: 118px;
	right: 14px;
}
textarea{
	display: none;
}
#lrclist {
	width: 320px;
	height: 486px;
	overflow: hidden;  /* 溢出隐藏 还带有清除浮动的效果*/ 
	transition: all 0.3s ease;
	position: absolute;
}
#lrclist li {
	transition: all 0.3s ease;
	height: 24px;
	padding: 8px;
	text-align: center;
}
#lrclist li.hover{
	color: red;
	font-size: 24px;
}
/*
	 1.谁要定位 给谁一个absolute
	 2.相对谁定位 给谁一个relative

	   学知识不用等于没学
	   用不好等于没学会
		
		js 
		c++  asp   java  js
		html canvas (2d  3d  像素的解析 html5 网页游戏开发) js

		html+css  +js  javase  jsp  ssh

		html +css js css3  html5 
		js 
		animate.css
*/
</style>
</head>
<body>
	<div class="phone">
		<div class="p_top"></div>
		<div class="p_info"></div>
		<div class="p_title">咱们结婚吧</div>
		<div class="p_con">
			<ul class="c_lists">
				<li class="c_list" style="position: absolute;">
					<ul id="lrclist">
					</ul>
				</li>
				<li ></li>
				<li ></li>
			</ul>
		</div>
		<div class="p_bottom"></div>
		<a href="#" class="p_music" οnclick="lrc.play()"></a>
	</div>
	<textarea id="lrcnt" >
		[00:00.00]咱们结婚吧
		[00:03.59]演唱：齐晨
		[00:04.71]
		[00:19.45]洁白的婚纱手捧着鲜花
		[00:23.94]美丽得像童话
		[00:28.11]想起那年初夏我为你牵挂
		[00:32.44]在一起就犯傻
		[00:34.91]丘比特轻轻飞过月光下
		[00:39.25]潘多拉她听到了回答
		[00:43.61]礼堂钟声在敲打幸福的密码
		[00:52.43]哦My Love咱们结婚吧
		[00:56.95]好想和你拥有一个家
		[01:00.87]这一生最美的梦啊
		[01:05.53]有你陪伴我同闯天涯
		[01:09.50]哦My Love咱们结婚吧
		[01:14.10]我会用一生去爱你的
		[01:18.50]我愿把一切都放下
		[01:22.99]给你幸福的家
		[01:27.40]
		[01:47.31]洁白的婚纱手捧着鲜花
		[01:51.78]美丽得像童话
		[01:56.03]想起那年初夏我为你牵挂
		[02:00.41]在一起就犯傻
		[02:02.60]丘比特轻轻飞过月光下
		[02:07.27]潘多拉她听到了回答
		[02:11.46]礼堂钟声在敲打幸福的密码
		[02:20.19]哦My Love咱们结婚吧
		[02:24.85]好想和你拥有一个家
		[02:28.77]这一生最美的梦啊
		[02:33.39]有你陪伴我同闯天涯
		[02:37.35]哦My Love咱们结婚吧
		[02:41.97]我会用一生去爱你的
		[02:46.31]我愿把一切都放下
		[02:50.80]给你幸福的家
		[02:54.88]
		[02:56.46]哦My Love咱们结婚吧
		[03:01.30]好想和你拥有一个家
		[03:05.21]这一生最美的梦啊
		[03:09.92]有你陪伴我同闯天涯
		[03:13.77]哦My Love咱们结婚吧
		[03:18.38]我会用一生去爱你的
		[03:22.66]我愿把一切都放下
		[03:27.35]给你幸福的家
		[03:31.01]
	</textarea>
	<audio id="audio" src="mp3/1.mp3" controls=""></audio>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		};	
		var audioDom = $("audio");//获得音乐播放器的对象
		window.οnlοad= function(){
			lrc.init($("lrcnt").value);
			// 歌词的监听
			audioDom.addEventListener("timeupdate",function(){
				var t = parseInt(this.currentTime);
				//console.log(t+"==="+this.currentTime);
				lrc.jump(t);
			});
		};
		var lrc = {
			regex_trim: /^\s+|\s$/,//
			// 歌词解析 
			init: function(lrctxts){
				// 把歌词分割成一个数组元素  
				var txts = lrctxts.split("\n");
				var html = "";
				// 遍历数组得到每一个元素 歌词
				for ( var i=0; i<txts.length ; i++ ){
					//  去除歌词的空格
					var  item =txts[i].replace(this.regex_trim,"");
					// 歌词和时间的分割
					var ms = item.split("]");
					// 把歌词的时间转化成秒 绑定给对应的歌词,实现联动
					var mt = ms[0].replace("[","").split(":");//00:03.59 分秒毫秒 00:04.71
					var m =parseInt(mt[0]*60+mt[1]*1);//取秒，如00:03.59 中mt[0]为00，mt[1]为03
					// 获取歌词
					var txt = ms[1];
					if (txt!="")
					{
						html +="<li id='t_"+m+"'>"+txt+"</li>";
					}
				}
				$("lrclist").innerHTML+= html;
			},
			jump: function(duration){
				//console.log(duration);
				var dom = $("t_"+duration);
				var lrcbox = $("lrclist");
				
				if (dom)//去空
				{
					var arr= this.siblings(dom);
					for (var i = 0; i<arr.length ; i++ )
					{
						arr[i].className = "";//播放过的去掉样式
					}
					dom.className = "hover";
					var index = this.indexof(dom);
					lrcbox.style.marginTop= (index<0? 0:index)*-40+"px";
				}
			},
			// 监听当前的播放元素，获取下标
			indexof: function(dom){
				var  listDoms = dom.parentElement.children;	
				var index = 0;
				// 遍历获取当前播放的歌词 并返回他的时间 
				for (var i = 0; i< listDoms.length; i++)
				{
					if (listDoms[i] == dom)
					{
						index = i;
						break;
					}
				}
				return index;
			},
			siblings: function(dom){
				var  listDoms = dom.parentElement.children;	
				var arr = [];
				// 遍历获取当前播放的歌词 并返回他的时间 
				for (var i = 0; i< listDoms.length; i++)
				{
					if (listDoms[i] != dom)
					{
						arr.push(listDoms[i]);
					}
				}
				return arr;
			},
			play: function(){
					audioDom.play();
			},
			toggle: function(){
				
			}
		};
	
	</script>
</body>
</html>

不是我的货

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
音乐播放器

Document*{ margin: 0; padding: 0;}ul,li { list-style: none;}body{ background: url(images/bg.jpg); font-family: "微软雅黑"; font-size: 16px; color: green;}.phone{ width: 322px; height: 634
复制链接

扫一扫

专栏目录