JS 网页手机音乐歌词同步代码

网友投稿 346 2024-06-15

JS 网页手机音乐歌词同步代码

本文主要为大家分享一篇原生js实现网页手机音乐播放器 歌词同步播放的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

//获取歌词文本

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">}

-

1

-
-

实现歌词同步首先要获取到文本框 再配合H5中新增的属性如图 其实很简单啦！

//监听音乐播发进度实现歌词同步            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- = -20*num +"px";            num++;            }            }            });

相关推荐：

如何用html5 写出网页音乐播放器

html网页音乐播放器自带播放列表_PHP教程

html网页音乐播放器自带播放列表

以上就是JS实现网页手机音乐播放器歌词同步播放功能代码的详细内容

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：代码 网页 判断 属性 示例
上一篇:js 省市区三级联动代码分析
下一篇:js 自定义 trim 函数的用法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~