Tested | ๐•ฌ๐–—๐–™๐–Ž๐–๐–Š๐–‘ ๐•พ๐–†๐–๐–š Tested | ๐•ฌ๐–—๐–™๐–Ž๐–๐–Š๐–‘ ๐•พ๐–†๐–๐–š Tested - ๐•ฌ๐–—๐–™๐–Ž๐–๐–Š๐–‘ ๐•พ๐–†๐–๐–š Tested - Artikel Saku

Sabtu, 20 April 2024

Tested

⠀⠀´´´´´´¶¶¶$´´´´oรธ¢1
´´´´´´´´´รธ¶o´´´¶7´7¶¶711o¶1
´´´´´´´´¶รธ´´´´o$¶$รธ´´1´´o¶
´´´´´´´¶รธ¢รธ$$$รธรธ¢oo¢รธรธ$¶¶$ ¶$
´´´´´´¶รธรธ¢รธ$รธ¢oo¢oรธรธ$รธ¢oooo¶
´´´´´รธ¢รธ¶รธ71o¶¶$¶¶$o1oรธ¶รธooรธ¶
´´´´¶$o ´´´´´´´11´´´´´´´´¶รธ¢o$¶
´´´รธo$¶¶7¶¶´´´´´´´´´´´1´´7รธ¢¢¶ ¶1
รธ¶¶$¶¶¶¶¶¶$¢รธ¶¶¶¶¶¶¶¶¶o71$$รธoรธ¶¶รธ
¶$o¶¶¶¶รธo¢รธo7$¶รธรธรธ¶รธ¢¢รธรธรธรธ¢ o$¶¶¶$
´¶$7¶รธ7รธรธ´รธรธ¶¢177o¢¶¶´oรธ¢¢รธรธรธ¶รธ´
´´รธรธoรธ¶1´o$¶o¢รธรธ¢รธ¶7´1รธ¢¢รธรธ$¶ ´
´´´$¶¶´´$¶¶ooo¢¢รธ¶´´o¶รธรธรธ¢$¶
´´¶¶¶´´$$¶o¢¢¢¢รธ¶´´¢¶¢รธรธ¢รธ ¶´
´¶¶¶´´$รธ¶oo¢¢¢รธ¶7´o¶รธรธ$¢รธ¶1
¢¶¶1´$รธ¶oo¢¢¢รธ¶7´´รธ¢¶oรธ¶o1
¶$¶´´¶รธ$oooooรธ¶´´รธ$o¶o¢¶¶
¶รธ¢´´¶¢¢¢รธรธรธรธ¶7´´¶¢รธ$¢¶¶
¶รธ¶´´$¢¢¢ ¢รธรธ¶7´´รธ$o¶$¶¶
¶¶รธ´´รธ¢¢¢¢¢รธ7´´1¶¶¶¶รธ´
´¶¶รธ´¢¢¢¢¢รธรธ¢´¢¶¶ ¢´
´´¶¶¶รธรธ¢¢¢¢รธ$¶¶¶
´´´´รธ¶¶¶¶¶¶¶¶⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

