js播放mp3，并且读取srt字幕文件，展示字幕

下面是gpt生成的代码，能跑，但是性能gpt是不考虑的，自行斟酌


html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MP3播放器title>
head>
<body>
    <h1>MP3播放器h1>
    <audio id="audioPlayer" controls>
        <source src="a.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    audio>
    <div id="subtitleContainer">div>
 
    <script>
        // 读取SRT字幕文件
        function loadSubtitles() {
            fetch('a.srt')
                .then(response => response.text())
                .then(data => {
                    const subtitleContainer = document.getElementById('subtitleContainer');
                    subtitleContainer.innerHTML = '';
 
                    const subtitleLines = data.split('\n\n');
                    subtitleLines.forEach(line => {
						if(line==="")return;
                        const subtitleParts = line.split('\n');
                        const startTime = subtitleParts[1].split(' --> ')[0];
                        const text = subtitleParts.slice(2).join('
');
                        const subtitleElement = document.createElement('span');
                        subtitleElement.innerHTML = text+"，";
                        //subtitleElement.style.display = 'none';
                        subtitleContainer.appendChild(subtitleElement);
 
                        const audioPlayer = document.getElementById('audioPlayer');
                        audioPlayer.addEventListener('timeupdate', () => {
                            const currentTime = audioPlayer.currentTime;
                            if (currentTime >= convertTimeToSeconds(startTime)) {
                                subtitleElement.style.backgroundColor="rgb(255 243 156)";
                            } else {
                                subtitleElement.style.backgroundColor="";
                            }
                        });
                    });
                });
        }
 
        // 将时间转换为秒
        function convertTimeToSeconds(time) {
            const timeParts = time.split(':');
            const hours = parseInt(timeParts[0]);
            const minutes = parseInt(timeParts[1]);
            const seconds = parseFloat(timeParts[2].replace(',', '.'));
            return hours * 3600 + minutes * 60 + seconds;
        }
 
        // 加载字幕和音频
        window.addEventListener('load', () => {
            loadSubtitles();
        });
    script>
body>
html>

相关阅读:
MySQL3
GPT-4 到底能帮你干点啥？
AI直接剪视频？哥本哈根大学提出基于CLIP的文本视频目标编辑模型
理解JS的三座大山
Python学习
面向未来的服务网格发展：展望服务网格技术未来的发展方向和趋势
广西（柳州）创建国家级车联网先导区建设方案
HTML期末大作业(HTML+CSS+JavaScript响应式游戏资讯网站bootstrap网页)
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java家具商城hog7l
在 React Native 中实现 3D 动画

原文地址：https://blog.csdn.net/hongkid/article/details/140384599