HTML Audio Widget

Background Color

General HTML background color:

Header background color:

Menu background color:

Content background color:

Widget background color:

Footer background color:

Font Color

Get 200000 0FP0EXP Token to unlock this feature.

Heading 1 font color:

Heading 2 font color:

Heading 3 font color:

Heading 4 font color:

Heading 5 font color:

Heading 6 font color:

Header font color:

Header Widget font color:

Menu font color:

Widget font color:

Footer font color:

Content font color:

Font Shadow

Get 250000 0FP0EXP Token to unlock this feature.

Heading 1 font shadow:

Heading 2 font shadow:

Heading 3 font shadow:

Heading 4 font shadow:

Heading 5 font shadow:

Heading 6 font shadow:

Header font shadow:

Header Widget font shadow:

Menu font shadow:

Widget font shadow:

Footer font shadow:

Content font shadow:

Other Styles Coming Soon

Click the above image for basic sourced and click following button for processing token source code.

Ethereum and EVM (ETC, BSC, AVAX-C-Chain, Polygon, etc).

Telegram Open Network (TON) decentralized application.

Solana decentralized application.

Tron decentralized application.

Near decentralized application.

Wax decentralized application.

Myalgo wallet for Algorand decentralized application.

Sync2 wallet for Vechain decentralized application.

Scatter wallet for EOS decentralized application.

Anchor Link wallet for EOS decentralized application.

Ontology decentralized application.

Rabbet wallet for Stellar Lumen decentralized application.

Freighter wallet for Stellar Lumen decentralized application.

Hive Signer for Hive decentralized application.

Hive Key Chain for Hive decentralized application.

Zilpay wallet for Zilliqa decentralized application.

Neoline wallet for Neo N2 decentralized application.

Neoline wallet for Neo N3 decentralized application.

Keplr wallet for Cosmos and other decentralized application.

Keeper wallet for Waves decentralized application.

IWallet for IOST decentralized application.

Get 60 0FP0EXP Token to remove widget entirely!

View My Stats

get 20000 0FP0EXP Token to remove my personal ADS.

Simple

<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>

Simple With Input

Insert audio hyperlink here:

<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>

Simple With Input and Ready State

Insert audio hyperlink here:

Ready State:

Network State:

<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>

Audio Playlist Using JavaScript Object

Ready State:

Network State:

Name:

Album:

Reference:

<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>

Audio Playlist Using JSON Input File or Link

or insert json link:

JSON Ready: Not Ready

Ready State:

Network State:

Name:

Album:

Reference:

<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>