音乐播放器

来源：互联网发布：苹果医药软件编辑：程序博客网时间：2024/06/07 00:23
<!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  jshtml canvas (2d  3d  像素的解析 html5 网页游戏开发) jshtml+css  +js  javase  jsp  sshhtml +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" onclick="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.onload= 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.71var 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