各种音乐播放器上都有一个自动滚动播放歌词的功能,那么这个功能用JavaScript怎么实现呢?请看下文。

一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词。介绍一个网站:中文歌词库。它提供xml格式的歌词。

我们先来看一下这个例子的最终效果:

下面是基于jQuery的具体代码:

<!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-2.1.4.min.js"></script>
</head>
<body>
<div id="#audio-wrapper">
<p><audio src="data/aimei.mp3" 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($lrc.html() == ''){
$.ajax({
url:'data/aimei.xml',
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>';
$lrc.html(html);
//alert($(data).find('LRC').length);
}
});
}
var timer = setInterval(function(){
var now = new Date();
var elapsed = now - start;
if($lrc.find('.lyrics').length){
$lrc.find('.lyrics').each(function(){
var isOK = elapsed - $(this).attr('tag');
if(isOK < 13 && isOK > 0){
$lrc.find('.lyrics').removeClass('activated');
$(this).addClass('activated');
if($(this).prevAll('.lyrics').length > 3){
$('.lyrics-container2').animate({
'top':'-=30px'
});
//console.log($(this).prevAll('.lyrics').length);
}
}
});
}
},10);
});
});
</script>
</body>
</html>

用JavaScript实现歌词滚动播放的更多相关文章

  1. [Python]简易terminal歌词滚动播放器

    整合了网易云的一些API,想写一个terminal版的音乐播放器,但是还没有想好写成什么样子. 暂时写了一个必须又的功能:带歌词滚动的播放器,用了pygame里的mixer来播放音乐. 准备有时间的时 ...

  2. Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)

    博客地址:https://ainyi.com/59 写在前面 这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表.可关键词搜索.歌词滚动播放的 ...

  3. 简单的HTML5音乐播放器(带歌词滚动)

      // // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...

  4. 功能强大的滚动播放插件JQ-Slide

    查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...

  5. Android自定义View,高仿QQ音乐歌词滚动控件!

    最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...

  6. HTML5实践之歌词同步播放器

    歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...

  7. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  8. vue 上实现无缝滚动播放文字系统公告

    首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示,有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定, ...

  9. 用UILabel实现文字滚动播放(跑马灯)效果

    - (void)viewDidLoad { [super viewDidLoad]; //数据源 self.messageArray = [NSArray arrayWithObjects: &quo ...

随机推荐

  1. Django ContentType内置组件

    一.引出问题 假如有这两张表,它们中的课程可能价格不一样.周期不一样.等等...不一样...,现在有一张价格策略表,怎么就用一张表报保存它们之间不同的数据呢? 可能你会这样: 确实是行!但是,如果有很 ...

  2. 在vmware中 centos7安装gooderp

    环境为windows 10系统,vmware 12,centos 7.4.centos安装了gnome桌面,用里面的终端来安装,自带的firefox浏览器. 增加用户 首先要新建一个用户来管理good ...

  3. 【jenkins】UnicodeEncodeError: 'ascii' codec can't encode character

    https://stackoverflow.com/questions/6076203/how-do-you-set-the-default-encoding-in-jenkins

  4. LINUX-文件的特殊属性 - 使用 "+" 设置权限,使用 "-" 用于取消

    chattr +a file1 只允许以追加方式读写文件 chattr +c file1 允许这个文件能被内核自动压缩/解压 chattr +d file1 在进行文件系统备份时,dump程序将忽略这 ...

  5. Python基础之变量进阶

    变量的引用 变量和数据都是保存在内存中的: 在python中函数的参数传递以及返回值都是靠引用传递的. 函数引用的概念 在python中 变量和数据时分开存储的: 数据保存在内存中的一个位置: 变量保 ...

  6. python之cookbook-day02

    第一章:数据结构和算法 1.2 解压可迭代对象赋值给多个变量 问题: 如果一个可迭代对象的元素个数超过变量个数时,会抛出一个 ValueError .那么 怎样才能从这个可迭代对象中解压出 N 个元素 ...

  7. vue父组件向子组件传递参数

    父组件中引用的子组件 <pics :is-pics="showpics" // 这是我们要传递的参数 :is-product="productMsg" : ...

  8. 关于app.js和route.js和service.js还有controller.js中的依赖关系

    2.只要是由路由去执行的的控制器模块,必须注入到app.js里面进行依赖,在页面上就不需要ng-controller在html页面上写了:   但是如果一个控制器模块,没有经过路由管理:那么就必须要, ...

  9. 分金币 (UVA 11300)

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33899 思路:推公式,发现可以转化为求给定n个数,求到所有点距离之和最小的点 ...

  10. idea 编译级别的设置

    File->Settings Project Structure