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

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

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>MP3播放器title>
    6. head>
    7. <body>
    8.     <h1>MP3播放器h1>
    9.     <audio id="audioPlayer" controls>
    10.         <source src="a.mp3" type="audio/mpeg">
    11.         Your browser does not support the audio element.
    12.     audio>
    13.     <div id="subtitleContainer">div>
    14.  
    15.     <script>
    16.         // 读取SRT字幕文件
    17.         function loadSubtitles() {
    18.             fetch('a.srt')
    19.                 .then(response => response.text())
    20.                 .then(data => {
    21.                     const subtitleContainer = document.getElementById('subtitleContainer');
    22.                     subtitleContainer.innerHTML = '';
    23.  
    24.                     const subtitleLines = data.split('\n\n');
    25.                     subtitleLines.forEach(line => {
    26. 						if(line==="")return;
    27.                         const subtitleParts = line.split('\n');
    28.                         const startTime = subtitleParts[1].split(' --> ')[0];
    29.                         const text = subtitleParts.slice(2).join('
      '      );
    30.                         const subtitleElement = document.createElement('span');
    31.                         subtitleElement.innerHTML = text+"，";
    32.                         //subtitleElement.style.display = 'none';
    33.                         subtitleContainer.appendChild(subtitleElement);
    34.  
    35.                         const audioPlayer = document.getElementById('audioPlayer');
    36.                         audioPlayer.addEventListener('timeupdate', () => {
    37.                             const currentTime = audioPlayer.currentTime;
    38.                             if (currentTime >= convertTimeToSeconds(startTime)) {
    39.                                 subtitleElement.style.backgroundColor="rgb(255 243 156)";
    40.                             } else {
    41.                                 subtitleElement.style.backgroundColor="";
    42.                             }
    43.                         });
    44.                     });
    45.                 });
    46.         }
    47.  
    48.         // 将时间转换为秒
    49.         function convertTimeToSeconds(time) {
    50.             const timeParts = time.split(':');
    51.             const hours = parseInt(timeParts[0]);
    52.             const minutes = parseInt(timeParts[1]);
    53.             const seconds = parseFloat(timeParts[2].replace(',', '.'));
    54.             return hours * 3600 + minutes * 60 + seconds;
    55.         }
    56.  
    57.         // 加载字幕和音频
    58.         window.addEventListener('load', () => {
    59.             loadSubtitles();
    60.         });
    61.     script>
    62. body>
    63. html>

  • 相关阅读:
    天软特色因子看板(2023.10 第04期)
    倒计数数字旋转特效
    【mcuclub】四相五线步进电机
    springboot整合百度富文本编辑器ueditor实现图片上传和文件上传以及回显
    BSV 上用于通用计算的隐私非交互式赏金
    有关动态规划的相关优化思想
    强化学习与ChatGPT：快速让AI学会玩贪食蛇游戏！
    阿里拆了中台，中台还有未来吗？
    VSCode新建Vue项目
    网页html产生随机MAC地址
  • 原文地址：https://blog.csdn.net/hongkid/article/details/140384599