var allSong = [ { artist: 'LP', song: 'Lost on you', songImg: 'https://res.cloudinary.com/codier/image/upload/v1609614501/fv5ymmhglas9nhibtj3v.jpg', songBgImg: 'https://res.cloudinary.com/codier/image/upload/v1609614501/fv5ymmhglas9nhibtj3v.jpg', songSrc: 'https://radyonet.net/cdn/muzik/lp-lost-on-you-1549708953-17.mp3' }, { artist: 'Passenger', song: 'Let her go', songImg: 'https://mcdn.wallpapersafari.com/medium/49/49/LurAKY.jpg', songBgImg: 'https://mcdn.wallpapersafari.com/medium/49/49/LurAKY.jpg', songSrc: 'https://server1.indiryuklemp3.org/mp3_files/03f07c70b529c1da8b1670d9224cd98c.mp3' }, { artist: 'Alicia Keys', song: 'Empire State of Mind', songImg: 'https://upload.wikimedia.org/wikipedia/en/thumb/6/64/Empire_State_of_Mind_%28Part_II%29_Broken_Down.jpg/220px-Empire_State_of_Mind_%28Part_II%29_Broken_Down.jpg', songBgImg: 'https://upload.wikimedia.org/wikipedia/en/thumb/6/64/Empire_State_of_Mind_%28Part_II%29_Broken_Down.jpg/220px-Empire_State_of_Mind_%28Part_II%29_Broken_Down.jpg', songSrc: 'https://previews-se.wetransfer.net/c9a2d8b8eda5ac9c0c362380a50d1aa020210102235218/b0e2c5577fa453a0f32992e0f24f5fb7ed956910?Expires=1609635287&Signature=XYdeNZp0JEyEkbl9eBoj3PLil~JdoXMf7mVYyiawoLBYt3fvifL6n-xHkDluv6du942O~f7Kp3fsfWSDalGAePsAXwa1puPRW3g7n-0ZuswbWlyF2eDutpbicMqVJ~RgqvGNv3tYW0BpSQMz-90bwZWW5oRGmDBDqlLnwcDM-YFTA5WXZi6iXpN7qLDTGEn3j2-1ozwe1JOgr9rZUxLpNptOenjcTHqbauP9N7VRQu3TLY97bpb78vx5NeG5zO6qHPUtW3yDsWo~Moful2xlt8CRvqenCJYh~fTlX9ca336tXthOEM-r2Vg7z8rDEojLX3qFx51xXw8u1bae1eAnbw__&Key-Pair-Id=APKAIRLQFERKGUWFG7GQ' }, ] let randomPlayButton = document.querySelector('#random'); let previousButton = document.querySelector('#prev'); let nextButton = document.querySelector('#next'); let autoButton = document.querySelector('#auto'); let playButton = document.querySelector('#play'); let durationRange = document.querySelector('.duration-range'); let currentTime = document.querySelector('.time'); let audio = new Audio(); let currentSong = 0; window.onload = playingSong; function playingSong() { audio.src = allSong[currentSong].songSrc; audio.play(); } playButton.addEventListener('click', () => { if (audio.paused) { audio.play(); playButton.innerHTML = ''; } else { audio.pause(); playButton.innerHTML = ''; } }) audio.addEventListener('timeupdate', function () { let position = audio.currentTime / audio.duration; durationRange.style.width = position * 100 + '%'; convertTime(Math.round(audio.currentTime)); if (audio.ended) { nexSong(); } }) function convertTime(seconds) { let min = Math.floor(seconds / 60); let sec = seconds % 60; min = min < 10 ? '0' + min : min; sec = sec < 10 ? '0' + sec : sec; currentTime.textContent = min + ':' + sec; totalTime(Math.round(audio.duration)); } function totalTime(seconds) { let min = Math.floor(seconds / 60); let sec = seconds % 60; min = min < 10 ? '0' + min : min; sec = sec < 10 ? '0' + sec : sec; currentTime.textContent += ' & ' + min + ':' + sec; } nextButton.addEventListener('click', () => { currentSong++; if (currentSong > 2) { currentSong = 0; } console.log(currentSong); playingSong(); playButton.innerHTML = ''; $('.song-artist').html(allSong[currentSong].artist) $('.song-name').html(allSong[currentSong].song) $(".song-image").attr("src", allSong[currentSong].songImg); $(".music-bg").attr("src", allSong[currentSong].songBgImg); }) previousButton.addEventListener('click', () => { currentSong--; if (currentSong < 0) { currentSong = 2; } playingSong(); playButton.innerHTML = ''; $('.song-artist').html(allSong[currentSong].artist) $('.song-name').html(allSong[currentSong].song) $(".song-image").attr("src", allSong[currentSong].songImg); $(".music-bg").attr("src", allSong[currentSong].songBgImg); });