HTML5实现歌词秀功能

最近有个新手需要实现一个在线播放并且带歌词秀的功能,
我找了很多资料网上都没有可用的demo,就给他写了一个分享一下,比较简单
文章末尾有预览和源码的地址

先上一张实现后的效果图
这里写图片描述
当中需要实现的主要功能
1. 实现音乐的播放，但是需要隐藏自带的播放器
2. 实现圆形头像的旋转,比如上图中的邓紫棋
3. 实现音量的调节,因为HTML5播放器自带的音量调节器太丑了
4. 实现歌曲播放进度的控制,H5播放器自带的进度条太丑了
5. 实现歌词滚动,和播放进度同步
6. 实现整体样式,比如各种按钮的出现位置,歌曲列表的样式

其中第5个功能点是本文中的难点

首先实现音乐的播放

 利用h5自带的播放器，但是由于h5的播放器太丑了故而我们需要隐藏H5自带的播放器，
 注意：这里是隐藏，不是去掉。首先上一张h5自带的播放器的图。
 各位看官可以评价一下是否颜值过低？

这里写图片描述

上图代码可以实现一个H5的音乐播放器，
红色箭头的`controls="controls"`就是来控制播放器是否显示,如果去掉这隐藏。
如此便完成了第一步

实现头像旋转

头像旋转主要利用css3的技术，首先定义一个效果，下面代码定义了一个效果。
名字叫**rotation**，为什么效果需要名字呢？因为效果不能独立存在，需要载体。
故而先要取一个名字，然后在在具体的元素上通过名字去引用这个效果。
本文中效果就是发生在一张图的载体片上，载体引用这个名字。
效果就是从0角度运动到360角度，如此便完成了旋转。

@keyframes rotation{
            from{transform: rotate(0deg)};
            to{transform: rotate(360deg)};
        }

动画定义完成之后，就需要定义具体的元素了，定义一张图片其中CSS中的
border-radius: 50%;可以实现图片圆形
animation: rotation 6s linear infinite;
rotation:表示图片的动画引用了一个叫rotation的效果，上文定义的；
6s:表示时间，意思是6秒钟完成这个效果，说白了图片自转一圈需要6秒时间；
linear:代表效果是线性的,说白了就是匀速;
infinite:表示动画的执行次数为无数次,因为我们需要图片一直旋转

HTML：
<img src="dzq.jpg" id="starInfo">
CSS：
#starInfo{
            width: 130px;
            height: 130px;
            display: flex;
            border-radius: 50%;
            transform: rotate(360deg);
            animation: rotation 6s linear infinite;
        }

如此便完成了第2个功能,其实本文中图片上面还有一个小按钮,一个暂停和播放切换的按钮
这里也稍作说明如何实现的,本文末尾会附上源码,可以对着博文和源码来实现。
首先这个播放和暂停的按钮并不是一张独立的图片，是一整张图片，本文叫图a，如下图：

思路是把这张图片的一部分作为背景放到邓紫棋那张图片上面，于是这里就有两个问题
1、如果让一整张图（图a）的一部分作为背景？
2、图a如果显示在另一张图片之上？
我们先看整个布局，代码如下：

<div id="star">
    <img src="dzq.jpg" id="starInfo">
    <a href="javascript:void(0);" id="ctr"></a> 
</div>

其中starInfo是邓紫棋的那张图片，ctr是一个A标签，这个链接的背景图片是a

#ctr{
    background-image:url(img.png);
    width:36px;
    height:36px;
    position:absolute;
    left:80px;
    top:80px;
    background-position:-96px -146px;
    }

上面代码中img.png便是本文中的图a，这个各位看官自行可以下载源码查看。
如此从上述的CSS代码（background-image:url(img.png);）中可以看出
ctr的背景图片确实是图a，其中background-position:-96px -146px;
就是让图a的一部分作为背景，-96表示距离左边96px,-146表示距离上面146。
说白了就是从left-96px和top-146开始的部分作为背景，在加上宽高便呈现出我们看到的效果

如此便完成了上面的第一个问题：如何让一整张图（图a）的一部分作为背景？
第二个问题：图a如果显示在另一张图片之上？只需要让ctr去绝对定位便可以
然后设置left:80和top:80的值，但是left和top必须加上position才能生效
因为默认的position不对top和left生效。代码上面有。
本文后面涉及到的小图标作为背景都是这种方法，下面不在累述
比如那个音量图标点击之后变成静音的图片，就是利用jquery动态改变background-position的值

