New audio player

Here's a simple example of a basic audio player using HTML, CSS, and JavaScript:

HTML:

<audio id="audio-player" controls>
  <source src="audio-file.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

<button id="play-pause-btn">Play/Pause</button>
<button id="stop-btn">Stop</button>

CSS:

#audio-player {
  width: 300px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

#audio-player::-webkit-media-controls-play-button {
  display: none;
}

#audio-player::-webkit-media-controls-panel {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

#play-pause-btn, #stop-btn {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

#play-pause-btn:hover, #stop-btn:hover {
  background-color: #3e8e41;
}

JavaScript:

const audioPlayer = document.getElementById('audio-player');
const playPauseBtn = document.getElementById('play-pause-btn');
const stopBtn = document.getElementById('stop-btn');

playPauseBtn.addEventListener('click', () => {
  if (audioPlayer.paused) {
    audioPlayer.play();
    playPauseBtn.textContent = 'Pause';
  } else {
    audioPlayer.pause();
    playPauseBtn.textContent = 'Play';
  }
});

stopBtn.addEventListener('click', () => {
  audioPlayer.pause();
  audioPlayer.currentTime = 0;
});

This code creates a basic audio player with play, pause, and stop buttons. The JavaScript code listens for clicks on the buttons and updates the audio player's state accordingly.

You can customize the appearance and behavior of the audio player by modifying the CSS and JavaScript code.

Note: This is a basic example, and you may want to add additional features such as volume control, seeking, and error handling.

Also: Make sure to replace audio-file.mp3 with the actual path to your audio file.