// Designed by: artikelsaku// Original image: https://dribbble.com/shots/6957353-Music-Player-Widget "use strict"; // add elemnts const bgBody = ["#e5e7e9", "#ff4545", "#f8ded3", "#ffc382", "#f5eda6", "#ffcbdc", "#dcf3f3"]; const body = document.body; const player = document.querySelector(".player"); const playerHeader = player.querySelector(".player__header"); const playerControls = player.querySelector(".player__controls"); const playerPlayList = player.querySelectorAll(".player__song"); const playerSongs = player.querySelectorAll(".audio"); const playButton = player.querySelector(".play"); const nextButton = player.querySelector(".next"); const backButton = player.querySelector(".back"); const playlistButton = player.querySelector(".playlist"); const slider = player.querySelector(".slider"); const sliderContext = player.querySelector(".slider__context"); const sliderName = sliderContext.querySelector(".slider__name"); const sliderTitle = sliderContext.querySelector(".slider__title"); const sliderContent = slider.querySelector(".slider__content"); const sliderContentLength = playerPlayList.length - 1; const sliderWidth = 100; let left = 0; let count = 0; let song = playerSongs[count]; let isPlay = false; const pauseIcon = playButton.querySelector("img[alt = 'pause-icon']"); const playIcon = playButton.querySelector("img[alt = 'play-icon']"); const progres = player.querySelector(".progres"); const progresFilled = progres.querySelector(".progres__filled"); let isMove = false; // creat functions function openPlayer() { playerHeader.classList.add("open-header"); playerControls.classList.add("move"); slider.classList.add("open-slider"); } function closePlayer() { playerHeader.classList.remove("open-header"); playerControls.classList.remove("move"); slider.classList.remove("open-slider"); } function next(index) { count = index || count; if (count == sliderContentLength) { count = count; return; } left = (count + 1) * sliderWidth; left = Math.min(left, (sliderContentLength) * sliderWidth); sliderContent.style.transform = `translate3d(-${left}%, 0, 0)`; count++; run(); } function back(index) { count = index || count; if (count == 0) { count = count; return; } left = (count - 1) * sliderWidth; left = Math.max(0, left); sliderContent.style.transform = `translate3d(-${left}%, 0, 0)`; count--; run(); } function changeSliderContext() { sliderContext.style.animationName = "opacity"; sliderName.textContent = playerPlayList[count].querySelector(".player__title").textContent; sliderTitle.textContent = playerPlayList[count].querySelector(".player__song-name").textContent; if (sliderName.textContent.length > 16) { const textWrap = document.createElement("span"); textWrap.className = "text-wrap"; textWrap.innerHTML = sliderName.textContent + " " + sliderName.textContent; sliderName.innerHTML = ""; sliderName.append(textWrap); } if (sliderTitle.textContent.length >= 18) { const textWrap = document.createElement("span"); textWrap.className = "text-wrap"; textWrap.innerHTML = sliderTitle.textContent + " " + sliderTitle.textContent; sliderTitle.innerHTML = ""; sliderTitle.append(textWrap); } } function changeBgBody() { body.style.backgroundColor = bgBody[count]; } function selectSong() { song = playerSongs[count]; for (const item of playerSongs) { if (item != song) { item.pause(); item.currentTime = 0; } } if (isPlay) song.play(); } function run() { changeSliderContext(); changeBgBody(); selectSong(); } function playSong() { if (song.paused) { song.play(); playIcon.style.display = "none"; pauseIcon.style.display = "block"; }else{ song.pause(); isPlay = false; playIcon.style.display = ""; pauseIcon.style.display = ""; } } function progresUpdate() { const progresFilledWidth = (this.currentTime / this.duration) * 100 + "%"; progresFilled.style.width = progresFilledWidth; if (isPlay && this.duration == this.currentTime) { next(); } if (count == sliderContentLength && song.currentTime == song.duration) { playIcon.style.display = "block"; pauseIcon.style.display = ""; isPlay = false; } } function scurb(e) { // If we use e.offsetX, we have trouble setting the song time, when the mousemove is running const currentTime = ( (e.clientX - progres.getBoundingClientRect().left) / progres.offsetWidth ) * song.duration; song.currentTime = currentTime; } function durationSongs() { let min = parseInt(this.duration / 60); if (min < 10) min = "0" + min; let sec = parseInt(this.duration % 60); if (sec < 10) sec = "0" + sec; const playerSongTime = `${min}:${sec}`; this.closest(".player__song").querySelector(".player__song-time").append(playerSongTime); } changeSliderContext(); // add events sliderContext.addEventListener("click", openPlayer); sliderContext.addEventListener("animationend", () => sliderContext.style.animationName =''); playlistButton.addEventListener("click", closePlayer); nextButton.addEventListener("click", () => { next(0) }); backButton.addEventListener("click", () => { back(0) }); playButton.addEventListener("click", () => { isPlay = true; playSong(); }); playerSongs.forEach(song => { song.addEventListener("loadeddata" , durationSongs); song.addEventListener("timeupdate" , progresUpdate); }); progres.addEventListener("pointerdown", (e) => { scurb(e); isMove = true; }); document.addEventListener("pointermove", (e) => { if (isMove) { scurb(e); song.muted = true; } }); document.addEventListener("pointerup", () => { isMove = false; song.muted = false; }); playerPlayList.forEach((item, index) => { item.addEventListener("click", function() { if (index > count) { next(index - 1); return; } if (index < count) { back(index + 1); return; } }); });

Tidak ada komentar:

Posting Komentar

★☆★☆Postingan Populer★☆★☆

Flag Counter