Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html & css / programming

Tutorial Membuat Music Player menggunakan HTML, CSS dan JavaScript | (Bisa Buat Playlist Sendiri lho)

Posting Komentar


Music Player HTML CSS JavaScript

Music Player. Siapa sih yang tidak tahu musik?, Musik merupakan suatu hal yang sangat umum ada pada lingkungan kita. Dari kalangan anak anak maupun dewasa semua mengenal musik.

Nah disini kami akan membagikan sebuah tutorial seputar web programming yang keren, yaitu cara membuat music player atau pemutar musik menggunakan HTML, CSS dan JavaScript.

Program ini juga bisa kalian buat untuk membuat playlist kalian sendiri lho, walaupun tools tidak se lengkap platform-platform pemutar music yang terkenal sih.

Tapi setidaknya bisa digunakan untuk memutar music yang kalian inginkan.

Nah tanpa berlama-lama berikut ini tutorial yang bisa kalian ikuti:

Sebelumnya, disini saya menggunakan beberapa lagu dari Pamungkas sebagai sample.

Cara membuat Music player dengan menggunakan HTML, CSS dan JavaScript

Sebelum kalian memulai tutorial ini, ada beberapa tools dan software yang harus kalian siapkan nih. Yaitu:

  1. Komputer/Laptop
  2. Text Editor bebas. (VS Code, Sublime, Notepad++ dll).
  3. Browser yang sudah support HTML 5 (Chrome, Firefox, Edge dll).

Langkah langkah untuk membuat music player dengan HTML, CSS dan JavaScript

  • Seperti biasa, alangkah baiknya membuat satu folder untuk menyimpan source code yang akan di buat.
  • Membuka text editor dan arahkan ke dalam folder yang sudah kalian buat. Disini text editor yang saya gunakan adalah VS Code.
  • Didalam folder yang tadi telah dibuka, buat satu file baru bernama “index.html”.(sebenarnya untuk file html kalian bisa memberi nama bebas sih, tapi pada umumnya file html akan dinamai sebagai index.html)
