Opacity: zIndex: Get 100000 0FP0EXP Token to input your own list (json format) or insert json link:

Get 80000 0FP0EXP Token to input your own list (json format) or insert json link:

My Playlist:

JSON Ready: Not Ready

Ready State:

Network State:

Name:

Album:

Reference:

Background Color

General HTML background color:

Header background color:

Menu background color:

Content background color:

Widget background color:

Footer background color:

Font Size

Get 150000 0FP0EXP Token to unlock this feature.

Heading 1 font size:

Heading 2 font size:

Heading 3 font size:

Heading 4 font size:

Heading 5 font size:

Heading 6 font size:

Header font size:

Header Widget font size:

Menu font size:

Widget font size:

Footer font size:

Content font size:

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



Source Code

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

Ethereum Virtual Machine

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

Telegram Open Network

Telegram Open Network (TON) decentralized application.

Solana

Solana decentralized application.

Tron

Tron decentralized application.

Near

Near decentralized application.

Wax

Wax decentralized application.

Myalgo

Myalgo wallet for Algorand decentralized application.

Sync2

Sync2 wallet for Vechain decentralized application.

Scatter

Scatter wallet for EOS decentralized application.

Ontology

Ontology decentralized application.

Rabbet

Rabbet wallet for Stellar Lumen decentralized application.

Freighter

Freighter wallet for Stellar Lumen decentralized application.

Hivesigner

Hive Signer for Hive decentralized application.

Hivekeychain

Hive Key Chain for Hive decentralized application.

Zilpay

Zilpay wallet for Zilliqa decentralized application.

Neoline N2

Neoline wallet for Neo N2 decentralized application.

Neoline N3

Neoline wallet for Neo N3 decentralized application.

Keplr

Keplr wallet for Cosmos and other decentralized application.

Keeper

Keeper wallet for Waves decentralized application.

IWallet

IWallet for IOST decentralized application.

HTML Audio Widget

Get 60 0FP0EXP Token to remove widget entirely!

source code



source code
old source code

get any 0FP0EXP Token to automatically turn off or 10 0FP0EXP Token to remove this JavaScript Mining.

Get 50000 0FP0EXP Token to remove my NFTS advertisements!

Get 40000 0FP0EXP Token to remove this donation notification!

get 30000 0FP0EXP Token to remove this paypal donation.

View My Stats

Need referral links?

get 20000 0FP0EXP Token to remove my personal ADS.

word number: 4094

Time: 2024-06-16 04:28:44 +0000

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>