各种音乐播放器上都有一个自动滚动播放歌词的功能，那么这个功能用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. 每日命令：（6）rmdir

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.)删 ...

  2. 网络模型、IP命令、SS命令介绍

    1. 分层对应关系 OSI七层模型和TCP/IP五层模型都属于TCP/IP协议栈,而TCP/IP协议栈只有两种传输层协议:TCP.UDP,所以对于Telnet.FTP这些协议,建议称之为承载在TCP之 ...

  3. CCF201604-1 折点计数 java（100分）

    试题编号: 201604-1 试题名称: 折点计数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长,而后一天 ...

  4. Centos下Yum安装PHP5.5,5.6,7.0及扩展

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...

  5. F - Shooter

    UVA___10535 The shooter is in a great problem. He is trapped in a “2D” maze with a laser gun and can ...

  6. log4j.properties配置内容的理解

    一直知道log4j是用来记录日志的,但一直没去看log4j到底是怎么用的,这两天看了几个log4j.properties配置语句详解的帖子,在这里简陋地记录一下. 在完全不知道log4j怎么用的时候, ...

  7. hdu 1811拓扑排序+并查集（容器实现）

    http://www.cnblogs.com/newpanderking/archive/2012/10/18/2729566.html #include<stdio.h> #includ ...

  8. Hyper-v交换机添加出错解决方法

    这个问题中文找不到解决方法,只能重新安装系统了 重新安装系统后,按照顺序操作,不要去动设备管理器中的东西,也不用动驱动,先删除虚拟机的网络连接,在删除虚拟交换机就可以了,没有再出现问题

  9. Thread的方法join()使用

    join()的作用:Waits for this thread to die.等待线程对象销毁.在Thread源码中可以看到join源码是使用了wait()方法来实现等待功能. 因为join()内部使 ...

  10. Java中DAO/DTO/PO/VO/BO/QO/POJO

    ORM:是Object Relational Mapping(对象关系映射)的缩写. 通俗点讲,就是将对象与关系数据库绑定,用对象来表示关系数据.在O/R/M的世界里,有两个基本的也是重要的东东需要了 ...