Membuat Playlist Musik Menggunakan jQuery

Membuat Playlist Musik Menggunakan Jquery

Pada kesempatan kali ini saya akan membahas tentang cara Membuat Playlist Musik Menggunakan Jquery. Playlist musik disini adalah kumpulan lagu yang akan di putar atau di pause sesuai yang kita inginkan. Kita juga bisa memilih lagu dengan menekan tombol next atau prev.

Langkah pertama untuk cara Membuat Playlist Musik Menggunakan Jquery yaitu teman-teman buat struktur htmlnya seperti pada script berikut ini.

<!DOCTYPE html>

<html>

<head>

                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

                <title>Membuat Playlist Musik Menggunakan Jquery</title>

                <style>

                                audio{

                                                display: none

                                }

                </style>

</head>

<body>

<div class="container text-center">

                <h1>Membuat Playlist Musik Menggunakan Jquery</h1>

                <div id="display"></div>

                <audio id="audio" controls ></audio>

                <button onclick="prevAudio()" type="button" class="btn btn-secondary btn-sm">Prev</button>

                <button onclick="playAudio()" type="button" class="btn btn-primary btn-sm">Play</button>

                <button onclick="pauseAudio()" type="button" class="btn btn-danger btn-sm">Pause</button>

                <button onclick="nextAudio()" type="button" class="btn btn-secondary btn-sm">Next</button>

</div>

</body>

</html>

Jika sudah maka selanjutnya teman-teman buat script jquery untuk membuat fungsi-fungsi yang dibutuhkan seperti untuk play, pause, next atau prev musiknya. Dan berikut ini adalah scriptnya.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>

                var listmusik = {

                                "name":["YouAreTheReason","Christina-Perri-A-Thousand-Years","EdSheeren-Prefect"],

                                "img":["220px-Calum_Scott_You_Are_the_Reason.jpg","AThousand_Years.jpg","EdSheeren-Prefect.jpg"]

                };

                var value = 0;

                function show(){

                                $("#display").html(`<img src="img/${listmusik.img[value]}" width="200" height="200"/>

                                                                                                                <p>${listmusik.name[value]}</p>`);

                                $("#audio").attr("src",`musik/${listmusik.name[value]}.mp3`);

                }

                show();

                var audio = document.getElementById("audio");

                // next

                function nextAudio() {

                                if (value < 2) {

                                                value++;

                                                show();

                                                pauseAudio();

                                audio.currentTime = 0; 

                    } 

                }

                // prev

                function prevAudio() {

                                if (value > 0) {

                                                value--;

                                                show();

                                                pauseAudio();

                                audio.currentTime = 0; 

                    } 

                }

                // play

                function playAudio() {

                  audio.play();

                }

                // pause

                function pauseAudio() {

                  audio.pause();

                }

</script>

Jika dibuka di browser maka tampilannya akan seperti pada gambar di bawah  ini.

Membuat Playlist Musik Menggunakan jQuery

Demikian artikel tentang cara Membuat Playlist Musik Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

7 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat