原生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 dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 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
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php多重接口的实现方法
2015/06/20 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
python分治法求二维数组局部峰值方法
2018/04/03 Python
基于Python log 的正确打开方式
2018/04/28 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
创业计划书的写作技巧及要点
2014/01/31 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
python小程序之飘落的银杏
2021/04/17 Python
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript