index.html

<!doctype html>
<html>
  <head>
    <title>webvtt-player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"> 
  </head>
  <body>
    <header>
      webvtt-player (Forked)
      <hr>
    </header>
    
    <!-- get audio from web -->
    <label for="Audio">Audio (from web):</label>
    <select id="audio-id">
      <option disabled selected value> -- select an option -- </option>
    </select>
    <br ><br >

    <!-- get audio/caption from local -->
    <div class="upload">
      <span>Audio (from local):</span>
      <input type="file" id="video" name="Audio/Video (mp4)" accept=".mp3,.mp4,.mkv,.webm" >

      <br>
      <span>Caption (from local): </span>
      <input type="file" id="caption" name="Caption" accept=".vtt" >
    </div>
    <br>

    <div id="webvtt-player" data-audio="" data-transcript=""></div>
    <script id="player-src" type="text/javascript" src="webvtt-player.js"></script>

    <script>
      var PlayerSrc = document.getElementById('player-src').cloneNode(true);
      var select = document.getElementById("audio-id");

      function reload_player() {
        document.getElementById("player-src").remove();
        var script= document.createElement('script');
        script.src= PlayerSrc.src;
        script.id = "player-src";
        document.querySelector("body").appendChild(script);
      }

      // Audio file dropdown
      select.addEventListener("change", function(e) {
        var path = select.value;
        var player = document.getElementById("webvtt-player")
        player.dataset.audio = `data/${path}/audio.mp3`
        player.dataset.transcript = `data/${path}/transcript.vtt`
        reload_player();
      })

      // Get Audio paths in data/
      fetch('playlist.txt')
        .then(function(response) {
          return response.text();
        })
        .then(function(txt) {
          var files = txt.trim().split("\n").map( e => e.replace(/\/$/, "") );
          files.forEach((e) => {
            var opt = document.createElement("option")
            opt.value = e;
            opt.innerText = e;
            select.appendChild(opt)
          })
          select.dispatchEvent( new Event('change') );
        });


      // Upload audio/caption from local 
      const video = document.getElementById("video");
      const caption = document.getElementById("caption");
      
      video.addEventListener("change", function() {
          const objectURL = window.URL.createObjectURL(this.files[0]);
          document.getElementById('webvtt-player').dataset.audio = objectURL;
          reload_player();
      })
      caption.addEventListener("change", function() {
          const objectURL = window.URL.createObjectURL(this.files[0]);
          document.getElementById('webvtt-player').dataset.transcript = objectURL;
          reload_player();
      })
    </script>


</body>
</html>