Google bard

 Here's the code for a nice audio player like WhatsApp using HTML, CSS, JavaScript, and awesome icons:

0:00 / 0:00

HTML:

HTML

<div class="audio-player">
  <audio id="audio" src="your-audio-file.mp3"></audio>
  <div class="controls">
    <button id="play-pause-button"><i class="fas fa-play"></i></button>
    <div class="progress-container">
      <progress id="progress-bar" value="0" max="1"></progress>
      <div class="progress-time">0:00 / 0:00</div>
    </div>
  </div>
</div>

CSS:

CSS

.audio-player {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f5f5f5;
}

.controls {
  display: flex;
  gap: 10px;
}

.progress-container {
  display: flex;
  align-items: center;
}

#progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ccc;
}

#progress-bar::-webkit-progress-value {
  background-color: #007bff;
}

.progress-time {
  font-size: 12px;
  color: #999;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Awesome icons */
.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

JavaScript:

JavaScript

const audio = document.getElementById("audio");
const playPauseButton = document.getElementById("play-pause-button");
const progressBar = document.getElementById("progress-bar");
const progressTime = document.querySelector(".progress-time");

let isPlaying = false;

playPauseButton.addEventListener("click", () => {
  if (isPlaying) {
    audio.pause();
    playPauseButton.firstElementChild.classList.remove("fa-pause");
    playPauseButton.firstElementChild.classList.add("fa-play");
  } else {
    audio.play();
    playPauseButton.firstElementChild.classList.remove("fa-play");
    playPauseButton.firstElementChild.classList.add("fa-pause");
  }
  isPlaying = !isPlaying;
});

audio.addEventListener("timeupdate", () => {
  const percent = (audio.currentTime / audio.duration) * 100;
  progressBar.value = percent;
  progressTime.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
});

function formatTime(timeInSeconds) {
  const minutes = Math.floor(timeInSeconds / 60);
  const seconds = Math.floor(timeInSeconds % 60);
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

Key points:

• Structure: The HTML establishes a basic structure with audio, play/pause button, progress bar, and time display.
• Styling: The CSS styles the player with colors, spacing, and icons.
• Functionality: JavaScript handles audio playback, button controls, progress bar updates, and time display.
• Icons: Awesome icons (Font Awesome 5 Free) are integrated for visual appeal.
• Customization: Modify the CSS to match your preferred look and feel.
• Include Font Awesome: Ensure you include the Font Awesome library for the icons to work.