基于JavaScript怎么实现让歌词滚动播放


Posted in Javascript onNovember 03, 2015

各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于JavaScript怎么实现让歌词滚动播放呢?请看下文详解。

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

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

基于JavaScript怎么实现让歌词滚动播放

下面是基于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怎么实现让歌词滚动播放的全部内容,希望大家喜欢。

Javascript 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 #Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 #Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 #Javascript
jQuery实用技巧必备(中)
Nov 03 #Javascript
jQuery实用技巧必备(上)
Nov 02 #Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 #Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
你应该知道PHP浮点数知识
2015/05/13 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
javascript工具库代码
2012/03/29 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
JsRender for object语法简介
2014/10/31 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue实现微信分享功能
2018/11/28 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
使用numba对Python运算加速的方法
2018/10/15 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
珠宝店促销方案
2014/03/21 职场文书
董事长助理工作职责
2014/06/08 职场文书
低碳环保演讲稿
2014/08/28 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
学生党员检讨书范文
2014/12/27 职场文书
关于学习的决心书
2015/02/05 职场文书
搞笑婚前保证书
2015/02/28 职场文书
实习介绍信范文
2015/05/05 职场文书