[已解决]有 按句子srt/lrc 字幕 复读的html-css-javascript 代码吗？

blackantt

有 按句子srt/lrc 字幕 复读的html-css-javascript 代码吗？

最佳答案

月排行榜 / 总排行榜

ouyunfu

2023-2-23 14:31:07

下面是一个简单的 HTML/CSS/JavaScript 代码，可以用来实现按句子复读 srt/lrc 字幕：
HTML：

1. <div id="subtitle-container">
   
2.   <div id="subtitle"></div>
   
3. </div>
   
4. <button id="play-button">播放</button>
   

复制代码

CSS:

1. #subtitle-container {
   
2.   width: 600px;
   
3.   height: 80px;
   
4.   border: 1px solid black;
   
5.   margin-bottom: 20px;
   
6.   overflow: hidden;
   
7. }
   
8. 
   
9. #subtitle {
   
10.   width: 600px;
    
11.   height: 80px;
    
12.   font-size: 24px;
    
13.   line-height: 1.5;
    
14.   text-align: center;
    
15. }
    
16. 
    
17. #play-button {
    
18.   font-size: 24px;
    
19.   padding: 10px;
    
20.   border-radius: 10px;
    
21.   background-color: #007bff;
    
22.   color: white;
    
23.   cursor: pointer;
    
24. }
    

复制代码

JavaScript：

1. var subtitles = [
   
2.   {
   
3.     time: 1000,
   
4.     text: "第一句话"
   
5.   },
   
6.   {
   
7.     time: 5000,
   
8.     text: "第二句话"
   
9.   },
   
10.   {
    
11.     time: 9000,
    
12.     text: "第三句话"
    
13.   }
    
14. ];
    
15. 
    
16. var currentSubtitleIndex = 0;
    
17. var timeoutId;
    
18. 
    
19. function showSubtitle() {
    
20.   var subtitleElement = document.getElementById("subtitle");
    
21.   subtitleElement.innerText = subtitles[currentSubtitleIndex].text;
    
22.   
    
23.   timeoutId = setTimeout(function() {
    
24.     currentSubtitleIndex++;
    
25.     if (currentSubtitleIndex < subtitles.length) {
    
26.       showSubtitle();
    
27.     }
    
28.   }, subtitles[currentSubtitleIndex].time);
    
29. }
    
30. 
    
31. var playButton = document.getElementById("play-button");
    
32. playButton.onclick = function() {
    
33.   currentSubtitleIndex = 0;
    
34.   clearTimeout(timeoutId);
    
35.   showSubtitle();
    
36. }
    

复制代码

说明：

HTML 部分包含一个用于显示字幕的 div 元素和一个用于触发播放的 button 元素。
CSS 部分定义了字幕容器、字幕样式和播放按钮样式。
JavaScript 部分定义了一个包含时间和文本的字幕数组 subtitles，当前字幕的索引 currentSubtitleIndex，和一个定时器 ID timeoutId。
showSubtitle 函数用于显示当前索引指向的字幕，并通过 setTimeout 函数设置下一个字幕的显示时间。
playButton 元素的 onclick 事件处理函数用于初始化当前索引，清除定时器，然后调用 showSubtitle 函数开始播放字幕。
你需要将 subtitles 数组中的时间和文本替换为你自己的 srt/lrc 字幕数据，以及根据需要调整样式和其他代码。

跳转到最佳答案楼层

ouyunfu

下面是一个简单的 HTML/CSS/JavaScript 代码，可以用来实现按句子复读 srt/lrc 字幕：
HTML：

1. <div id="subtitle-container">
   
2.   <div id="subtitle"></div>
   
3. </div>
   
4. <button id="play-button">播放</button>
   

复制代码

CSS:

1. #subtitle-container {
   
2.   width: 600px;
   
3.   height: 80px;
   
4.   border: 1px solid black;
   
5.   margin-bottom: 20px;
   
6.   overflow: hidden;
   
7. }
   
8. 
   
9. #subtitle {
   
10.   width: 600px;
    
11.   height: 80px;
    
12.   font-size: 24px;
    
13.   line-height: 1.5;
    
14.   text-align: center;
    
15. }
    
16. 
    
17. #play-button {
    
18.   font-size: 24px;
    
19.   padding: 10px;
    
20.   border-radius: 10px;
    
21.   background-color: #007bff;
    
22.   color: white;
    
23.   cursor: pointer;
    
24. }
    

复制代码

JavaScript：

1. var subtitles = [
   
2.   {
   
3.     time: 1000,
   
4.     text: "第一句话"
   
5.   },
   
6.   {
   
7.     time: 5000,
   
8.     text: "第二句话"
   
9.   },
   
10.   {
    
11.     time: 9000,
    
12.     text: "第三句话"
    
13.   }
    
14. ];
    
15. 
    
16. var currentSubtitleIndex = 0;
    
17. var timeoutId;
    
18. 
    
19. function showSubtitle() {
    
20.   var subtitleElement = document.getElementById("subtitle");
    
21.   subtitleElement.innerText = subtitles[currentSubtitleIndex].text;
    
22.   
    
23.   timeoutId = setTimeout(function() {
    
24.     currentSubtitleIndex++;
    
25.     if (currentSubtitleIndex < subtitles.length) {
    
26.       showSubtitle();
    
27.     }
    
28.   }, subtitles[currentSubtitleIndex].time);
    
29. }
    
30. 
    
31. var playButton = document.getElementById("play-button");
    
32. playButton.onclick = function() {
    
33.   currentSubtitleIndex = 0;
    
34.   clearTimeout(timeoutId);
    
35.   showSubtitle();
    
36. }
    

复制代码

说明：

HTML 部分包含一个用于显示字幕的 div 元素和一个用于触发播放的 button 元素。
CSS 部分定义了字幕容器、字幕样式和播放按钮样式。
JavaScript 部分定义了一个包含时间和文本的字幕数组 subtitles，当前字幕的索引 currentSubtitleIndex，和一个定时器 ID timeoutId。
showSubtitle 函数用于显示当前索引指向的字幕，并通过 setTimeout 函数设置下一个字幕的显示时间。
playButton 元素的 onclick 事件处理函数用于初始化当前索引，清除定时器，然后调用 showSubtitle 函数开始播放字幕。
你需要将 subtitles 数组中的时间和文本替换为你自己的 srt/lrc 字幕数据，以及根据需要调整样式和其他代码。

blackantt

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吗？

blackantt

ouyunfu 发表于 2023-2-23 14:31
下面是一个简单的 HTML/CSS/JavaScript 代码，可以用来实现按句子复读 srt/lrc 字幕：
HTML：

能不能再把完整的 html头尾，尤其是 mp3 部分加进来，写成一个简单完整的demo。  不熟java, 一点不对，初学者就难住了。
谢谢