Cara buat play & pause musik

Hallo.

Disini saya ingin membuat website sederhana seperti sound Cloud,

Jadi disini yang jadi masalah saya adalah saya ingin membuat button play & pause musik.

*Disini saya memakai untuk icon nya menggunakan fontawesome.

Jadi seperti ini kira2 : Saat Kita klik button nya, untuk play musik, dibutton itu berubah iconnya menjadi pause dan musik nya jalan, dan sebaliknya saat saya klik lagi button nya maka icon pause itu berubah menjadi icon play dan musik pun ikut Ter pause.

Apakah ada kira2 contoh kode nya yg memakai javascript.

javascript html css

@creativechannel_google

7 Kontribusi 8 Poin

Diperbarui 3 tahun yang lalu

1 Jawaban:

Jawaban Terpilih

<div>Bisa dicoba seperti ini gan :</div><pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Great Demo on CodePen</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" /> </head> <body> <button class="btn btn-primary" onclick="toggleMusic()" id="btn-playback" data-play="false"> <i class="fa fa-play"></i> <span id="btn-text">PLAY</span> </button> <audio id="audio" src="https://mp3-ringtone.com/uploads/files/sms-mystic.mp3" /> <script> const myAudio = document.getElementById("audio"); const btn = document.getElementById("btn-playback"); const btnIcon = document.querySelector("#btn-playback > i"); const btnText = document.getElementById("btn-text");

const toggleMusic = () =&amp;gt; {      
  const dataPlay = btn.getAttribute(&#039;data-play&#039;);
        
  if(dataPlay === &#039;false&#039;) {
    btn.setAttribute(&#039;data-play&#039;, &#039;true&#039;);
    myAudio.play();
    btnIcon.classList.remove(&quot;fa-play&quot;);
    btnIcon.classList.add(&quot;fa-pause&quot;);
    btnText.innerText = &quot;PAUSE&quot;;
  } else {
    btn.setAttribute(&#039;data-play&#039;, &#039;false&#039;);
    myAudio.pause();
    btnIcon.classList.remove(&quot;fa-pause&quot;);
    btnIcon.classList.add(&quot;fa-play&quot;);
    btnText.innerText = &quot;PLAY&quot;;
  }
};

myAudio.onpause = () =&amp;gt; {
  btn.setAttribute(&#039;data-play&#039;, &#039;false&#039;);
    myAudio.pause();
    btnIcon.classList.remove(&quot;fa-pause&quot;);
    btnIcon.classList.add(&quot;fa-play&quot;);
    btnText.innerText = &quot;PLAY&quot;;
};

</script> </body> </html></pre><div><br>Cek langsung disini : <a href="https://jsbin.com/zoxinatefi/edit?html,console,output">https://jsbin.com/zoxinatefi</a><br><br>Referensi : <a href="https://stackoverflow.com/a/38665865/8005313">https://stackoverflow.com/a/38665865/8005313</a></div>

@ahanafi

815 Kontribusi 552 Poin

Dipost 3 tahun yang lalu

Tanggapan

Sebelumnya makasih, berhasil kodenya, Tapi bisa gk kak, kalau musiknya berhenti icon nya juga berubah menjadi icon play? soalnya itu kalo musiknya berenti iconnya masih tetap sama.

@creativechannel_google

Loh itu icon nya sudha berubah kok,coba cek lagi

@ahanafi

Coba cek referensi link yang diberikan di atas

@ahanafi

Makasih kak.

@creativechannel_google

Jawaban sudah diperbarui, kalo maksudnya "otomatis ganti icon setelah musik berhenti/selesai", maka jawaban di atas sudah berhasil harusnya. Semoga membantu :)

@ahanafi

Terimakasih kak, sudah berhasil. *Maaf, soalnya baru belajar javascript :)

@creativechannel_google

Kelas Premium! Belajar bikin website dari nol sekarang

Cara buat play & pause musik

Kelas Premium!
Belajar bikin website dari nol sekarang