Creating a Simple Track Player

Getting Started

In this section, we will create a simple track player that allows users to play, pause, and stop audio tracks.

HTML Structure

The HTML structure for our track player consists of a container element, audio element, and buttons for play, pause, and stop.

<div class="track-player">
  <audio id="track" src="track.mp3"></audio>
  <button id="play-button">Play</button>
  <button id="pause-button">Pause</button>
  <button id="stop-button">Stop</button>
</div>

Javascript Functionality

We will use JavaScript to add functionality to our track player. We will create functions for play, pause, and stop.

const track = document.getElementById('track');
const playButton = document.getElementById('play-button');
const pauseButton = document.getElementById('pause-button');
const stopButton = document.getElementById('stop-button');

playButton.addEventListener('click', () => {
  track.play();
});

pauseButton.addEventListener('click', () => {
  track.pause();
});

stopButton.addEventListener('click', () => {
  track.currentTime = 0;
  track.pause();
});

Styling the Track Player

We can add styles to our track player to make it look more visually appealing.

.track-player {
  width: 300px;
  height: 100px;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
  width: 80px;
  height: 30px;
  margin: 10px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Putting it all Together

With the HTML, JavaScript, and CSS in place, we have created a simple track player that allows users to play, pause, and stop audio tracks.

• Create an HTML file with the track player structure
• Add JavaScript functionality for play, pause, and stop
• Add CSS styles to make the track player visually appealing