Membuat Musik Audio Player dengan Html, Css, dan Javascript

Seotechman.com, Bogor 12/12/2019. Seperti biasa, kali ini mimin akan membagikan satu tutorial yang cukup lumayan yaitu cara membuat musik audio player dengan CSS dan Javascript. 

Mungkin dari sobat blogger semua tidak asing ketika mendengar kata Musik. Sedikit bercerita, pada umumnya musik adalah suara yang disusun sedemikian rupa sehingga mengandung irama, lagu, nada, dan keharmonisan terutama dari suara yang dihasilkan dari alat-alat yang dapat menghasilkan irama.

Walaupun musik adalah sejenis fenomena intuisi, untuk mencipta, memperbaiki dan mempersembahkannya adalah suatu bentuk seni. Mendengar musik adalah sejenis hiburan. Musik adalah sebuah fenomena yang sangat unik yang bisa dihasilkan oleh beberapa alat musik.

Apakah sobat sudah tahu bagaimana terciptanya sebuah musik, sejarah dan pra-sejarahnya itu seperti apa?

Jika sobat belum tahu, sobat bisa membacanya dengan detail sejarah musik ini.

Kembali ke topik pembahasan, Pada tutorial yang akan mimin bahas adalah membuat sebuah musik audio player.

Apa itu audio player?

Audio player bisa dikatakan sebuah alat yang fungsinya untuk memutar musik. Ini tergolong cukup, ya bisa dibilang gampang tapi juga lumayan rumit untuk pemula yang belum mengerti tentang koding 😊

Nah, untuk cara dan tahap pembuatannya sobat bisa simak dibawah ini:

Cara Membuat Musik Audio Player Dengan Html, Css, Dan Javascript

Disini tentunya kita memerlukan bahan-bahannya seperti yang terdapat pada judul artikel ini, yaitu:

• HTML
• CSS
• JAVASCRIPT/jQuery

Langkah-langkah Membuat Musik Audio Player

Untuk langkah yang pertama kita akan coba buat Css nya. Dan sebagai contohnya simak berikut ini:

body{
  background-color: #2d2d2d;
  color: #ffc266;
  font-family: 'Roboto', sans-serif;
}
#myProgress {
  width: 420px;
   background-color: #d9d9f2; 
  cursor: pointer;
  border-radius: 10px;
}

#myBar {
  width: 0%;
  height: 5px;
  background-color: #ffc266;
  border-radius: 10px;
}

.logo {
  fill: red;
}

.btn-action{
  cursor: pointer;
  padding-top: 10px;
  width: 30px;
}

.btn-ctn, .infos-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
padding-top: 20px;
}

.btn-ctn > div {
 padding: 5px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.infos-ctn > div {
 margin-bottom: 8px;
 color: #ffc266;
}

.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
}

.player-ctn{
  border-radius: 15px;
  width: 420px;
  padding: 10px;
  background-color: #373737;
  margin:auto;
  margin-top: 100px;
}

