DEV Community

Daniel Rodrigo Vega
Daniel Rodrigo Vega

Posted on

How do I change Now Playing song with Static API Json from a HTML Code?

Dear all,
I have a code (web-player), but I tried to load the now playing data from a Static API JSON from my server. In fact, the idea is to load artist name, song and automatically when its posible.
I will be extremely grateful to you for doing so.

Image description

Here's my code:

<!DOCTYPE html>
    <link rel="stylesheet" href="" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
      .sticky-bottom {
        bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 1030;
    <div class="sticky-bottom bg-dark">
      <div class="container-fluid">
        <div class="row py-3">
          <div class="col-2 text-center">
            <i class="fa fa-music text-white"></i>
          <div class="col-8">
            <p class="text-white m-0 now-playing">Now Playing: Loading...</p>
            <p class="text-white m-0 current-time">Current Time: Loading...</p>

    <audio id="player" controls>
      <source src="" type="audio/mpeg">

    <script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src=""></script>
      const player = new Plyr("#player");
      const nowPlaying = document.querySelector(".now-playing");
      const currentTime = document.querySelector(".current-time");

      player.on("playing", event => {
        nowPlaying.innerText = `Now Playing: ${ || "Unknown"}`;

      setInterval(() => {
        currentTime.innerText = `Current Time: ${new Date().toLocaleTimeString()}`;
      }, 1000);

Enter fullscreen mode Exit fullscreen mode
####API JSON####
Enter fullscreen mode Exit fullscreen mode

Top comments (0)