从零开始写一个酷狗音乐播放器——上

咱们一起手动来写一个音乐播放器吧： 我们平时用酷狗音乐播放器挺多的吧，看他们的歌词跟随着音乐变幻是不是很cool，那我们这次就一起来做一做这个吧。

首先呢，我们去下载点歌词资源跟歌曲。 一般情况下，你下载歌就好了，歌词文件的话你只要有播放过就会自动下载了，酷狗的话在这个文件夹下。 可以看到你下载的歌的所有krc歌词文件，这些文件是被加密过的了，你直接打开的话，是乱码的，有一个这样的软件，可以转换，请百度krc2lrc，就能下载了，转化后的文件就可以用了，记得修改下lrc文件的编码为utf-8.

怎么修改成utf-8可能有些人不太清楚，这里稍微提一个简便的办法。直接打开该lrc文件，另存为，可以看到下面有个编码，直接修改，保存即可。

下面开始正式的编码。
首先呢，歌词文件是上面这样的，我们需要读取这个本地静态资源，用ajax即可。

 // 获取歌词文本
    getLyric () {
        let _self = this;
        $.ajax({
            url : 'assets/xiaoyaotan.lrc',
            success : function (resp) {

                _self.lyricHandle (resp);   //  解析歌词文本
                _self.initLyricDisplay();   //  解析后显示歌词到页面
                _self.musicRate();          //  监听歌曲进度
            }
        });
    },

接下来呢，对歌词文本进行解析。

//  歌词文本处理
    lyricHandle (resp) {

        let _self = this,
            lyric = resp.substr(/\d{2}\:\d{2}\.\d{2}\]/.exec(resp).index).split("[").map(item => item.split("]"));

        this.lyric = lyric.map(item => [_self.strToTime(item[0]), item[1]]);
        
    },

解析完后呢，我们就把歌词全部初始化到页面上，每一条歌词用一个p标签包进来，当然你喜欢用其他的标签也是可以的。
这里呢，我为了代码简洁，用了一个模板引擎来导入，这个的话需要结合html部分去看。

//  初始化歌词显示
    initLyricDisplay () {
        $(".lyric").html(tmpl("lyricTmpl", this.lyric));
    },

接下来呢，歌曲都显示上来了，那我们要做的就是监听歌曲进度，这里我们不得不感谢强大的html5，因为它给我们提供了audio对象，它有一系列的api，可以很方便的处理音频。

//  监听歌曲进度
    musicRate () {
        var _self = this;
        var start = 0;
        $('audio').on("timeupdate",function(){
            var scale=this.currentTime;
            
            for(var i = start; i < _self.lyric.length; i ++) {
                if(scale >= _self.lyric[i][0]) {
                    _self.lyricStyleChange(i);
                    start ++;
                    break;
                }
            }
        });
    },

捕获到哪一句当前正在播了，那我们需要做的就是把这一句做一下样式处理，对吧？

//  聚焦的歌词文本样式调整
    lyricStyleChange (i) {
        $(".lyric p").eq(i).addClass("active").siblings().removeClass("active");
        $(".lyric").css("top", 250 - $(".lyric p").eq(i).position().top + "px");
    }

那我们最终这个音乐播放器是怎样的呢？我们看下：

那怎么让当前的歌词显示在我们视野最中间的位置呢？我这里呢，用了一个比较简便的方式，那就是调整下歌词面板的top值，简单粗暴哈= =
好了，这样就完整完成我们需要的功能。具体要完整代码的话请狠狠戳这里