Comment implémenter un lecteur de musique en JS natif

Ci-dessous, je vais partager avec vous 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.

Je l'ai réglé. Je l'ai écrit plusieurs fois auparavant, mais à chaque fois j'ai tout perdu. Aujourd'hui, j'ai passé beaucoup de temps à trier mes pensées et à trier les indices

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

.

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'à l'avenir, cela sera utile à tout le monde.

Articles connexes :

Comment implémenter le composant de barre de progression de chargement de page dans vue

Quelles sont les différences entre Map et ForEach dans JS ?

Utilisez axios pour encapsuler la méthode fetch et appelez

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!