HTML Audio Widget

<audio controls>
  <source src="https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/pavrczohhj/8-01%20Dearly%20Beloved%20-Unchained%20%CF%87%20Version-.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<h2>Simple With Input</h2>

<audio id="audiosimplewithinput" controls>
Your browser does not support the audio element.
</audio>
<p>Insert audio hyperlink here: <input id="audiosimplewithinputtext" type="text" /></p>

<script>
document.getElementById("audiosimplewithinputtext").addEventListener("change", input_audio_hyperlink);
function input_audio_hyperlink() {
  document.getElementById("audiosimplewithinput").src = document.getElementById("audiosimplewithinputtext").value;
}
</script>

<h2>Simple With Input and Ready State</h2>

<audio id="audiosimplewithinputandreadystate" controls>
Your browser does not support the audio element.
</audio>
<p>Insert audio hyperlink here: <input id="audiosimplewithinputandreadystatetext" type="text" /></p>
<p>Ready State: <span id="audiosimplewithinputandreadystatedebug"></span></p>
<p>Network State: <span id="audiosimplewithinputandnetworkstatedebug"></span></p>

<script>
document.getElementById("audiosimplewithinputandreadystatetext").addEventListener("change", input_audio_hyperlink);
function input_audio_hyperlink() {
  document.getElementById("audiosimplewithinputandreadystate").src = document.getElementById("audiosimplewithinputandreadystatetext").value;
}

setInterval(() => {
  switch (document.getElementById("audiosimplewithinputandreadystate").readyState) {
    case 0:
      document.getElementById("audiosimplewithinputandreadystatedebug").innerHTML = "0: Not Ready";
      break;
    case 1:
      document.getElementById("audiosimplewithinputandreadystatedebug").innerHTML = "1: Meta Data Ready";
      break;
    case 2:
      document.getElementById("audiosimplewithinputandreadystatedebug").innerHTML = "2: Current Data Ready";
      break;
    case 3:
      document.getElementById("audiosimplewithinputandreadystatedebug").innerHTML = "3: Future Data Ready";
      break;
    case 4:
      document.getElementById("audiosimplewithinputandreadystatedebug").innerHTML = "4: Enough Data Ready";
      break;
    default:
      document.getElementById("audiosimplewithinputandreadystatedebug").innerHTML = "Unknown";
      break;
  }
  
  switch (document.getElementById("audiosimplewithinputandreadystate").networkState) {
    case 0:
      document.getElementById("audiosimplewithinputandnetworkstatedebug").innerHTML = "0: Empty";
      break;
    case 1:
      document.getElementById("audiosimplewithinputandnetworkstatedebug").innerHTML = "1: Idle";
      break;
    case 2:
      document.getElementById("audiosimplewithinputandnetworkstatedebug").innerHTML = "2: Loading";
      break;
    case 3:
      document.getElementById("audiosimplewithinputandnetworkstatedebug").innerHTML = "3: No Source";
      break;
    default:
      document.getElementById("audiosimplewithinputandnetworkstatedebug").innerHTML = "Unknown";
      break;
  }
}, 500);
</script>

<h2>Audio Playlist Using JavaScript Object</h2>
<audio id="audioplayer" controls>
Your browser does not support the audio element.
</audio>
<p><button id="audioenabler">Enable Audio</button><button id="audioprevious">previous</button><button id="audionext">next</button></p>
<p>Ready State: <span id="audioreadystate"></span></p>
<p>Network State: <span id="audionetworkstate"></span></p>
<p>Name: <span id="audioname"></span></p>
<p>Album: <span id="audioalbum"></span></p>
<p>Reference: <span id="audioreference"></span></p>

<script>
const ost =  [
	  {
      "name": "Master of Masters",
      "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-17%2520Master%2520of%2520Masters.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/zrzqvycshp/8-17%20Master%20of%20Masters.mp3"
    },
    {
      "name": "Passing the Power",
      "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-15%2520Passing%2520the%2520Power.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/ctpghkufxn/8-15%20Passing%20the%20Power.mp3"
    },
    {
      "name": "The Foretellers",
      "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-16%2520The%2520Foretellers.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/xnkoxdltyi/8-16%20The%20Foretellers.mp3"
    },
    {
      "name": "Scala ad Caelum",
      "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/6-07%2520Scala%2520ad%2520Caelum.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/ueujhnkddi/6-07%20Scala%20ad%20Caelum.mp3"
    },
    {
      "name": "Behave irrationally",
      "album": "Valkyrie Profile -Covenant of the Plume",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/valkyrie-profile-covenant-of-the-plume-original-sound-track/1-02%2520Behave%2520irrationally.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/valkyrie-profile-covenant-of-the-plume-original-sound-track/nrlmnoqkyu/1-02%20Behave%20irrationally.mp3"
    },
    {
      "name": "Thin Haze",
      "album": "Valkyrie Profile -Covenant of the Plume",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/valkyrie-profile-covenant-of-the-plume-original-sound-track/2-03%2520Thin%2520Haze.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/valkyrie-profile-covenant-of-the-plume-original-sound-track/zvcsfsibjk/2-03%20Thin%20Haze.mp3"
    },
    {
      "name": "Confidence in the domination",
      "album": "Valkyrie Profile -Covenant of the Plume",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/valkyrie-profile-covenant-of-the-plume-original-sound-track/1-19%2520Confidence%2520in%2520the%2520domination.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/valkyrie-profile-covenant-of-the-plume-original-sound-track/vknhbqrmge/1-19%20Confidence%20in%20the%20domination.mp3"
    },
    {
      "name": "Dearly Beloved -Unchained χ Version",
      "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
      "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-01%2520Dearly%2520Beloved%2520-Unchained%2520%25CF%2587%2520Version-.mp3?u=2876767'>khinsider</a>",
      "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/pavrczohhj/8-01%20Dearly%20Beloved%20-Unchained%20%CF%87%20Version-.mp3"
    }
];

const audio_player = document.getElementById("audioplayer");
const audio_ready_state = document.getElementById("audioreadystate");
const audio_network_state = document.getElementById("audionetworkstate");
const audio_name = document.getElementById("audioname");
const audio_album = document.getElementById("audioalbum");
const audio_reference = document.getElementById("audioreference");
let audio_number = 0;
const audio_enabler = document.getElementById("audioenabler");
audio_enabler.addEventListener("click", audio_enabling);
const audio_next = document.getElementById("audionext");
audio_next.addEventListener("click", audio_nexting);
const audio_previous = document.getElementById("audioprevious");
audio_previous.addEventListener("click", audio_previousing);
audio_player.addEventListener("ended", audio_nexting);

audio_info();

function audio_info() {
  audio_name.innerHTML = ost[audio_number].name;
  audio_album.innerHTML = ost[audio_number].album;
  audio_reference.innerHTML = ost[audio_number].reference;
  audio_player.src = ost[audio_number].source;
}

function audio_enabling() {
  if(audio_player.autoplay){
    audio_player.pause();
    audio_player.autoplay = false;
    audio_enabler.innerHTML = "Enable Audio";
  } else {
    audio_player.play();
    audio_player.autoplay = true;
    audio_enabler.innerHTML = "Disable Audio";
  }
}

function audio_nexting(){
  if(audio_number == ost.length - 1){
    audio_number = 0;
    audio_info();
  } else {
    audio_number++;
    audio_info();
  }
}

function audio_previousing(){
  if(audio_number == 0){
    audio_number = ost.length - 1;
    audio_info();
  } else {
    audio_number--;
    audio_info();
  }
}

setInterval(() => {
  switch (audio_player.readyState) {
    case 0:
      audio_ready_state.innerHTML = "0: Not Ready";
      break;
    case 1:
      audio_ready_state.innerHTML = "1: Meta Data Ready";
      break;
    case 2:
      audio_ready_state.innerHTML = "2: Current Data Ready";
      break;
    case 3:
      audio_ready_state.innerHTML = "3: Future Data Ready";
      break;
    case 4:
      audio_ready_state.innerHTML = "4: Enough Data Ready";
      break;
    default:
      audio_ready_state.innerHTML = "Unknown";
      break;
  }

  switch (audio_player.networkState) {
    case 0:
      audio_network_state.innerHTML = "0: Empty";
      break;
    case 1:
      audio_network_state.innerHTML = "1: Idle";
      break;
    case 2:
      audio_network_state.innerHTML = "2: Loading";
      break;
    case 3:
      audio_network_state.innerHTML = "3: No Source";
      break;
    default:
      audio_network_state.innerHTML = "Unknown";
      break;
  }
}, 500);
</script>

<h2>Audio Playlist Using JSON Input File or Link</h2>
<audio id="jsonaudioplayer" controls>
Your browser does not support the audio element.
</audio>
<p><input type="file" id="jsonostfileinput" /> or insert json link: <input type="text" id="jsonostlinkinput" /></p>
<p>JSON Ready: <span id="audiojsonready">Not Ready</span></p>
<p><button id="jsonaudioenabler">Enable Audio</button><button id="jsonaudioprevious">previous</button><button id="jsonaudionext">next</button></p>
<p>Ready State: <span id="jsonaudioreadystate"></span></p>
<p>Network State: <span id="jsonaudionetworkstate"></span></p>
<p>Name: <span id="jsonaudioname"></span></p>
<p>Album: <span id="jsonaudioalbum"></span></p>
<p>Reference: <span id="jsonaudioreference"></span></p>

<script>
const json_ost_file_input = document.getElementById("jsonostfileinput");
const json_ost_link_input = document.getElementById("jsonostlinkinput");
var json_ost;

json_ost_file_input.addEventListener("change", (event) => {
  document.getElementById("audiojsonready").innerHTML = "Not Ready";
  const selectedFile = event.target.files[0];
  
  const fileReader = new FileReader();
  fileReader.onload = function (event) {
    const content = JSON.parse(event.target.result);
    json_ost = content.ost;
    json_audio_info();
    document.getElementById("audiojsonready").innerHTML = "Ready";
  };
  
  fileReader.readAsText(selectedFile);
});

