Membuat Playlist Musik Menggunakan jQuery

07/07/2019    Shelli Ripati    25     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More