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

blackantt

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

最佳答案

月排行榜 / 总排行榜

ouyunfu

2023-2-23 14:31:07

下面是一个简单的 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[currentSubtitleIndex].text;
  
  timeoutId = setTimeout(function() {
    currentSubtitleIndex++;
    if (currentSubtitleIndex < subtitles.length) {
      showSubtitle();
    }
  }, subtitles[currentSubtitleIndex].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 字幕数据，以及根据需要调整样式和其他代码。

跳转到最佳答案楼层

ouyunfu

下面是一个简单的 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[currentSubtitleIndex].text;
  
  timeoutId = setTimeout(function() {
    currentSubtitleIndex++;
    if (currentSubtitleIndex < subtitles.length) {
      showSubtitle();
    }
  }, subtitles[currentSubtitleIndex].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

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, 一点不对，初学者就难住了。
谢谢