哪个html5 网页音乐播放器能指定单句重复次数呢？

blackantt · 发表于 2024-3-20 15:14:30

本帖最后由 blackantt 于 2024-3-20 18:28 编辑

AI写的(https://fishc.com.cn/thread-241179-1-1.html) 老是不对。

1. 能改改将就实现: 从1.mp3，1.srt 或者 1.lrc读句子，然后用按钮指定每句读 3 次，再跳到下一句，读3次。直至mp3播放完吗。
2.或者 github 上有这种现成的html5 网页播放器吗？(这里有一个，就是不能按句复读，供参考，https://imajineweb.com/javascriptaudioplayer/)

下面这个是 Gemini 写的，还是不行

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video with SRT Subtitles</title>
</head>
<body>
<video id="video" width="320" height="240" controls>
<source src="1.mp3" type="audio/mpeg">
</video>
<div id="subtitles"></div>
<script>
// Get the video and subtitles elements
var video = document.getElementById('video');
var subtitles = document.getElementById('subtitles');
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Open a GET request to the SRT file
xhr.open('GET', '1.srt');
// Set the response type to text
xhr.responseType = 'text';
// Send the request
xhr.send();
// When the request is complete, parse the SRT file
xhr.onload = function() {
if (xhr.status === 200) {
// Parse the SRT file into an array of subtitle objects
var subtitlesArray = parseSRT(xhr.responseText);
// Add the subtitles to the page
for (var i = 0; i < subtitlesArray.length; i++) {
var subtitle = subtitlesArray[i];
var p = document.createElement('p');
p.textContent = subtitle.text;
p.style.display = 'none';
subtitles.appendChild(p);
}
// Listen for the video's timeupdate event
video.addEventListener('timeupdate', function() {
// Get the current time of the video
var currentTime = video.currentTime;
// Loop through the subtitles and find the one that matches the current time
for (var i = 0; i < subtitlesArray.length; i++) {
var subtitle = subtitlesArray[i];
// If the current time is between the start and end times of the subtitle, display the subtitle
if (currentTime >= subtitle.start && currentTime <= subtitle.end) {
var p = subtitles.querySelector('p:nth-child(' + (i+1));
p.style.display = 'block';
setTimeout(function () {
p.style.display = 'none';
}, subtitle.end - subtitle.start);
setTimeout(function () {
p.style.display = 'block';
}, subtitle.end - subtitle.start);
setTimeout(function () {
p.style.display = 'none';
}, subtitle.end - subtitle.start);
} else {
var p = subtitles.querySelector('p:nth-child(' + (i+1));
p.style.display = 'none';
}
}
});
}
};
// Parse the SRT file into an array of subtitle objects
function parseSRT(srt) {
// Split the SRT file into an array of lines
var lines = srt.split('\n');
// Create an array of subtitle objects
var subtitlesArray = [];
// Loop through the lines and create a subtitle object for each line
for (var i = 0; i < lines.length; i++) {
// Get the start and end times of the subtitle
var timeString = lines[i];
var timeParts = timeString.split(' --> ');
var startTime = timeParts[0];
var endTime = timeParts[1];
// Get the text of the subtitle
var text = lines[i+1];
// Create a subtitle object
var subtitle = {
start: convertTimeStringToSeconds(startTime),
end: convertTimeStringToSeconds(endTime),
text: text
};
// Add the subtitle object to the array
subtitlesArray.push(subtitle);
// Skip the next line (which is an empty line)
i++;
}
// Return the array of subtitle objects
return subtitlesArray;
}
// Convert a time string to seconds
function convertTimeStringToSeconds(timeString) {
// Split the time string into hours, minutes, seconds, and milliseconds
var parts = timeString.split(':');
var hours = parseInt(parts[0]);
var minutes = parseInt(parts[1]);
var seconds = parseInt(parts[2]);
var milliseconds = parseInt(parts[3]);
// Convert the hours, minutes, and seconds to seconds
var totalSeconds = hours * 3600 + minutes * 60 + seconds;
// Add the milliseconds to the total seconds
totalSeconds += milliseconds / 1000;
// Return the total seconds
return totalSeconds;
}
</script>
</body>
</html>

复制代码

下面这个也不行

<html>
<head>
<title>HTML5 音频播放器</title>
</head>
<body>
<h1>HTML5 音频播放器</h1>
<audio id="audio" controls>
<source src="1.mp3">
</audio>
<div id="subtitles"></div>
<script>
var audio = document.getElementById('audio');
var subtitles = document.getElementById('subtitles');
// 加载字幕文件
var xhr = new XMLHttpRequest();
xhr.open('GET', '1.srt');
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.onload = function() {
if (xhr.status === 200) {
// 解析字幕文件
var srt = xhr.responseText;
var lines = srt.split('\n');
var cues = [];
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
if (line.startsWith('WEBVTT')) {
continue; // 跳过 WebVTT 头部
}
var parts = line.split(' --> ');
var start = parts[0];
var end = parts[1];
var text = parts[2];
cues.push({
start: start,
end: end,
text: text
});
}
// 将字幕添加到 DOM 中
for (var i = 0; i < cues.length; i++) {
var cue = cues[i];
var p = document.createElement('p');
p.innerHTML = cue.text;
subtitles.appendChild(p);
}
// 添加事件监听器以在音频播放时显示字幕
audio.addEventListener('timeupdate', function() {
// 获取当前播放时间
var time = audio.currentTime;
// 查找当前正在播放的字幕
var currentCue = null;
for (var i = 0; i < cues.length; i++) {
var cue = cues[i];
if (time >= cue.start && time <= cue.end) {
currentCue = cue;
break;
}
}
// 如果找到了匹配的字幕，则显示它
if (currentCue) {
for (var i = 0; i < 3; i++) {
subtitles.children[i].innerHTML = currentCue.text;
}
}
});
}
};
xhr.send();
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 哪个html5 网页音乐播放器能指定单句重复次数呢？