原生JS實(shí)現(xiàn)網(wǎng)頁(yè)手機(jī)音樂(lè)播放器 歌詞同步播放的示例
整了一下 之前寫(xiě)了好幾次每一次都丟三落四的 今天花了半天理了下思路 整理了下頭緒
//獲取歌詞文本
var txt = document.getElementById("lrc");
var lrc = txt.value;//獲取文本域里的值
/*console.log(lrc);*/
var lrcArr = lrc.split("[");//去除[
/*console.log(lrcArr);*/
var html = "";//定義一個(gè)空變量保存文本
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(":");
//獲取分鐘 秒鐘 把時(shí)間換算成秒鐘
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>實(shí)現(xiàn)歌詞同步首先要獲取到文本框 再配合H5中新增的屬性如圖 其實(shí)很簡(jiǎn)單啦!</div>
<div></div>
<div><pre class="html" name="code"> //監(jiān)聽(tīng)音樂(lè)播發(fā)進(jìn)度實(shí)現(xiàn)歌詞同步
myMusic.addEventListener("timeupdate",function(){
//獲取當(dāng)前播放時(shí)間
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實(shí)現(xiàn)網(wǎng)頁(yè)手機(jī)音樂(lè)播放器 歌詞同步播放的示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 運(yùn)用js教你輕松制作html音樂(lè)播放器
- js實(shí)現(xiàn)可兼容IE、FF、Chrome、Opera及Safari的音樂(lè)播放器
- JavaScript實(shí)現(xiàn)帶播放列表的音樂(lè)播放器實(shí)例分享
- JavaScript實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
- JS+html5制作簡(jiǎn)單音樂(lè)播放器
- js制作簡(jiǎn)單的音樂(lè)播放器的示例代碼
- 原生JS實(shí)現(xiàn)音樂(lè)播放器
- js實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
- js+audio實(shí)現(xiàn)音樂(lè)播放器
- js實(shí)現(xiàn)音樂(lè)播放器
相關(guān)文章
javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)checkbox復(fù)選框?qū)嵗a,對(duì)checkbox復(fù)選框進(jìn)行美化,感興趣的小伙伴們可以參考一下2016-01-01
詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法
這篇文章主要介紹了詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
10 種最常見(jiàn)的 Javascript 錯(cuò)誤(頻率最高)
本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯(cuò)誤,我們會(huì)告訴你什么原因?qū)е铝诉@些錯(cuò)誤,以及如何防止這些錯(cuò)誤發(fā)生。需要的朋友參考下2018-02-02
前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對(duì)比詳解
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對(duì)比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
詳解webpack-dev-server的簡(jiǎn)單使用
本篇文章主要介紹了詳解webpack-dev-server的簡(jiǎn)單使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
ES6函數(shù)實(shí)現(xiàn)排它兩種寫(xiě)法解析
這篇文章主要介紹了ES6函數(shù)實(shí)現(xiàn)排它兩種寫(xiě)法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)字符串截取的三個(gè)方法總結(jié)
在?JavaScript?中,可以使用?substr()、slice()?和?substring()?方法截取字符串。這篇文章就來(lái)通過(guò)一些示例和大家聊聊這些方法的具體操作,需要的可以參考一下2023-02-02
javascript中undefined與null的區(qū)別
在JavaScript中存在這樣兩種原始類(lèi)型:Null與Undefined。這兩種類(lèi)型常常會(huì)使JavaScript的開(kāi)發(fā)人員產(chǎn)生疑惑,在什么時(shí)候是Null,什么時(shí)候又是Undefined?2015-08-08
jquery下onpropertychange事件的綁定方法
用了onchange事件,但是在輸入的時(shí)候,用Javascript計(jì)算出并填值的那一列并不會(huì)響應(yīng)onchange 事件。2010-08-08

