MP3音频歌词添加背景

最新推荐文章于 2024-08-30 07:43:57 发布

ckyue1219

最新推荐文章于 2024-08-30 07:43:57 发布

阅读量366

点赞数 1

分类专栏： audio 文章标签： mp3

本文链接：https://blog.csdn.net/ckyue1219/article/details/115897616

版权

audio 专栏收录该内容

1 篇文章

订阅专栏

前言

要实现一个音频播放到当前句时，添加背景颜色，类似歌词的高亮显示，参考了一些别人的代码，终于完成了，记录一下。

一、html

	<div>
        <audio id="audio" controls preload="auto" src="kcjl.mp3"></audio>   
    </div>
	<textarea id="gc" name="textfield" style="display:none;">
        [00:00.000]考试纪律
        [00:00.890]1.学生应按考试时间提前十分钟进入指定考场，按规定座次就座，并将学生证（身份证、准考证）置课桌左上角待查。
        [00:14.017]2.考生的试卷、答题纸、草稿纸由监考人员统一发放，考试结束时统一收回，不准带出考场。
        [00:25.173]3.除文具、计算器外，座位内外不准放置任何教材、参考资料、练习本、草稿纸等。
        [00:35.876]4.不准携带手机、小灵通等通信设备；不准携带快译通、掌上电脑、电子记事簿等具有存储功能的电子器材.
		[00:46.276]5.学生拿到试卷后，首先填写姓名、学号。不得多拿试卷，不得拆散装订好的试卷。
        [00:56.428]6.学生应保持考场肃静，不得在考场附近及走廊内讲话、喧哗。
		[01:04.526]7.试开始三十分钟后至考试结束前十五分钟学生可以交卷，提前交卷者须将试卷送交监考人员，并立即退出考场。
		[01:16.526]8.考试时间到点，停止答卷，由监考人员收卷点清，宣布可以离场后方可离开考场。
    </textarea>
    <ul id="content" style="overflow: hidden;">

    </ul>
	<script src="jquery-1.12.4.js"></script>
	<script src="kcjv.js"></script>

二、css

.back-color{
	background-color: #f00;
}

三、js

var audioArray = new Array(); 
function pushContent () {
	var gc = document.getElementById('gc').innerText;
	var gcArr = gc.split("\n");  
	$.each(gcArr, function (i, item) {
		var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));
		audioArray.push({
			t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),
			c: item.substring(item.indexOf("]") + 1, item.length)
		});
	});
	var ul = $("#content");
	$.each(audioArray, function (i, item) {
		var li = $("<li style='list-style: none;'>");
		li.html(item.c);
		ul.append(li);
	});
}
pushContent();
var lineNo = 0;
var audio = document.getElementById("audio");
audio.ontimeupdate = function () 
{
	if (lineNo == audioArray.length - 1 && audio.currentTime.toFixed(3) >= parseFloat(audioArray[lineNo].t)) {
		lineHeight(lineNo);
	}
	if (lineNo < medisArray.length - 1) {
		if (parseFloat(audioArray[lineNo].t) <= audio.currentTime.toFixed(3) &&
			audio.currentTime.toFixed(3) <= parseFloat(audioArray[lineNo + 1].t)) {
			lineHeight(lineNo);
			lineNo++;
		}
	}
};
function lineHeight(lineno){
	var nowline = $("#content").find("li").get(lineno);
	$(nowline).siblings("li").removeClass("back-color") ;
	$(nowline).addClass("back-color");
}