原生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(){
//獲取當前播放時間
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)文章
基于RequireJS和JQuery的模塊化編程——常見問題全面解析
下面小編就為大家?guī)硪黄赗equireJS和JQuery的模塊化編程——常見問題全面解析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04
JS實現(xiàn)彩色圖片轉(zhuǎn)換為黑白圖片的3種方法
本文主要介紹了JS實現(xiàn)彩色圖片轉(zhuǎn)換為黑白圖片的3種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
JavaScript基本語法_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript基本語法,適合剛?cè)腴T的同學(xué),有興趣的可以了解下。2017-06-06
微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇的介紹,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-11-11
JS使用cookie實現(xiàn)只出現(xiàn)一次的廣告代碼效果
我們上網(wǎng)經(jīng)常會遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況,其實是運用了Cookie 存儲 web 頁面的用戶信息,Cookie 以名/值對形式存儲,當瀏覽器從服務(wù)器上請求 web 頁面時, 屬于該頁面的 cookie 會被添加到該請求中2017-04-04

