Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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.
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 = () =&gt; {
const dataPlay = btn.getAttribute('data-play');
if(dataPlay === 'false') {
btn.setAttribute('data-play', 'true');
myAudio.play();
btnIcon.classList.remove("fa-play");
btnIcon.classList.add("fa-pause");
btnText.innerText = "PAUSE";
} else {
btn.setAttribute('data-play', 'false');
myAudio.pause();
btnIcon.classList.remove("fa-pause");
btnIcon.classList.add("fa-play");
btnText.innerText = "PLAY";
}
};
myAudio.onpause = () =&gt; {
btn.setAttribute('data-play', 'false');
myAudio.pause();
btnIcon.classList.remove("fa-pause");
btnIcon.classList.add("fa-play");
btnText.innerText = "PLAY";
};
</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>
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.
Loh itu icon nya sudha berubah kok,coba cek lagi
Coba cek referensi link yang diberikan di atas
Makasih kak.
Jawaban sudah diperbarui, kalo maksudnya "otomatis ganti icon setelah musik berhenti/selesai", maka jawaban di atas sudah berhasil harusnya. Semoga membantu :)
Terimakasih kak, sudah berhasil. *Maaf, soalnya baru belajar javascript :)