看一个大佬写的一个音乐播放器觉得好厉害，就想着来研究一下，碍于能力有限，琢磨了一天写了一个简单的歌词同步。
话不多说，上栗子：
效果就是这样，因为没写样式直接用的H5的audio标签和控件，所以很简陋，而且不同浏览器还有不一样的样式。。。不要在意这些细节，我们的重点是让歌词同步显示出来。
上HTML码：
很简单就一个audio和一个显示歌词的div。
（不要问我为什么js写在外面，我怕你一页看不完T_T）
下面上js文件：
完结～
总结一下：很简单基本什么都没有，歌曲文件在本地，需要手动push每一行歌词进去，这个有点恶心，毕竟还不会从服务器加载歌词，只能用这个最笨蛋的法子。
虽然贴到这感觉工作量不大，但我这菜狗子还是调了大半天才让歌词同步显示出来 。。。唉
Ps：如果的你lrc不是这个样子：“[00:23076]听说白雪公主在逃跑”
而是这个样子：
“[00:23076]听[00:23336]说[00:23592]白[00:23826]雪[00:24061]公[00:24321]主[00:24586]在[00:24921]逃[00:25175]跑[00:25745]”
还是别寻他法吧。 哈哈
如果你是个小白，这个方法可以看看，如果你是大神，，，（哪位大神临幸我了，求抱大腿）
A New Break of Dawn - JS
Haven't really love someone
Always standing on my own
It's to you I find where I belong
Whenever I go wrong you make everything right
Show me the strength that lies in me
You can really feel the pain
I can feel it all the same
Stay with me like a shadow
How long this road could be
You will make me survive
Facing this world I 've never been this strong
I can share my dreams with u
I know my love will last for long
Promise me forever we will see this through
I am so proud to let u know that
You make all my dreams fulfill
You are the one who makes me see the whole new break of dawn
lt;br>
Used to sing the saddest song
In this coldest night alone
You are the reason
You are the one man I know
You break down the walls and take me home
You are the only one only one
You make my dreams come true
You are the one who makes me see the whole new break of dawn
歌手：JS
歌名：Heaven
纽约有点距离 东京太过拥挤
找不到一个地方把自己寄出去
不会觉得可惜 反正也不太在意
爱情像橱窗般美丽 但就要换季
没有习惯收集 明信片太容易
牙膏怎麼挤也挤不出一点东西
感情是消耗品 只到了这个世纪
有效期限过了就要说对不起
让我自己 去Heaven Heaven
一个可以随时飞出去的电梯
Heaven Heaven
没有你的空气如此的清新
Music
讨厌带著行李 不喜欢问问题
该走左边或是右边长长会忘记
迷路在地图里 爱不能靠翻译
既然文法错就乾脆别再继续
让我可以 去Heaven Heaven
Heaven Heaven
不用再重复消失寻找的游戏
感觉属於自己不会再分心
Music
Heaven Heaven
一个可以随时飞出去的电梯
Heaven Heaven
感觉属於自己不再会分心
>
歌曲名:Someone
歌手:Js
专辑:Ice Cream
Someone
<-3->
<-2->
<-1->
my hair was long & shining
you said you can't believe
how could walk our that door
or walk along the streets
you told me I should you know
do some bing bang curly wurly afro thing
I took your word & did
looked in my mirror
who's that freak
why does the world deceive
why do I make believe
took my heel & made
achilles out of me still
so I won't wanna be
someone who's answer to me
someone who sees like a child
give like a saint
feel like an angel
never mind the broken wings
and speak like a picture
cry like the rain
shine like the star
as long as the fire remains
the vase beside my bed
it's empty a most dead
it's for all the flowers I'm gonna give you he said
and now it's collecting qust instead
sees like a child
>
var str='[00:0091]春暖花开[00:0164]演唱：那英[00:0301][00:2123]如果你渴求一滴水\n';
str=strreplace(/\]\[/g,'] [');//"]["没有空格会影响匹配结果
var arr=strmatch(/(\[\d{2}:\d{2}\\d{2}\])([^\[\]])/g);
var time=[],txt=[];
for(var i=0;i<arrlength;i++){
/^(\[\d{2}:\d{2}\\d{2}\])([^\[\]])$/exec(arr[i]);
timepush(RegExp$1);
txtpush(RegExp$2);
}
alert(arr);
alert(time);
alert(txt);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Player</title>
<style type="text/css">
#audio-wrapper{
border:1px solid;
text-align:center;
}
activated{
color:#33b;
font-weight:bold;
background:#ddf;
}
#lrc{
text-align:center;
width:360px;
height:400px;
overflow:hidden;
border:2px solid #ddd;
box-shadow:2px 2px 2px silver;
}
lyrics-container{
position:relative;
width:99%;
height:80%;
border:1px solid red;
overflow:hidden;
}
lyrics-container2{
position:absolute;
width:355px;
}
#lrc p{
text-indent:0;
margin:0;
padding:6px;
}
music-title,album,artist{
margin:0;
padding:4px;
text-indent:0;
text-align:left;
}
</style>
<script type="text/javascript" src="js/jquery-214minjs"></script>
</head>
<body>
<div id="#audio-wrapper">
<p><audio src="data/aimeimp3" controls></audio></p>
</div>
<div id="lrc"></div>
<script type="text/javascript">
$(document)ready(function(){
var $lrc = $('#lrc');
var html ='';
$('audio')on('play',function(){
var start = new Date();
if($lrchtml() == ''){
$ajax({
url:'data/aimeixml',
type:'get',
dataType:'xml',
success:function(data){
html += '<div class="info">';
if($(data)find('TITLE')length > 0){
html += '<p class="music-title">歌曲：' + $(data)find('TITLE')text()+'</p>';
}
if($(data)find('ALBUM')length > 0){
html += '<p class="album">专辑：' + $(data)find('ALBUM')text()+'</p>';
}
if($(data)find('ARTIST')length > 0){
html += '<p class="artist">演唱：' + $(data)find('ARTIST')text()+'</p>';
}
html += '</div>';
html += '<div class="lyrics-container">'
html += '<div class="lyrics-container2">'
$(data)find('LRC')each(function(){
html += '<p class="lyrics" tag="'+ $(this)attr('TAG') +'">' + $(this)text() +'</p>';
});
html += '</div></div>';
$lrchtml(html);
//alert($(data)find('LRC')length);
}
});
}
var timer = setInterval(function(){
var now = new Date();
var elapsed = now - start;
if($lrcfind('lyrics')length){
$lrcfind('lyrics')each(function(){
var isOK = elapsed - $(this)attr('tag');
if(isOK < 13 && isOK > 0){
$lrcfind('lyrics')removeClass('activated');
$(this)addClass('activated');
if($(this)prevAll('lyrics')length > 3){
$('lyrics-container2')animate({
'top':'-=30px'
});
//consolelog($(this)prevAll('lyrics')length);
}
}
});
}
},10);
});
});
</script>
</body>
</html>
以上就是关于用最笨的js方法写个带歌词同步的播放器全部的内容，包括:用最笨的js方法写个带歌词同步的播放器、JS遇见未来英文版的歌词、Js的《Heaven》 歌词等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）