json_ost_link_input.addEventListener("change", (event) => {
  document.getElementById("audiojsonready").innerHTML = "Not Ready";
  const audiojsonlinkxmlhttp = new XMLHttpRequest();
  audiojsonlinkxmlhttp.onload = function() {
    const content = JSON.parse(this.responseText);
    json_ost = content.ost;
    json_audio_info();
    document.getElementById("audiojsonready").innerHTML = "Ready";
  }
  audiojsonlinkxmlhttp.open("GET", json_ost_link_input.value);
  audiojsonlinkxmlhttp.send();
});
/* Below is the format of the json:
{ "ost" :  
    [
        {
          "name": "Master of Masters",
          "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
          "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-17%2520Master%2520of%2520Masters.mp3?u=2876767'>khinsider</a>",
          "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/zrzqvycshp/8-17%20Master%20of%20Masters.mp3"
        },
        {
          "name": "Passing the Power",
          "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
          "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-15%2520Passing%2520the%2520Power.mp3?u=2876767'>khinsider</a>",
          "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/ctpghkufxn/8-15%20Passing%20the%20Power.mp3"
        },
        {
          "name": "Dearly Beloved -Unchained χ Version",
          "album": "KINGDOM HEARTS - III, II.8, Unchained χ & Union χ [Cross]",
          "reference": "<a href='https://downloads.khinsider.com/game-soundtracks/album/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/8-01%2520Dearly%2520Beloved%2520-Unchained%2520%25CF%2587%2520Version-.mp3?u=2876767'>khinsider</a>",
          "source": "https://vgmsite.com/soundtracks/kingdom-hearts-iii-ii.8-unchained-union-cross-original-soundtrack/pavrczohhj/8-01%20Dearly%20Beloved%20-Unchained%20%CF%87%20Version-.mp3"
        }
    ]
}
*/

const json_audio_player = document.getElementById("jsonaudioplayer");
const json_audio_ready_state = document.getElementById("jsonaudioreadystate");
const json_audio_network_state = document.getElementById("jsonaudionetworkstate");
const json_audio_name = document.getElementById("jsonaudioname");
const json_audio_album = document.getElementById("jsonaudioalbum");
const json_audio_reference = document.getElementById("jsonaudioreference");
let json_audio_number = 0;
const json_audio_enabler = document.getElementById("jsonaudioenabler");
json_audio_enabler.addEventListener("click", json_audio_enabling);
const json_audio_next = document.getElementById("jsonaudionext");
json_audio_next.addEventListener("click", json_audio_nexting);
const json_audio_previous = document.getElementById("jsonaudioprevious");
json_audio_previous.addEventListener("click", json_audio_previousing);
json_audio_player.addEventListener("ended", json_audio_nexting);

function json_audio_info() {
  json_audio_name.innerHTML = json_ost[json_audio_number].name;
  json_audio_album.innerHTML = json_ost[json_audio_number].album;
  json_audio_reference.innerHTML = json_ost[json_audio_number].reference;
  json_audio_player.src = json_ost[json_audio_number].source;
}

function json_audio_enabling() {
  if(json_audio_player.autoplay){
    json_audio_player.pause();
    json_audio_player.autoplay = false;
    json_audio_enabler.innerHTML = "Enable Audio";
  } else {
    json_audio_player.play();
    json_audio_player.autoplay = true;
    json_audio_enabler.innerHTML = "Disable Audio";
  }
}

function json_audio_nexting(){
  if(json_audio_number == json_ost.length - 1){
    json_audio_number = 0;
    json_audio_info();
  } else {
    json_audio_number++;
    json_audio_info();
  }
}

function json_audio_previousing(){
  if(json_audio_number == 0){
    json_audio_number = json_ost.length - 1;
    json_audio_info();
  } else {
    json_audio_number--;
    json_audio_info();
  }
}

setInterval(() => {
  switch (json_audio_player.readyState) {
    case 0:
      json_audio_ready_state.innerHTML = "0: Not Ready";
      break;
    case 1:
      json_audio_ready_state.innerHTML = "1: Meta Data Ready";
      break;
    case 2:
      json_audio_ready_state.innerHTML = "2: Current Data Ready";
      break;
    case 3:
      json_audio_ready_state.innerHTML = "3: Future Data Ready";
      break;
    case 4:
      json_audio_ready_state.innerHTML = "4: Enough Data Ready";
      break;
    default:
      json_audio_ready_state.innerHTML = "Unknown";
      break;
  }

  switch (json_audio_player.networkState) {
    case 0:
      json_audio_network_state.innerHTML = "0: Empty";
      break;
    case 1:
      json_audio_network_state.innerHTML = "1: Idle";
      break;
    case 2:
      json_audio_network_state.innerHTML = "2: Loading";
      break;
    case 3:
      json_audio_network_state.innerHTML = "3: No Source";
      break;
    default:
      json_audio_network_state.innerHTML = "Unknown";
      break;
  }
}, 500);
</script>