Introduction détaillée à l'effet du HTML5 utilisant des balises audio pour réaliser la synchronisation des paroles

La chose la plus puissante à propos de

HTML5 est le traitement des fichiers multimédias. Par exemple, l'utilisation d'une simple balise vidéo peut réaliser la lecture de vidéo. De même, il existe une balise correspondante en HTML5 qui gère les fichiers audio, c'est-à-dire la balise audio. A travers cet article, je vais vous présenter l'effet du HTML5 utilisant la balise Audio pour réaliser la synchronisation des paroles. Les amis intéressés peuvent apprendre ensemble. L'aspect le plus puissant du HTML5 est le traitement des fichiers multimédias. Par exemple, la lecture vidéo peut être réalisée en utilisant une simple balise vedio. De même, il existe une balise correspondante pour le traitement des fichiers audio en HTML5, c'est-à-dire que la balise audio
HTML5 est disponible depuis si longtemps, mais la balise audio qu'elle contient n'a été utilisée qu'une seule fois, et bien sûr c'est juste pour insérez cette balise dans la page. Cette fois, j'ai juste profité d'aider un ami à créer quelques pages et à m'entraîner à utiliser la balise audio.
Vous devez d'abord insérer une balise audio dans la page. Notez qu'il est préférable de ne pas définir loop='loop' ici. Cet attribut est utilisé pour définir la boucle . lecture, car il sera joué plus tard. Lorsque vous devez utiliser l'attribut ended, si loop est défini sur loop, l'attribut terminé sera toujours faux.
autoplay='autoplay' définit la lecture automatique de la musique après le chargement de la page. Les attributs de préchargement et de lecture automatique ont le même effet. Si l'attribut de lecture automatique apparaît dans la balise, l'attribut de préchargement sera. ignoré.
controls='controls' définit la barre de contrôle pour afficher la musique.

XML/HTML Code复制内容到剪贴板
<audio src="music/Yesterday Once More.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto">
您的浏览器不支持audio属性，请更换浏览器在进行浏览。    
</audio>

Après avoir ce tag, félicitations, votre page peut désormais jouer de la musique. Mais cela rendrait la page trop monotone, j'ai donc ajouté quelques éléments à la page pour que les paroles puissent être affichées sur la page de manière synchrone et que la musique à jouer puisse également être sélectionnée. Donc, pour obtenir cet effet, nous devons d’abord télécharger des fichiers de paroles au format lrc, puis formater la musique. Parce que le fichier musical initial est comme ceci

Nous devons insérer chaque parole dans un tableau de deux bits et le formater. Après cela, les paroles seront dans ce format
Ci-joint voici le code de formatage des paroles

XML/HTML Code复制内容到剪贴板
//歌词同步部分    
function parseLyric(text) {    
//将文本分隔成一行一行，存入数组    
var lines = text.split('\n'),    
//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]    
pattern = /\[\d{2}:\d{2}.\d{2}\]/g,    
//保存最终结果的数组    
result = [];    
//去掉不含时间的行    
while (!pattern.test(lines[0])) {    
lineslines = lines.slice(1);    
};    
//上面用'\n'生成生成数组时，结果中最后一个为空元素，这里将去掉    
lines[lines.length - 1].length === 0 && lines.pop();    
lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {    
//提取出时间[xx:xx.xx]    
var time = v.match(pattern),    
//提取歌词    
vvalue = v.replace(pattern, '');    
//因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔    
time.forEach(function(v1, i1, a1) {    
//去掉时间里的中括号得到xx:xx.xx    
var t = v1.slice(1, -1).split(':');    
//将结果压入最终数组    
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);    
});    
});    
//最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词    
result.sort(function(a, b) {    
return a[0] - b[0];    
});    
return result;    
}

Nous y sommes est facile d'utiliser les paroles de chaque morceau de musique. Nous devons avoir une fonction pour obtenir les paroles et les afficher sur la page de manière synchrone, afin que la musique puisse être commutée normalement. Le code est joint ci-dessous.

