前言

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

一、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");
}

参考链接：https://blog.csdn.net/maid_04/article/details/80849563

实现效果

后记

1.如果你需要文字转换语音的工具：文字转语音工具
2.如果你需要格式工厂将音频转成MP3格式：格式工厂FormatFactory_5.7.1.exe
3.完整版代码下载：考场纪律音频更改背景完整版.zip

MP3音频歌词添加背景相关推荐

vue上传录音_通过使用vue如何才能实现添加mp3音频文件
本篇文章主要介绍了vue中添加mp3音频文件的方法,现在分享给大家,也给大家做个参考. 有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放, ...
在Android Studio中添加mp3音频文件
1.在res文件夹下创建raw文件夹 2.将mp3文件粘贴到raw中即可注意事项: 在android studio开发环境中,需要将目录结构切换到android模式下如果是poject模式会怎样? ...
mp3音频剪辑软件怎么使用？
电脑上剪辑音频是非常方便的,对于专业的剪辑音乐人员是非常简单的,但是对于一些只是想要简单的剪辑歌曲和音频新手来说是有点复杂的,那么如何选择一款适合我们剪辑需求的软件,大部分人获取剪辑工具都是通过搜索& ...
HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表属性值描述 au ...
html 多个mp3,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表属性值描述 autoplay autoplay 添加该属性后,音频会 ...
qmc0文件怎么转换mp3_音频转换器哪个好怎么剪切MP3音频制作手机铃声
在生活中比较常见的音频格式就是MP3格式了,因为这种格式使用范围广泛,所以我们也会经常需要对其进行编辑,比如说设置手机铃声,大家都知道,手机的自带铃声很少,而且比较单一,如果想要自己制作铃声就需要一款 ...
怎样将腾讯视频qlv格式转换成mp3音频
很多人都用腾讯视频观看电影.电视及各种视频,很多时候,看到精彩的视频想把它们保存下来,并且能够像普通视频那样播放.腾讯视频有一个缓存视频的功能,但是视频下载之后,发现都是.qlv格式,只有腾讯视频播放 ...
快速将MP3音频转换为WAV的软件
不知道你们当中有没有做过文员的工作呢?小编以前做了一年的文员,主要的工作就是整理资料等各种上面下来的任务,其中最头疼的莫过于格式转换了,比如说老板有一份文件需要你转换格式,但是由于我们自身的技术能力不 ...
怎么把视频转成mp3音频，下面有四个方法
你有没有遇到过这种情况,看了一部电影或者纪录片,里面的背景音乐或者对白让你很感动,但是我们只需要其中的音频部分,比如在手机上收听音乐或者创作自己的音频内容.这时候我们可以先把视频保存下来,然后通过视频 ...

MP3音频歌词添加背景

前言

一、html

二、css

三、js

实现效果

后记

MP3音频歌词添加背景相关推荐

最新文章

热门文章