.playlist-track-ctn{
  display: flex;
  background-color: #464646;
  margin-top: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.playlist-track-ctn:last-child{
  /*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div{
  margin:10px;
}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #e9cc95;
  font-size: 14px;
  pointer-events: none;
}
.playlist-ctn{
   padding-bottom: 20px;
}
.active-track{
  background: #4d4d4d;
  color: #ffc266 !important;
  font-weight: bold;
  
}

.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
  color: #ffc266 !important;
}


.playlist-btn-play{
  pointer-events: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
.fas{
  color: #ffc266;
  font-size: 20px;
}

Simpan semua kode Css diatas kedalam style.css.

Jika sudah, lanjut ke langkah berikutnya yaitu, Javascript/jQuery.

Sobat bisa lihat contoh dibawah:

function createTrackItem(index,name,duration){
    var trackItem = document.createElement('div');
    trackItem.setAttribute("class", "playlist-track-ctn");
    trackItem.setAttribute("id", "ptc-"+index);
    trackItem.setAttribute("data-index", index);
    document.querySelector(".playlist-ctn").appendChild(trackItem);

    var playBtnItem = document.createElement('div');
    playBtnItem.setAttribute("class", "playlist-btn-play");
    playBtnItem.setAttribute("id", "pbp-"+index);
    document.querySelector("#ptc-"+index).appendChild(playBtnItem);

    var btnImg = document.createElement('i');
    btnImg.setAttribute("class", "fas fa-play");
    btnImg.setAttribute("height", "40");
    btnImg.setAttribute("width", "40");
    btnImg.setAttribute("id", "p-img-"+index);
    document.querySelector("#pbp-"+index).appendChild(btnImg);

    var trackInfoItem = document.createElement('div');
    trackInfoItem.setAttribute("class", "playlist-info-track");
    trackInfoItem.innerHTML = name
    document.querySelector("#ptc-"+index).appendChild(trackInfoItem);

    var trackDurationItem = document.createElement('div');
    trackDurationItem.setAttribute("class", "playlist-duration");
    trackDurationItem.innerHTML = duration
    document.querySelector("#ptc-"+index).appendChild(trackDurationItem);
  }

  var listAudio = [
    {
      name:"Artist 1 - audio 1",
      file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3",
      duration:"02:12"
    },
    {
      name:"Artist 2 - audio 2",
      file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_2MG.mp3",
      duration:"00:52"
    },
    {
      name:"Artist 3 - audio 3",
      file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3",
      duration:"00:27"
    }
  ]

  for (var i = 0; i < listAudio.length; i++) {
      createTrackItem(i,listAudio[i].name,listAudio[i].duration);
  }
  var indexAudio = 0;

  function loadNewTrack(index){
    var player = document.querySelector('#source-audio')
    player.src = listAudio[index].file
    document.querySelector('.title').innerHTML = listAudio[index].name
    this.currentAudio = document.getElementById("myAudio");
    this.currentAudio.load()
    this.toggleAudio()
    this.updateStylePlaylist(this.indexAudio,index)
    this.indexAudio = index;
  }

  var playListItems = document.querySelectorAll(".playlist-track-ctn");

  for (let i = 0; i < playListItems.length; i++){
    playListItems[i].addEventListener("click", getClickedElement.bind(this));
  }

  function getClickedElement(event) {
    for (let i = 0; i < playListItems.length; i++){
      if(playListItems[i] == event.target){
        var clickedIndex = event.target.getAttribute("data-index")
        if (clickedIndex == this.indexAudio ) { // alert('Same audio');
            this.toggleAudio()
        }else{
            loadNewTrack(clickedIndex);
        }
      }
    }
  }

  document.querySelector('#source-audio').src = listAudio[indexAudio].file
  document.querySelector('.title').innerHTML = listAudio[indexAudio].name


  var currentAudio = document.getElementById("myAudio");

  currentAudio.load()
  
  currentAudio.onloadedmetadata = function() {
        document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)
  }.bind(this);

  var interval1;

  function toggleAudio() {

    if (this.currentAudio.paused) {
      document.querySelector('#icon-play').style.display = 'none';
      document.querySelector('#icon-pause').style.display = 'block';
      document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
      this.playToPause(this.indexAudio)
      this.currentAudio.play();
    }else{
      document.querySelector('#icon-play').style.display = 'block';
      document.querySelector('#icon-pause').style.display = 'none';
      this.pauseToPlay(this.indexAudio)
      this.currentAudio.pause();
    }
  }

  function pauseAudio() {
    this.currentAudio.pause();
    clearInterval(interval1);
  }

  var timer = document.getElementsByClassName('timer')[0]

  var barProgress = document.getElementById("myBar");


  var width = 0;

  function onTimeUpdate() {
    var t = this.currentAudio.currentTime
    timer.innerHTML = this.getMinutes(t);
    this.setBarProgress();
    if (this.currentAudio.ended) {
      document.querySelector('#icon-play').style.display = 'block';
      document.querySelector('#icon-pause').style.display = 'none';
      this.pauseToPlay(this.indexAudio)
      if (this.indexAudio < listAudio.length-1) {
          var index = parseInt(this.indexAudio)+1
          this.loadNewTrack(index)
      }
    }
  }


  function setBarProgress(){
    var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;
    document.getElementById("myBar").style.width = progress + "%";
  }


  function getMinutes(t){
    var min = parseInt(parseInt(t)/60);
    var sec = parseInt(t%60);
    if (sec < 10) {
      sec = "0"+sec
    }
    if (min < 10) {
      min = "0"+min
    }
    return min+":"+sec
  }

  var progressbar = document.querySelector('#myProgress')
  progressbar.addEventListener("click", seek.bind(this));


  function seek(event) {
    var percent = event.offsetX / progressbar.offsetWidth;
    this.currentAudio.currentTime = percent * this.currentAudio.duration;
    barProgress.style.width = percent*100 + "%";
  }

  function forward(){
    this.currentAudio.currentTime = this.currentAudio.currentTime + 5
    this.setBarProgress();
  }

  function rewind(){
    this.currentAudio.currentTime = this.currentAudio.currentTime - 5
    this.setBarProgress();
  }


  function next(){
    if (this.indexAudio 0) {
        var oldIndex = this.indexAudio
        this.indexAudio--;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }

  function updateStylePlaylist(oldIndex,newIndex){
    document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");
    this.pauseToPlay(oldIndex);
    document.querySelector('#ptc-'+newIndex).classList.add("active-track");
    this.playToPause(newIndex)
  }

  function playToPause(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-play");
    ele.classList.add("fa-pause");
  }

  function pauseToPlay(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-pause");
    ele.classList.add("fa-play");
  }


  function toggleMute(){
    var btnMute = document.querySelector('#toggleMute');
    var volUp = document.querySelector('#icon-vol-up');
    var volMute = document.querySelector('#icon-vol-mute');
    if (this.currentAudio.muted == false) {
       this.currentAudio.muted = true
       volUp.style.display = "none"
       volMute.style.display = "block"
    }else{
      this.currentAudio.muted = false
      volMute.style.display = "none"
      volUp.style.display = "block"
    }
  }

Simpan kedalam file app.js atau sobat bisa namakan sesuai dengan keinginan masing-masing.

Tahap selanjutnya adalah pembuatan HTML. Contoh keseluruhannya akan menjadi seperti berikut ini:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script>
    <title>Musik Audio Player | Seotechman.com</title>
    <link rel=stylesheet href="style.css" media=all> 
  </head>
  <body>


<audio id="myAudio" ontimeupdate="onTimeUpdate()">
  <!-- <source src="audio.ogg" type="audio/ogg"> -->
  <source id="source-audio" src="" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<div class="player-ctn">
  <div class="infos-ctn">
    <div class="timer">00:00</div>
    <div class="title"></div>
    <div class="duration">00:00</div>
  </div>
  <div id="myProgress">
    <div id="myBar"></div>
  </div>
  <div class="btn-ctn">
     <div class="btn-action first-btn" onclick="previous()">
        <div id="btn-faws-back">
          <i class='fas fa-step-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="rewind()">
        <div id="btn-faws-rewind">
          <i class='fas fa-backward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="toggleAudio()">
        <div id="btn-faws-play-pause">
          <i class='fas fa-play' id="icon-play"></i>
          <i class='fas fa-pause' id="icon-pause" style="display: none"></i>
        </div>
     </div>
     <div class="btn-play" onclick="forward()">
        <div id="btn-faws-forward">
          <i class='fas fa-forward'></i>
        </div>
     </div>
     <div class="btn-action" onclick="next()">
        <div id="btn-faws-next">
          <i class='fas fa-step-forward'></i>
        </div>
     </div>
     <div class="btn-mute" id="toggleMute" onclick="toggleMute()">
        <div id="btn-faws-volume">
          <i id="icon-vol-up" class='fas fa-volume-up'></i>
          <i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i>
        </div>
     </div>
  </div>
  <div class="playlist-ctn"></div>
</div>
<script src=app.js></script>

  </body>
</html>

Nah pada tahap ini, anggap saja kita sudah selesai membuatnya. Sobat tinggal menggabungkannya seperti contoh yang sudah mimin berikan diatas.

Note:
Silahkan edit pada bagian CSS nya, untuk warna background, dll.

Dan jangan lupa untuk mengeceknya terlebih dahulu, apakah work atau tidak. 

Apabila seluruh script diatas tidak bekerja, ada kemungkinan sobat salah langkah atau bisa jadi ada kode yang terlewatkan/salah. Karena script ini sudah mimin tes terlebih dulu sebelum di publikasikan.

Itulah cara membuat musik audio player. Semoga bermanfaat!

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini