幸运的人一生都在被童年治愈,不幸的人一生都在治愈童年。
无言博客
一个菜鸟程序员,在复制粘贴的道路上越走越远!!!
网页使用html5的audio标签实现实时同步歌词
无言博客 327 2020-3-3

想要自己的网页实现歌词同步,首先我们需要建立一个audio标签

<audio src="music/test.mp3" id="myaudio" autoplay controls>
    您的浏览器不支持audio属性,请更换浏览器再进行浏览。
</audio>
有了这个标签,恭喜你,运行网页就可以听歌了

可是想要显示歌词到页面,还不够

我们还需要lrc歌词文件

在网页上播放音乐,如果需要把歌词下载下来然后上传到服务器再调用的话会不会太麻烦了些?

所以我们就需要调用网络歌词文件,是不是就方便了很多?

话不多说,我们先上代码

在需要的位置创建一个存放歌词的容器

<div id="lyric"></div>

然后是js部分

//先创建一个歌词显示的容器
var lrcBox = $('#lyric'),
//和一个存放歌词数组的容器
lyric = [],
myaudio = $('#myaudio')[0];
//然后创建一个用于显示歌词状态的函数
function LrcTip(str){
	lrcBox.html(str);
}

然后我们需要对歌词进行解析,分割成[time,text],[time,text]....的数组形式

function parseLyric(text) {
	var lines = text.split('\n'),
		pattern = /\[\d{2}:\d{2}.\d{2}\]/g,
		result = [];
		while (!pattern.test(lines[0])) {
			lines = lines.slice(1);
		};
		lines[lines.length - 1].length === 0 && lines.pop();
		lines.forEach(function(v, i, a) {
			var time = v.match(pattern),
			value = v.replace(pattern, '');
			time.forEach(function(v1, i1, a1) {
				var t = v1.slice(1, -1).split(':');
				if(value!='')result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
			});
		});
		result.sort(function(a, b) {
		return a[0] - b[0];
	});
	return result;
}

使用get获取远程音乐文件的函数

function getLyric(url) {
	if(!url){
		LrcTip('暂无歌词');
		return;
	}
	LrcTip('正在加载歌词...');
	$.get(url,function(text){
		lyric = parseLyric(text);
		if(lyric.length <= 0){
			LrcTip('加载失败!');
			return;
		}else{
			var htmls = '';
			for (var i = 0, l = lyric.length; i < l; i++) {
				htmls += '<li class="lrcline line_'+i+'">'+lyric[i][1]+'</li>';
			};
			lrcBox.html(htmls);
		}
	},"text");
}

然后调用

getLyric('http://www.xxxxx.com/lrc.txt');

至此,我们的歌词容器中就出现了歌词内容,然后我们监听音乐的播放时间

myaudio.ontimeupdate = function(e) {
	if(lyric.length > 0){
		for (var i = 0, l = lyric.length; i < l; i++) {
			if ((lyric[i][0]-.5) <= this.currentTime) {
				if(i > 0){
				    $('.line_'+i).addClass('currline').siblings('.currline').removeClass('currline');
				}
			};
		};
	}
}

然后加上css就成功啦

<style>
#myaudio{ width:100%;}
#lyric{text-align: center; margin:10px 0;}
li.lrcline{font-size:14px;color:#000;padding:3px 0;}
li.currline{font-size:17px;color:#1dbd48}
</style>

实例演示: 点击播放

END

发表评论: