<!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>
可以先制作srt格式的外挂字幕，然后用LRC歌词转换器把srt转换为lrc文件。
制作外挂字幕的软件中，Subtitle Workshop不错，打开视频文件后，在字幕区按Insert增加空行，每行打上字幕文本(可能从文本文档中复制粘贴过去)，用Alt+C、Alt+V设置每行字幕开始、结束时间码，保存为Subrip格式即可。
外挂字幕完成后，如果想把字幕嵌入到视频当中，可以用格式工厂进行视频转换，转换的时候，指定外挂字幕的文件名，指定字幕大小，转换之后，字幕就嵌入到视频当中了。
Subtitle Workshop软件，可以在我的网盘下载。请访问115网盘，选择提取文件，输入提取码f99039cfd9，即可下载。
不是。
_sJavaScript（简称Js)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
__s为扩展名的文件,是用javascript脚本语言编写的。js文件常见的有两种用法。
1在网页里使用:一般不能直接打开，只有配合网页使用,如果是想破解某网站的在线**等,仅从js文件入手可能性不大，建议使用专门的抓取工具,如wpe,抓取网络封包，再对封包分析,js可以使用记事本编辑。
2在单机使用:一般可以用来做为一个可执行程序直接双击就可以运行,当然前提是计算机没有安装网页设计软件。
以上就是关于如何用原生js或者jq或者css3制作会动的歌词全部的内容，包括:如何用原生js或者jq或者css3制作会动的歌词、如何制作LRC格式字幕文件、js是字幕文件吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）