JS réalise le code de fonction de lecture de synchronisation des paroles du lecteur de musique mobile Web

Cet article partage principalement un exemple d'utilisation de JS natif pour implémenter la lecture synchronisée des paroles dans un lecteur de musique Web mobile. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

//获取歌词文本 
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">}

实现歌词同步首先要获取到文本框 再配合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.top = -20*num +"px"; 
num++; 
    } 
  } 
});

Recommandations associées :

Comment écrire un lecteur de musique Web en utilisant HTML5

Le lecteur de musique de page Web HTML est livré avec un tutoriel playlist_PHP

Le lecteur de musique de page Web HTML est livré avec une liste de lecture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!