接下来实现音量的调节

音量调节需要一个拖动条横向的,意思是能够实现鼠标拖动并且可以在拖动中获取具体的值
诚然h5有自带的控件,但是不够漂亮,本文中用的是jqueryui的一个插件,叫做slider,
关于slider的用法,可以参考jqueryui提供的Api,本文不讨论,附上代码:

div:
<div id="musicProgress">
    <div id="musicMaster" style="height:5px;width:300px;"></div>
</div>
CSS:
    #master .ui-slider-handle {
            border-color: #ffffff;
        }
    #master{background: rgba(0, 0, 0, 0.3);border:0px;}
    #musicProgress{margin-top:10px;}
    #musicMaster .ui-slider-range { background: #2d6adf; }
    #musicMaster .ui-slider-handle { border-color: #2d6adf; }
    #musicMaster .ui-slider-handle {
            border-color: #ffffff;
        }
    #musicMaster{background: rgba(0, 0, 0, 0.3);border:0px;}

其中.ui-slider-range这些是jqueryui的样式,博主改了一点使他更加符合的要求

js:

$( "#master" ).slider({
  value: 60,//默认值100,这里的value:60表示60%,
  orientation: "horizontal",//表示水平拖动,还可以垂直拖动
  range: "min",
  min:30,
  animate: true,
  slide:settingVolume//拖动时候的回调方法
});
//回调方法
function settingVolume(event, ui){
    //得到播放器
    myVideo = document.getElementById("musicPlayer");
    //设置播放器的音量=我们拖动的值
    //播放器最大音量是1,所以需要除以100
    //比如上面的value:60,那么就是0.6
    //当你拖动到80的时候ui.value=80
    //除以100=0.8,如此来设置播放器的音量
    myVideo.volume=ui.value/100;
}

实现歌曲播放进度的控制,H5播放器自带的进度条太丑了

这里其实包含了两个功能
1、歌曲在播放的过程中进度条需要变化
2、拖动进度条需要改变歌曲的播放时间
由于歌曲播放的进度条也是用jqueryui的slider控件实现的，所以实现1功能标记简单
获取歌曲的总长度，获取歌曲当前的播放时间，然后算出百分比。比如播放到20%的时候
只需要把进度条的value设置为20便可，需要时刻去设置，因为歌曲是时刻在播放的
故而定义一个定时器每隔1秒钟便去设置与一下进度条。代码如下：

js:
myVideo.onplay=function(){//监听歌曲正在播放
    //每隔0.5秒钟便调用一下settingProgress方法
    //settingProgress方法就是去设置进度条
    //让进度条看起来是跟着歌曲的播放在滚动
    timer =setInterval("settingProgress()",500);
}
settingProgress:

function settingProgress(){
    //每隔.5秒便去获得一下当前歌曲的播放时间
    var currentTime =  myVideo.currentTime;
    //currentTime/myVideo.duration*100用当前的时间除以总时长得出百分比
    //把百分比*100转整形设置给进度条
    $('#musicMaster').slider('option', 'value', parseInt(currentTime/myVideo.duration*100)); 
    }

拖动进度条需要改变歌曲的播放时间这个功能本文没有实现,主要没时间,其实也很简单
如果有需要可以把源码下载过去自行实现以下,或者可以来和我讨论

实现歌词滚动,和播放进度同步

一般歌词文件为lrc文件,大多内容如下图所示

这里写图片描述

大体第思路就是通过ajax去请求服务器上的lrc文件,返回字符串,然后用正则表达式解析.
解析完成后放到一个json数组当中,其中json的key为歌词播放的时间秒数,如图:

这里写图片描述

红色箭头就是key,歌词的播放时间,比如180则表示,整3分钟播放这句歌词
并且在初始化的时候便把歌词需要滚动的距离计算好放到top中
如此便完成了歌曲和歌词的同步播放滚动

末了打个广告http://lubanedu.ke.qq.com/鲁班学院,每晚八点都有免费的java试听课,都是面向高级开发的课堂内容,非常不错

源码地址:
https://download.csdn.net/download/java_lyvee/10635980
在线预览地址:
http://120.79.37.168:8081/
本文中暂停,下一曲等等没有实现.....因为比较简单

HTML5实现歌词秀功能

猜你喜欢