有 按句子srt/lrc 字幕 复读的html-css-javascript 代码吗？
有 按句子srt/lrc 字幕 复读的html-css-javascript 代码吗？下面是一个简单的 HTML/CSS/JavaScript 代码，可以用来实现按句子复读 srt/lrc 字幕：
HTML：
<div id="subtitle-container">
<div id="subtitle"></div>
</div>
<button id="play-button">播放</button>
CSS:
#subtitle-container {
width: 600px;
height: 80px;
border: 1px solid black;
margin-bottom: 20px;
overflow: hidden;
}
#subtitle {
width: 600px;
height: 80px;
font-size: 24px;
line-height: 1.5;
text-align: center;
}
#play-button {
font-size: 24px;
padding: 10px;
border-radius: 10px;
background-color: #007bff;
color: white;
cursor: pointer;
}
JavaScript：
var subtitles = [
{
time: 1000,
text: "第一句话"
},
{
time: 5000,
text: "第二句话"
},
{
time: 9000,
text: "第三句话"
}
];
var currentSubtitleIndex = 0;
var timeoutId;
function showSubtitle() {
var subtitleElement = document.getElementById("subtitle");
subtitleElement.innerText = subtitles.text;
timeoutId = setTimeout(function() {
currentSubtitleIndex++;
if (currentSubtitleIndex < subtitles.length) {
showSubtitle();
}
}, subtitles.time);
}
var playButton = document.getElementById("play-button");
playButton.onclick = function() {
currentSubtitleIndex = 0;
clearTimeout(timeoutId);
showSubtitle();
}
说明：
HTML 部分包含一个用于显示字幕的 div 元素和一个用于触发播放的 button 元素。
CSS 部分定义了字幕容器、字幕样式和播放按钮样式。
JavaScript 部分定义了一个包含时间和文本的字幕数组 subtitles，当前字幕的索引 currentSubtitleIndex，和一个定时器 ID timeoutId。
showSubtitle 函数用于显示当前索引指向的字幕，并通过 setTimeout 函数设置下一个字幕的显示时间。
playButton 元素的 onclick 事件处理函数用于初始化当前索引，清除定时器，然后调用 showSubtitle 函数开始播放字幕。
你需要将 subtitles 数组中的时间和文本替换为你自己的 srt/lrc 字幕数据，以及根据需要调整样式和其他代码。 本帖最后由 blackantt 于 2023-2-23 15:39 编辑
ouyunfu 发表于 2023-2-23 14:31
下面是一个简单的 HTML/CSS/JavaScript 代码，可以用来实现按句子复读 srt/lrc 字幕：
HTML：
整个网上没找到这种复读代码，能否完善功能(输入MP3，srt/lrc/vtt, 定义每句复读次数，取消复读)，放到github上。
https://fishc.com.cn/thread-224605-1-1.html， 能跟这个2合1吗？ ouyunfu 发表于 2023-2-23 14:31
下面是一个简单的 HTML/CSS/JavaScript 代码，可以用来实现按句子复读 srt/lrc 字幕：
HTML：
能不能再把完整的 html头尾，尤其是 mp3 部分加进来，写成一个简单完整的demo。不熟java, 一点不对，初学者就难住了。
谢谢
页:
[1]