API tools faq
paste
Advertisement
RyukiChan

script

RyukiChan
May 30th, 2020
1,069
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 13.27 KB | None | 0 0
raw download clone embed print report
  1. document.addEventListener("contextmenu", function(e){
  2.   e.preventDefault();
  3. }, false);
  4.  
  5. // var aud = $('audio')[0];
  6. var aud = new Audio;
  7. var song = [];
  8. song[1] = [1, "Thunderclouds", "Sia - LSD", "220px-Labrinth,_Sia_and_Diplo_Present..._LSD.png", "03.10"];
  9. song[2] = [2, "Orange's", "7!!", "7!!.jpg", "05.56"];
  10. song[3] = [3, "Dia", "Anji", "dia.png", "03.27"];
  11. song[4] = [4, "Sparkle", "Radwimps", "220px-Radwimps_Your_Name_Album_Cover.jpg", "06.48"];
  12. song[5] = [5, "Asal Kau Bahagia", "Armada", "9e7246b0d794206e28029027fd7a9ae3.jpg", "04.04"];
  13. song[6] = [6, "Manusia Bodoh", "Ada Band", "220px-ADA_Band_Empati.jpg", "04.15"];
  14. song[7] = [7, "My Love", "Westlife", "7MyLove1.jpg", "03.49"];
  15. song[8] = [8, "Tak pernah ternilai", "Last - Child", "medium_croped_t7p5yf7nfr.jpg", "04.17"];
  16. song[9] = [9, "I Am", "Club Yoko", "81ZJu73aF6L._SS500_.jpg", "02.38"];
  17. song[10] = [10, "Butter Cup", "Jack Stauber", "28ef197dadebc3c0d1ae770d0656e5e9.jpg", "03.27"];
  18.  
  19.     // songData = Math.floor(Math.random() * song.lenght); <-- for Acak
  20.  
  21. $(".play").on("click", function(){
  22.     if (aud.paused) {
  23.         aud.play();
  24.         $(".play i").addClass('fa-pause');
  25.         $(".play i").removeClass('fa-play');
  26.     }
  27.  
  28.     else {
  29.         aud.pause();
  30.         $(".play i").removeClass('fa-pause');
  31.         $(".play i").addClass('fa-play');
  32.     }  
  33. });
  34.  
  35.     //PROGRESS
  36.     // progress1
  37.     var progress = document.getElementById("progress");
  38.     var progress2 = document.getElementById("progress2");
  39.     var timeNow = document.getElementById("currentTime");
  40.     var durasi = document.getElementById("duration");
  41.     aud.ontimeupdate = function(){
  42.         progress.value = aud.currentTime / aud.duration * 100;
  43.         progress2.value = aud.currentTime / aud.duration * 100;
  44.         updateWaktu();
  45.     }
  46.  
  47.     function updateWaktu() {
  48.         var menitNow = Math.floor(aud.currentTime / 60);
  49.         var detikNow = Math.floor(aud.currentTime-menitNow * 60);
  50.         var menitDurasi = Math.floor(aud.duration / 60);
  51.         var detikDurasi = Math.floor(aud.duration - menitDurasi * 60);
  52.  
  53.         if (menitNow < 10) { menitNow = "0" + menitNow; }
  54.         if (detikNow < 10) { detikNow = "0" + detikNow; }
  55.         if (menitDurasi < 10) { menitDurasi = "0" + menitDurasi; }
  56.         if (detikDurasi < 10) { detikDurasi = "0" + detikDurasi; }
  57.         if(isNaN(menitDurasi) || isNaN(detikDurasi) ) {
  58.             menitDurasi = 0;
  59.             detikDurasi = 0;
  60.             if (menitDurasi < 10) { menitDurasi = "0" + menitDurasi; }
  61.             if (detikDurasi < 10) { detikDurasi = "0" + detikDurasi; }
  62.         }
  63.  
  64.         timeNow.innerHTML = menitNow + "." + detikNow;
  65.         durasi.innerHTML = menitDurasi + "." + detikDurasi;
  66.     }
  67.  
  68.     // Musik Slider
  69.     var geser;
  70.     //progress1
  71.     progress.addEventListener("mousedown", function(e) {
  72.         geser = true;
  73.         setPosisiMusik(e);
  74.     });
  75.  
  76.     progress.addEventListener("input", function(e) {
  77.         setPosisiMusik(e);
  78.     })
  79.  
  80.     function setPosisiMusik(e) {
  81.         if(geser) {
  82.             var posisimusik = aud.duration * (progress.value/100);
  83.             aud.currentTime = posisimusik;
  84.         }
  85.     }
  86.  
  87.                 var geser2;
  88.                 progress2.addEventListener("mousedown", function(e2) {
  89.                     geser2 = true;
  90.                     setPosisiMusik2(e2);
  91.                 });
  92.  
  93.                 progress2.addEventListener("input", function(e2) {
  94.                     setPosisiMusik2(e2);
  95.                 })
  96.  
  97.                 function setPosisiMusik2(e2) {
  98.                     if(geser2) {
  99.                         var posisimusik2 = aud.duration * (progress2.value/100);
  100.                         aud.currentTime = posisimusik2;
  101.                     }
  102.                 }
  103.  
  104.     //progress2
  105.     // Volume Control
  106.     let vol = document.querySelector('input[name=volume]');
  107.     let volume = vol.value;
  108.     $('.play-music .volume-slider #volume').text(volume);
  109.  
  110.     vol.addEventListener('input', function(){
  111.         let volume = vol.value;
  112.         aud.volume = volume / 100;
  113.         $('.play-music .volume-slider #volume').text(volume);
  114.     });
  115.  
  116.     var mute = document.getElementById("mute");
  117.  
  118.     mute.addEventListener("click", function(){
  119.         if(aud.muted) {
  120.             aud.muted = false;
  121.             mute.style.color = "#5677D5";
  122.             vol.value = 100;
  123.             $('.play-music .volume-slider #volume').text(vol.value);
  124.         }else {
  125.             aud.muted = true;
  126.             mute.style.color = "#e6e5e2";
  127.             vol.value = 0;
  128.             $('.play-music .volume-slider #volume').text(vol.value);
  129.         }
  130.     })
  131.  
  132.     aud.addEventListener("ended", function(){
  133.         $(".play i").removeClass('fa-pause');
  134.         $(".play i").addClass('fa-play');
  135.     });
  136.  
  137.     // Untuk membuat playlist
  138.     // song[1] = [1, "Thunderclouds", "Sia - LSD", "220px-Labrinth,_Sia_and_Diplo_Present..._LSD.png", "03.10"];
  139.     // song[2] = [2, "Orange's", "7!!", "7!!.jpg", "05.56"];
  140.     // song[3] = [3, "Dia", "Anji", "dia.png", "03.27"];
  141.  
  142.     function _(id){
  143.         return document.getElementById(id);
  144.     }
  145.  
  146.     var kotakmusik = _('music');
  147.     var sedangPutar = false;
  148.     var playTrack;
  149.  
  150.     for (var i = 1; i < song.length; i++){
  151.         var barisTrack = document.createElement("div");
  152.         var tombolPlay = document.createElement("button");
  153.         var namaTrack = document.createElement("div");
  154.         var tPlay = document.createElement("div");
  155.         var artisTrack = document.createElement("div");
  156.         var durasiTrack = document.createElement("div");
  157.  
  158.         barisTrack.className = "song";
  159.         tombolPlay.className = "tombolPlay";
  160.         namaTrack.className = "namaTrack";
  161.  
  162.         namaTrack.innerHTML = song[i][1];
  163.         artisTrack.innerHTML = song[i][2];
  164.         durasiTrack.innerHTML = song[i][4];
  165.  
  166.         tombolPlay.id = song[i][0];
  167.  
  168.         tPlay.appendChild(tombolPlay);
  169.  
  170.         barisTrack.appendChild(namaTrack);
  171.         barisTrack.appendChild(tPlay);
  172.         barisTrack.appendChild(artisTrack);
  173.         barisTrack.appendChild(durasiTrack);
  174.  
  175.         kotakmusik.appendChild(barisTrack);
  176.  
  177.         tombolPlay.addEventListener("click", function(e){
  178.             $('.play-music').slideDown("slowDown");
  179.             kotakmusik.style.height = "200px";
  180.             document.querySelector('.artist').style.height = "210px";
  181.             $('.ubahJudul').text(song[e.target.id][1]);
  182.             $('.ubahArtist-dari-judul').text(song[e.target.id][2]);
  183.             $(".gantiAlbum").attr("src", "Albums/" + song[e.target.id][3]);
  184.             if(playTrack) {
  185.                 if(playTrack != e.target.id) {
  186.                     sedangPutar = true;
  187.                     $(".play i").addClass('fa-pause');
  188.                     $(".play i").removeClass('fa-play');
  189.                     aud.src = "songs/song" + e.target.id + ".mp3";
  190.                     aud.play();
  191.                 }else {
  192.                     aud.pause();
  193.                     sedangPutar = false;
  194.                     $(".play i").addClass('fa-play');
  195.                     $(".play i").removeClass('fa-pause');
  196.                 }
  197.             }else {
  198.                 sedangPutar = true;
  199.                 $(".play i").addClass('fa-pause');
  200.                 $(".play i").removeClass('fa-play');
  201.                 $('.play-music .title h5').text(song[e.target.id][1]);
  202.                 $('.play-music .title h6').text(song[e.target.id][2]);
  203.                 $(".sedang-diputar img").attr("src", "Albums/" + song[e.target.id][3]);
  204.                 if (playTrack != e.target.id) {
  205.                     aud.src = "songs/song" + e.target.id + ".mp3";
  206.                 }
  207.  
  208.                 aud.play();
  209.             }
  210.  
  211.             playTrack = e.target.id;
  212.  
  213.             // event Backward
  214.               var songData = e.target.id;
  215.               $('.backward').on('click', function(){
  216.                   songData--;
  217.                   if(songData < 1) {
  218.                     songData = song.length-1;
  219.                   }
  220.  
  221.                   aud.src = 'songs/song'+ song[songData][0] +'.mp3';
  222.                   aud.play();
  223.                   $(".play i").addClass('fa-pause');
  224.                   $(".play i").removeClass('fa-play');
  225.  
  226.                   //small info music
  227.                   $('.play-music .title h5').text(song[songData][1]);
  228.                   $('.play-music .title h6').text(song[songData][2]);
  229.                   $(".sedang-diputar img").attr("src", "Albums/" + song[songData][3]);
  230.  
  231.                   //big info music
  232.                   $('#big-play-music .info h5').text(song[songData][1]);
  233.                   $('#big-play-music .info h6').text(song[songData][2]);
  234.                   $("#big-play-music .info img").attr("src", "Albums/" + song[songData][3]);
  235.                 });
  236.  
  237.                 $('.forward').on('click', function(){
  238.                   songData++;
  239.                   if(songData >= song.length) {
  240.                     songData = 1;
  241.                   }
  242.                   aud.src = 'songs/song'+ song[songData][0] +'.mp3';
  243.                   aud.play();
  244.                   $(".play i").addClass('fa-pause');
  245.                   $(".play i").removeClass('fa-play');
  246.  
  247.                   //small play music
  248.                   $('.play-music .title h5').text(song[songData][1]);
  249.                   $('.play-music .title h6').text(song[songData][2]);
  250.                   $(".sedang-diputar img").attr("src", "Albums/" + song[songData][3]);
  251.  
  252.                   //big info music
  253.                   $('#big-play-music .info h5').text(song[songData][1]);
  254.                   $('#big-play-music .info h6').text(song[songData][2]);
  255.                   $("#big-play-music .info img").attr("src", "Albums/" + song[songData][3]);
  256.                 })
  257.  
  258.                 //Ganti Track
  259.                 var playListIndex = e.target.id;
  260.                 aud.addEventListener("ended", function(){
  261.                     if (playListIndex === song.length-1) {
  262.                         playListIndex = 1;
  263.                     }else {
  264.                         playListIndex++;
  265.                     }
  266.  
  267.                     aud.src = "songs/song" + song[playListIndex][0] + ".mp3";
  268.                     aud.play();
  269.  
  270.                     $(".play i").addClass('fa-pause');
  271.                     $(".play i").removeClass('fa-play');
  272.                     $('.play-music .title h5').text(song[playListIndex][1]);
  273.                     $('.play-music .title h6').text(song[playListIndex][2]);
  274.                     $(".sedang-diputar img").attr("src", "Albums/" + song[playListIndex][3]);
  275.                     $('#big-play-music .info h5').text(song[playListIndex][1]);
  276.                     $('#big-play-music .info h6').text(song[playListIndex][2]);
  277.                     $("#big-play-music .info img").attr("src", "Albums/" + song[playListIndex][3]);
  278.                 });
  279.         });
  280.     }
  281.  
  282.  
  283.  
  284.  
  285.     //Fungsi Selain Musik
  286.     $("#menu").on("click", function(){
  287.         $(".sidenav").show("fast");
  288.     });
  289.  
  290.     $("#close").click(function() {
  291.         $(".sidenav").hide("fast");
  292.     });
  293.  
  294.     $("#big-play-music #close").click(function() {
  295.         $("#big-play-music").slideUp("fast");
  296.     });
  297.  
  298.     $(".sidenav .sedang-diputar").click(function() {
  299.         $(".sidenav").hide(150, function(){
  300.             $("#big-play-music").slideDown("fast");
  301.         });
  302.     });
  303.  
  304.     $(".content .play-music .title").on("click", function(){
  305.         $("#big-play-music").slideDown("fast");
  306.     });
  307.  
  308.    
  309.    
  310.  
  311.  
  312.     var kotakmusiksering = _('sering');
  313.     for (var i = 1; i < song.length; i++){
  314.         barisTrack = document.createElement("div");
  315.         tombolPlay = document.createElement("button");
  316.         namaTrack = document.createElement("h4");
  317.         artisTrack = document.createElement("h6");
  318.         var imgTrack = document.createElement("img");
  319.  
  320.         namaTrack.innerHTML = song[i][1];
  321.         artisTrack.innerHTML = song[i][2];
  322.         imgTrack.src = "Albums/" + song[i][3];
  323.         durasiTrack.innerHTML = song[i][4];
  324.  
  325.         tombolPlay.id = song[i][0];
  326.  
  327.         tombolPlay.style.background = 'url(Albums/' + song[i][3] + ')';
  328.         tombolPlay.style.backgroundSize = 'cover';
  329.  
  330.         barisTrack.appendChild(tombolPlay);
  331.         barisTrack.appendChild(namaTrack);
  332.         barisTrack.appendChild(artisTrack);
  333.         kotakmusiksering.appendChild(barisTrack);
  334.  
  335.         tombolPlay.addEventListener("click", function(e){
  336.             var target = e.target.id;
  337.             aud.src = "songs/song" + target + ".mp3";
  338.             aud.play();
  339.             $(".play i").addClass('fa-pause');
  340.             $(".play i").removeClass('fa-play');
  341.             $('.play-music').slideDown("slowDown");
  342.             kotakmusik.style.height = "200px";
  343.             document.querySelector('.artist').style.height = "210px";
  344.             $('.ubahJudul').text(song[e.target.id][1]);
  345.             $('.ubahArtist-dari-judul').text(song[e.target.id][2]);
  346.             $(".gantiAlbum").attr("src", "Albums/" + song[e.target.id][3]);
  347.  
  348.             // event Backward
  349.               songData = e.target.id;
  350.               $('.backward').on('click', function(){
  351.                   songData--;
  352.                   if(songData < 1) {
  353.                     songData = song.length-1;
  354.                   }
  355.  
  356.                   aud.src = 'songs/song'+ song[songData][0] +'.mp3';
  357.                   aud.play();
  358.                   $(".play i").addClass('fa-pause');
  359.                   $(".play i").removeClass('fa-play');
  360.  
  361.                   //small info music
  362.                   $('.play-music .title h5').text(song[songData][1]);
  363.                   $('.play-music .title h6').text(song[songData][2]);
  364.                   $(".sedang-diputar img").attr("src", "Albums/" + song[songData][3]);
  365.  
  366.                   //big info music
  367.                   $('#big-play-music .info h5').text(song[songData][1]);
  368.                   $('#big-play-music .info h6').text(song[songData][2]);
  369.                   $("#big-play-music .info img").attr("src", "Albums/" + song[songData][3]);
  370.                 });
  371.  
  372.                 $('.forward').on('click', function(){
  373.                   songData++;
  374.                   if(songData >= song.length) {
  375.                     songData = 1;
  376.                   }
  377.                   aud.src = 'songs/song'+ song[songData][0] +'.mp3';
  378.                   aud.play();
  379.                   $(".play i").addClass('fa-pause');
  380.                   $(".play i").removeClass('fa-play');
  381.  
  382.                   //small play music
  383.                   $('.play-music .title h5').text(song[songData][1]);
  384.                   $('.play-music .title h6').text(song[songData][2]);
  385.                   $(".sedang-diputar img").attr("src", "Albums/" + song[songData][3]);
  386.  
  387.                   //big info music
  388.                   $('#big-play-music .info h5').text(song[songData][1]);
  389.                   $('#big-play-music .info h6').text(song[songData][2]);
  390.                   $("#big-play-music .info img").attr("src", "Albums/" + song[songData][3]);
  391.                 })
  392.  
  393.                 //Ganti Track
  394.                 playListIndex = e.target.id;
  395.                 aud.addEventListener("ended", function(){
  396.                     if (playListIndex === song.length-1) {
  397.                         playListIndex = 1;
  398.                     }else {
  399.                         playListIndex++;
  400.                     }
  401.  
  402.                     aud.src = "songs/song" + song[playListIndex][0] + ".mp3";
  403.                     aud.play();
  404.  
  405.                     $(".play i").addClass('fa-pause');
  406.                     $(".play i").removeClass('fa-play');
  407.                     $('.play-music .title h5').text(song[playListIndex][1]);
  408.                     $('.play-music .title h6').text(song[playListIndex][2]);
  409.                     $(".sedang-diputar img").attr("src", "Albums/" + song[playListIndex][3]);
  410.                     $('#big-play-music .info h5').text(song[playListIndex][1]);
  411.                     $('#big-play-music .info h6').text(song[playListIndex][2]);
  412.                     $("#big-play-music .info img").attr("src", "Albums/" + song[playListIndex][3]);
  413.                 });
  414.         });
  415.     }
  416.  
  417.  
  418.  
  419.     $('a').click(function(e){
  420.     // Special stuff to do when this link is clicked...
  421.  
  422.     // Cancel the default action
  423.     e.preventDefault();
  424. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!