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

hongkid

于 2024-07-12 17:20:45 发布

阅读量101

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/hongkid/article/details/140384599

版权

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

<!DOCTYPE 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('<br>');
                        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>