基于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防止表单重复提交的两种方法
Sep 30 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
用原生js做单页应用
Jan 17 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue实现图书管理demo详解
Oct 17 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 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
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php验证码生成器
2017/05/24 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
js自定义事件代码说明
2011/01/31 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python中字典和集合学习小结
2017/07/07 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python中类的属性和方法介绍
2018/11/27 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
家长评语和期望
2014/02/10 职场文书
幼儿园家长评语
2014/02/10 职场文书
感谢信格式范文
2015/01/22 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
奖励通知
2015/04/22 职场文书
小学生安全保证书
2015/05/09 职场文书
2015年女职工工作总结
2015/05/15 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
浅析MongoDB之安全认证
2021/06/26 MongoDB