Untitled

<div class="player-footer" aria-label="podcast player controls">
  <div class="player-info">
    <img id="playerImage" src="" alt="Episode Image" />
    <div>
      <h5 id="playerTitle">Episode Title</h5>
      <p id="playerAuthor">Author Name</p>
    </div>
  </div>
  <div class="player-controls">
    <button class="btn btn-secondary" id="prevButton" aria-label="previous episode button">
      <i class="bi bi-skip-backward-fill"></i>
    </button>
    <button class="btn btn-secondary" id="playButton" aria-label="play or pause button">
      <i class="bi bi-play-circle-fill"></i>
    </button>
    <button class="btn btn-secondary" id="nextButton" aria-label="next episode button">
      <i class="bi bi-skip-forward-fill"></i>
    </button>
    <button class="btn btn-secondary" id="followButton" aria-label="follow or unfollow button">
      <i id="followIcon" class="bi bi-heart"></i>
    </button>
  </div>
  <div class="seek-bar-container">
    <span class="time-display" id="currentTime">0:00</span>
    <input type="range" id="seekBar" class="form-range" min="0" max="100" value="0" aria-label="seek bar" />
    <span class="time-display" id="totalTime">0:00</span>
  </div>
  <!-- Volume Control -->
  <div class="volume-control-container">
    <label for="volumeControl" class="sr-only">Volume Control</label>
    <input type="range" id="volumeControl" class="form-range" min="0" max="1" step="0.01" value="1" aria-label="volume control" />
  </div>
</div>


.volume-control-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.volume-control-container input {
  width: 100px; /* Adjust width as needed */
}

// Volume control event listener
document.getElementById("volumeControl").addEventListener("input", function (event) {
  audio.volume = event.target.value;
  savePlayerState();
});