原生JS實現(xiàn)網(wǎng)頁手機音樂播放器 歌詞同步播放的示例
更新時間:2018年02月02日 09:53:34 作者:執(zhí)念太深--終成陌路
下面小編就為大家分享一篇原生JS實現(xiàn)網(wǎng)頁手機音樂播放器 歌詞同步播放的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
整了一下 之前寫了好幾次每一次都丟三落四的 今天花了半天理了下思路 整理了下頭緒
//獲取歌詞文本
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>實現(xiàn)歌詞同步首先要獲取到文本框 再配合H5中新增的屬性如圖 其實很簡單啦!</div>
<div></div>
<div><pre class="html" name="code"> //監(jiān)聽音樂播發(fā)進度實現(xiàn)歌詞同步
myMusic.addEventListener("timeupdate",function(){
//獲取當(dāng)前播放時間
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實現(xiàn)網(wǎng)頁手機音樂播放器 歌詞同步播放的示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)checkbox復(fù)選框?qū)嵗a
這篇文章主要為大家介紹了javascript實現(xiàn)checkbox復(fù)選框?qū)嵗a,對checkbox復(fù)選框進行美化,感興趣的小伙伴們可以參考一下2016-01-01
前端實現(xiàn)PDF文件預(yù)覽的7種方案與性能對比詳解
這篇文章主要為大家詳細(xì)介紹了前端實現(xiàn)PDF文件預(yù)覽的7種方案與性能對比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
JavaScript實現(xiàn)字符串截取的三個方法總結(jié)
在?JavaScript?中,可以使用?substr()、slice()?和?substring()?方法截取字符串。這篇文章就來通過一些示例和大家聊聊這些方法的具體操作,需要的可以參考一下2023-02-02
javascript中undefined與null的區(qū)別
在JavaScript中存在這樣兩種原始類型:Null與Undefined。這兩種類型常常會使JavaScript的開發(fā)人員產(chǎn)生疑惑,在什么時候是Null,什么時候又是Undefined?2015-08-08
jquery下onpropertychange事件的綁定方法
用了onchange事件,但是在輸入的時候,用Javascript計算出并填值的那一列并不會響應(yīng)onchange 事件。2010-08-08