XML/HTML Code复制内容到剪贴板
function fn(sgname){    
$.get('music/'+sgname+'.lrc',function(data){    
var str=parseLyric(data);    
for(var i=0,li;i<str.length;i++){    
li=$(&#39;<li>&#39;+str[i][1]+&#39;</li>&#39;);    
$(&#39;#gc ul&#39;).append(li);    
}    
$(&#39;#aud&#39;)[0].ontimeupdate=function(){//视屏 音频当前的播放位置发生改变时触发    
for (var i = 0, l = str.length; i < l; i++) {    
if (this.currentTime /*当前播放的时间*/ > str[i][0]) {    
//显示到页面    
$(&#39;#gc ul&#39;).css(&#39;top&#39;,-i*40+200+&#39;px&#39;); //让歌词向上移动    
$(&#39;#gc ul li&#39;).css(&#39;color&#39;,&#39;#fff&#39;);    
$(&#39;#gc ul li:nth-child(&#39;+(i+1)+&#39;)&#39;).css(&#39;color&#39;,&#39;red&#39;); //高亮显示当前播放的哪一句歌词    
}    
}    
if(this.ended){ //判断当前播放的音乐是否播放完毕    
var songslen=$(&#39;.songs_list li&#39;).length;    
for(var i= 0,val;i<songslen;i++){    
val=$(&#39;.songs_list li:nth-child(&#39;+(i+1)+&#39;)&#39;).text();    
if(val==sgname){    
i=(i==(songslen-1))?1:i+2;    
sgname=$(&#39;.songs_list li:nth-child(&#39;+i+&#39;)&#39;).text(); //音乐播放完毕之后切换下一首音乐    
$(&#39;#gc ul&#39;).empty(); //清空歌词    
$(&#39;#aud&#39;).attr(&#39;src&#39;,&#39;music/&#39;+sgname+&#39;.mp3&#39;);    
fn(sgname);    
return;    
}    
}    
}    
};    
});    
} fn($(&#39;.songs_list li:nth-child(1)&#39;).text());

Maintenant, ici, les paroles de votre musique peuvent être affichées sur la page normalement et de manière synchrone. Mais il manque encore une chose, c'est une liste de musique. J'espère pouvoir cliquer sur la musique dans cette liste pour lire la musique. Le code est joint ci-dessous.
Code HTML

XML/HTML Code复制内容到剪贴板
<p class="songs_cnt">
<ul class="songs_list">
<li>Yesterday Once More</li>
<li>You Are Beautiful</li>
</ul>
<button class="sel_song">点<br/><br/>我</button>
</p>
<p id="gc">
<ul></ul>
</p>

code css

XML/HTML Code复制内容到剪贴板
#gc{    
width: 400px;    
height: 400px;    
background: transparent;    
margin: 100px auto;    
color: #fff;    
font-size: 18px;    
overflow: hidden;    
position: relative;    
}    
#gc ul{    
position: absolute;    
top: 200px;    
}    
#gc ul li{    
text-align: center;    
height: 40px;    
line-height: 40px;    
}    
.songs_cnt{    
float: left;    
margin-top: 200px;    
position: relative;    
}    
.songs_list{    
background-color: rgba(0,0,0,.2);    
border-radius: 5px;    
float: left;    
width: 250px;    
padding: 15px;    
margin-left: -280px;    
}    
.songs_list li{    
height: 40px;    
line-height: 40px;    
font-size: 16px;    
color: rgba(255,255,255,.8);    
cursor: pointer;    
}    
.songs_list li:hover{    
font-size: 20px;    
color: rgba(255,23,140,.6);    
}    
.sel_song{    
position: absolute;    
top: 50%;    
width: 40px;    
height: 80px;    
margin-top: -40px;    
font-size: 16px;    
text-align: center;    
background-color: transparent;    
border: 1px solid #2DCB70;    
font-weight: bold;    
cursor: pointer;    
border-radius: 3px;    
font-family: sans-serif;    
transition:all 2s;    
-moz-transition:all 2s;    
-webkit-transition:all 2s;    
-o-transition:all 2s;    
}    
.sel_song:hover{    
color: #fff;    
background-color: #2DCB70;    
}    
.songs_list li.active{    
color: #f00;    
}

jscode

XML/HTML Code复制内容到剪贴板
$('.songs_list li:nth-child(1)').addClass('active');    
$('.songs_cnt').mouseenter(function () {    
var e=event||window.event;    
var tag= e.target||e.srcElement;    
if(tag.nodeName=='BUTTON'){    
$('.songs_list').animate({'marginLeft':'0px'},'slow');    
}    
});    
$('.songs_cnt').mouseleave(function () {    
$('.songs_list').animate({'marginLeft':'-280px'},'slow');    
});    
$('.songs_list li').each(function () {    
$(this).click(function () {    
$('#aud').attr('src','music/'+$(this).text()+'.mp3');    
$('#gc ul').empty();    
fn($(this).text());    
$('.songs_list li').removeClass('active');    
$(this).addClass('active');    
});    
})

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!