jPlayer 添加 解析Lrc 歌词文件功能

Micah2017年08月17日 16:16 分类 : Web前端  > JavaScript
阅读: 2292

分享到微信朋友圈

今天在用JPlayer 插件开发了HTML5音乐播放器时,后面忽然想加个同步歌词,但是看下网上要么单独的 js 实现的要么,就是连播放器也是基于HTML5的,我把自己整合的罗列下,大家看下。

这是基于 JPlayer 插件整合的 同步歌词,可能效果不是很好,大家想了解的看下。

首先是以个外部的歌词处理的js文件,songLrc.js ,对于歌词文件的处理,我没有做该项功能,大家可以通过ajax去获取对用歌词内容。

var songContent = "[ti:Can't Stop Love]\n[ar:Darin]\n[al:Can't Stop Love]";
function parseLyric(text) {
    //将文本分隔成一行一行,存入数组
    var lines = text.split('\n'),
        //用于匹配时间的正则表达式,匹配的结果类似[xx:xx.xx]
        pattern = /\[\d{2}:\d{2}.\d{2}\]/g,
        //保存最终结果的数组
        result = [];
    //去掉不含时间的行
    while (!pattern.test(lines[0])) {
        lines = lines.slice(1);
    };
    //上面用'\n'生成生成数组时,结果中最后一个为空元素,这里将去掉
    lines[lines.length - 1].length === 0 && lines.pop();
    lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {
        //提取出时间[xx:xx.xx]
        var time = v.match(pattern),
            //提取歌词
            value = v.replace(pattern, '');
        //因为一行里面可能有多个时间,所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式,需要进一步分隔
        time.forEach(function(v1, i1, a1) {
            //去掉时间里的中括号得到xx:xx.xx
            var t = v1.slice(1, -1).split(':');
            //将结果压入最终数组
            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
        });
    });
    //最后将结果数组中的元素按时间大小排序,以便保存之后正常显示歌词
    result.sort(function(a, b) {
        return a[0] - b[0];
    });
    return result;
}

这里的是 JPlayer 的代码文件

var jp = $("#jy-player");
var lyric = parseLyric(songContent);
jp.jPlayer({
		timeupdate: function(event) {
			//遍历所有歌词,看哪句歌词的时间与当然时间吻合
			for (var i = 0, l = lyric.length; i < l; i++) {
				if (event.jPlayer.status.currentTime /*当前播放的时间*/ > lyric[i][0]) {
					if(i>=1){
						$(".musicContent01").html(lyric[i-1][1]);
						$(".musicContent02").html(lyric[i][1]);
						$(".musicContent03").html(lyric[i+1][1]);
					}else{
						$(".musicContent02").html(lyric[i][1]);
						$(".musicContent03").html(lyric[i+1][1]);
					}
				};
			};
		},
		volume: 1,
		swfPath: "jplayer",
		supplied: "mp3,m4a,ogg",
		wmode: "window",
		solution: "html,flash",
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true,
		cssSelectorAncestor:"#song-play",
		loop:true,
		ended:function(){
			
		}
	});
这里我也只是做了一个简单功能块,大家可以顺着去拓展。

Micah
IT技术整理

精彩评论:1

还可以输入250个字 评论

昨日重现 2017-08-18 09:02:20
JPlayer 的确不错受用了,希望能完善下,用起来就方便多了。。。
还可以输入250个字 评论

评论成功

评论失败

 

微信公众号

微博