Note: Jika kalian ingin belajar dan memahami fungsi-fungsinya, saya rekomendasikan jangan hanya copy paste source codenya, tetapi diketik dan sambil refresh di browser.
  • Masukkan source code dibawah ini kedalam file index.html.
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
      <title>Music Player</title>
    </head>
    <body>
      <h1>Music Player</h1>
      <div class="music-container" id="music-container">
        <div class="music-info">
          <h4 class="title" id="title"></h4>
          <div class="progress-container" id="progress-container">
            <div class="progress" id="progress"></div>
          </div>
        </div>
        <audio src="./music/monolog.mp3" id="audio"></audio>
        <audio src="./music/tothebone.mp3" id="audio"></audio>
        <audio src="./music/oneonly.mp3" id="audio"></audio>
        <div class="img-container">
          <img src="./images/monolog.jpg" alt="music-cover" id="cover" />
        </div>
        <div class="navigation">
          <button id="prev" class="action-btn">
            <i class="fa fa-backward" aria-hidden="true"></i>
          </button>
          <button id="play" class="action-btn action-btn-big">
            <i class="fa fa-play" aria-hidden="true"></i>
          </button>
          <button id="next" class="action-btn">
            <i class="fa fa-forward" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      <script src="script.js"></script>
    </body>
    </html>
  • Lalu buat satu file baru bernama “style.css” didalam folder yang sama dengan "index.html". File css ini bertujuan untuk mengatur dan memperindah tampilan.
  • Masukkan source code dibawah ini kedalam "style.css".
    @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
    * {
    outline: none;
    box-sizing: border-box;
    }
    body {
    background-image: linear-gradient(
    0deg,
    rgba(247, 247, 247, 1) 23.8%,
    rgba(252, 221, 221, 1) 92%
    );
    font-family: "Open Sans", sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
    .music-container {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
    display: flex;
    padding: 20px 30px;
    position: relative;
    margin: 100px 0;
    z-index: 10;
    }
    .img-container {
    position: relative;
    width: 110px;
    }
    .img-container::after {
    content: "";
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, 50%);
    box-shadow: 0 0 0px 10px #000;
    }
    .img-container img {
    border-radius: 50%;
    object-fit: cover;
    height: 110px;
    width: inherit;
    position: absolute;
    bottom: 0;
    left: 0;
    animation: rotate 3s linear infinite;
    animation-play-state: paused;
    }
    .music-container.play .img-container img {
    animation-play-state: running;
    }
    @keyframes rotate {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    .navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    }
    .action-btn {
    background-color: #fff;
    border: 0;
    color: #dfdbdf;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    margin: 0 20px;
    }
    .action-btn.action-btn-big {
    color: #cdc2d0;
    font-size: 30px;
    }
    .music-info {
    background-color: rgba(255, 255, 255, 0.5);
    width: calc(100% - 40px);
    padding: 10px 10px 10px 150px;
    border-radius: 15px 15px 0px 0px;
    position: absolute;
    top: 0;
    left: 20px;
    opacity: 0;
    transform: translateY(0%);
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    z-index: 0;
    }
    .music-container.play .music-info {
    opacity: 1;
    transform: translateY(-100%);
    }
    .music-info h4 {
    margin: 0;
    }
    .progress-container {
    background-color: #fff;
    border: 5px;
    cursor: pointer;
    margin: 10px 0;
    height: 4px;
    width: 100%;
    }
    .progress {
    background-color: #fe8daa;
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transform: width 0.1s linear;
    }

  • Selanjutnya membuat file javascript bernama “Script.js”. secara sederhana, Javascript disini berfungsi menjalankan perintah untuk memutar audio.
  • Masukkan source code dibawah ini ke dalam “Script.js”.
    const musicContainer = document.getElementById("music-container");
    const playBtn = document.getElementById("play");
    const prevBtn = document.getElementById("prev");
    const nextBtn = document.getElementById("next");
    const audio = document.getElementById("audio");
    const progress = document.getElementById("progress");
    const progressContainer = document.getElementById("progress-container");
    const title = document.getElementById("title");
    const cover = document.getElementById("cover");
    // Songs Titles
    const songs = ["monolog", "tothebone", "oneonly"];
    // KeepTrack of song
    let songIndex = 0;
    // Initially load song details into DOM
    loadSong(songs[songIndex]);
    // Update song details
    function loadSong(song) {
      title.innerText = song;
      audio.src = `./music/${song}.mp3`;
      cover.src = `./images/${song}.jpg`;
    }
    // Play Song
    function playSong() {
      musicContainer.classList.add("play");
      playBtn.querySelector("i.fa").classList.remove("fa-play");
      playBtn.querySelector("i.fa").classList.add("fa-pause");
      audio.play();
    }
    // Pause Song
    function pauseSong() {
      musicContainer.classList.remove("play");
      playBtn.querySelector("i.fa").classList.add("fa-play");
      playBtn.querySelector("i.fa").classList.remove("fa-pause");
      audio.pause();
    }
    // Previous Song
    function prevSong() {
      songIndex--;
      if (songIndex < 0) {
        songIndex = songs.length - 1;
      }
      loadSong(songs[songIndex]);
      playSong();
    }
    // Next Song
    function nextSong() {
      songIndex++;
      if (songIndex > songs.length - 1) {
        songIndex = 0;
      }
      loadSong(songs[songIndex]);
      playSong();
    }
    // Update Progress bar
    function updateProgress(e) {
      const { duration, currentTime } = e.srcElement;
      const progressPerCent = (currentTime / duration) * 100;
      progress.style.width = `${progressPerCent}%`;
    }
    // Set Progress
    function setProgress(e) {
      const width = this.clientWidth;
      const clickX = e.offsetX;
      const duration = audio.duration;
      audio.currentTime = (clickX / width) * duration;
    }
    // Event Listeners
    playBtn.addEventListener("click", () => {
      const isPlaying = musicContainer.classList.contains("play");
      if (isPlaying) {
        pauseSong();
      } else {
        playSong();
      }
    });
    // Change Song
    prevBtn.addEventListener("click", prevSong);
    nextBtn.addEventListener("click", nextSong);
    // Time/Song Update
    audio.addEventListener("timeupdate", updateProgress);
    // Click On progress Bar
    progressContainer.addEventListener("click", setProgress);
    // Song End
    audio.addEventListener("ended", nextSong);
  • Jangan lupa save semua file yang telah kalian buat tersebut.

Langkah selanjutnya yaitu membuka program tersebut di browser yang kalian miliki. Dengan langkah seperti biasa:

Klik kanan pada file “index.html” > open with > (browser kalian).

Dan booom! Website Music Player kalian sudah jadi.

Untuk melihat preview hasilnya, klik tombol dibawah ini:


Klik Disini


Itulah sedikit tutorial tentang bagaimana membuat Music Player menggunakan HTML, CSS dan JavaScript. Semoga bermanfaat dan menambah pengetahuan kalian semua. Dan tentunya membuat kalian semakin jago coding.

Posting Komentar untuk "Tutorial Membuat Music Player menggunakan HTML, CSS dan JavaScript | (Bisa Buat Playlist Sendiri lho)"

Posting Komentar