这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于 JavaScript 怎么实现让歌词滚动播放呢?感兴趣的朋友一起看看吧
各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于 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 怎么实现让歌词滚动播放的全部内容,希望大家喜欢。
来源: http://www.phperz.com/article/17/0409/268889.html