Create a Music Player using html css and javascript

Creating a basic music player using HTML,CSS and JavaScript is a fun and educational project. Here's a simple example to get you started:

Before we dive into creating the music player, ensure you have the following tools and knowledge:

Basic understanding of HTML, CSS, and JavaScript.
A code editor (e.g., Visual Studio Code, Sublime Text).

Step 1: Setting Up the HTML Structure

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Player</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="music-player-container">
    <h1 class="player-title">Music Player</h1>
    <div class="music-player">
      <audio id="music-player" controls>
        <source src="your-audio-file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
    </div>
    <div class="player-controls">
      <button id="play" class="control-button">Play</button>
      <button id="pause" class="control-button">Pause</button>
      <button id="stop" class="control-button">Stop</button>
    </div>
  </div>
  <script src="/script.js"></script>
</body>

</html>

Step 2: Styling the Music Player

Create a style.css file and add the CSS to style your music player. You can get creative with the design. Here's a basic example:


        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            text-align: center;
        }

        .music-player-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 20px auto;
            padding: 20px;
            width: 320px;
        }

        .player-title {
            font-size: 24px;
        }

        .music-player {
            margin: 20px 0;
        }

        .control-button {
            background-color: #2196F3;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 5px;
            cursor: pointer;
            border-radius: 4px;
        }

        .control-button:hover {
            background-color: #0b7dda;
        }

Step 3: Adding Functionality with JavaScript

Now, it's time to add functionality to your music player. Create a script.js file and add the following JavaScript code:

const musicPlayer = document.getElementById('music-player');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const stopButton = document.getElementById('stop');

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

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

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

Ouput:

Play:

Stop:

Conclusion

Creating a music player using HTML, CSS, and JavaScript is a fun and educational project. You've now got the foundation to build your own customizable music player, which you can integrate into your website or use for personal enjoyment. Explore and experiment with your player to make it unique and tailored to your needs.

Techstackkit

Create a Music Player using html css and javascript

Step 1: Setting Up the HTML Structure

Step 2: Styling the Music Player

Step 3: Adding Functionality with JavaScript

Conclusion

Happy Coding! ❤️