原生JS实现网页手机音乐播放器 歌词同步播放的示例


Posted in Javascript onFebruary 02, 2018

整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪

//获取歌词文本 
var txt = document.getElementById("lrc"); 
var lrc = txt.value;//获取文本域里的值 
/*console.log(lrc);*/ 
var lrcArr = lrc.split("[");//去除[ 
/*console.log(lrcArr);*/ 
var html = "";//定义一个空变量保存文本 
for(var i=0 ; i<lrcArr.length ; i++) 
{ 
  var arr = lrcArr[i].split("]"); 
  /*console.log(arr[1]);*/ 
  var allTime = arr[0].split("."); 
  var time = allTime[0].split(":"); 
  //获取分钟 秒钟 把时间换算成秒钟 
  var timer = time[0]*60 + time[1]*1; 
  var text = arr[1]; 
  if(text) 
  { 
    html += "<p id="+timer+">"+text+"</p>" 
  } 
  con.innerHTML = html     <pre class="html" name="code">}</pre> 
<pre></pre> 
<div></div> 
<div>实现歌词同步首先要获取到文本框 再配合H5中新增的属性如图 其实很简单啦!</div> 
<div></div> 
<div><pre class="html" name="code">    //监听音乐播发进度实现歌词同步 
myMusic.addEventListener("timeupdate",function(){ 
  //获取当前播放时间 
  var curTime = parseInt(this.currentTime); 
  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++ 
    { 
con.style.top = -20*num +"px"; 
num++; 
    } 
  } 
});</pre></div> 
<pre></pre>

以上这篇原生JS实现网页手机音乐播放器 歌词同步播放的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习jquery之一
Apr 27 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 #Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 #Javascript
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
使用webpack打包koa2 框架app
Feb 02 #Javascript
Vue组件化开发思考
Feb 02 #Javascript
微信小程序实现导航栏选项卡效果
Jun 19 #Javascript
解析Vue.js中的组件
Feb 02 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP在线书签系统分享
2016/01/04 PHP
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
python实现telnet客户端的方法
2015/04/15 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python 切换root 执行命令的方法
2019/01/19 Python
python实现代码统计器
2019/09/19 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
禁止高声喧哗的标语
2014/06/11 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
个性发展自我评价2015
2015/03/09 职场文书