亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

從零開始寫一個酷狗音樂播放器——上

標簽:
Html5 JavaScript

咱们一起手动来写一个音乐播放器吧: 我们平时用酷狗音乐播放器挺多的吧,看他们的歌词跟随着音乐变幻是不是很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值,简单粗暴哈= =
好了,这样就完整完成我们需要的功能。具体要完整代码的话请狠狠戳这里

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
1.3萬
獲贊與收藏
1519

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消