Добрый день всем)
Пришла мне в голову гениальная идея установить в шапке своего форума плеер. Идея не нова, безусловно, но я же не ищу легких путей. На просторах интернета нашла скрипт и понравившийся мне дизайн. Установила на форум, подогнала стили и все вроде прекрасно, но... Возникла проблема, что данный скрипт не позволяет делать ряд вещей, а именно:
-по завершению трека он не начинает автоматически проигрывать следующий трек
-по завершению последнего трека он не переключается снова на первый для цикличного воспроизведения
-при обновлении страницы или перехода на другую, плеер сбрасывается до первого трека.
После прохождения этапов криков, просьб и отчаяния при общении с чатом gpt. Мне удалось исправить первый недостаток, частично победить второй и сесть в лужу с третьим.
Почему второй частично? При завершении последнего трека он переключается сразу на второй трек в списке, пропуская первый. Помогите пожалуйста решить 1,5 проблемы)))
Код:$(function () { var playerTrack = $("#player-track"), bgArtwork = $("#bg-artwork"), bgArtworkUrl, albumName = $("#album-name"), trackName = $("#track-name"), albumArt = $("#album-art"), sArea = $("#s-area"), seekBar = $("#seek-bar"), trackTime = $("#track-time"), insTime = $("#ins-time"), sHover = $("#s-hover"), playPauseButton = $("#play-pause-button"), i = playPauseButton.find("i"), tProgress = $("#current-time"), tTime = $("#track-length"), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = [ "Dawn", "Me & You", "Electro Boy", "Home", "Proxy (Original Mix)" ], trackNames = [ "Skylike - Dawn", "Alex Skrindo - Me & You", "Kaaze - Electro Boy", "Jordan Schor - Home", "Martin Garrix - Proxy" ], albumArtworks = ["_1", "_2", "_3", "_4", "_5"], trackUrl = [ "https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3", "https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/1.mp3", "https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/3.mp3", "https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/4.mp3", "https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/5.mp3" ], playPreviousTrackButton = $("#play-previous"), playNextTrackButton = $("#play-next"), currIndex = -1; function playPause() { setTimeout(function () { if (audio.paused) { playerTrack.addClass("active"); albumArt.addClass("active"); checkBuffering(); i.attr("class", "fas fa-pause"); audio.play(); } else { playerTrack.removeClass("active"); albumArt.removeClass("active"); clearInterval(buffInterval); albumArt.removeClass("buffering"); i.attr("class", "fas fa-play"); audio.pause(); } }, 300); } function showHover(event) { seekBarPos = sArea.offset(); seekT = event.clientX - seekBarPos.left; seekLoc = audio.duration * (seekT / sArea.outerWidth()); sHover.width(seekT); cM = seekLoc / 60; ctMinutes = Math.floor(cM); ctSeconds = Math.floor(seekLoc - ctMinutes * 60); if (ctMinutes < 0 || ctSeconds < 0) return; if (ctMinutes < 0 || ctSeconds < 0) return; if (ctMinutes < 10) ctMinutes = "0" + ctMinutes; if (ctSeconds < 10) ctSeconds = "0" + ctSeconds; if (isNaN(ctMinutes) || isNaN(ctSeconds)) insTime.text("--:--"); else insTime.text(ctMinutes + ":" + ctSeconds); insTime.css({ left: seekT, "margin-left": "-21px" }).fadeIn(0); } function hideHover() { sHover.width(0); insTime.text("00:00").css({ left: "0px", "margin-left": "0px" }).fadeOut(0); } function playFromClickedPos() { audio.currentTime = seekLoc; seekBar.width(seekT); hideHover(); } function updateCurrTime() { nTime = new Date(); nTime = nTime.getTime(); if (!tFlag) { tFlag = true; trackTime.addClass("active"); } curMinutes = Math.floor(audio.currentTime / 60); curSeconds = Math.floor(audio.currentTime - curMinutes * 60); durMinutes = Math.floor(audio.duration / 60); durSeconds = Math.floor(audio.duration - durMinutes * 60); playProgress = (audio.currentTime / audio.duration) * 100; if (curMinutes < 10) curMinutes = "0" + curMinutes; if (curSeconds < 10) curSeconds = "0" + curSeconds; if (durMinutes < 10) durMinutes = "0" + durMinutes; if (durSeconds < 10) durSeconds = "0" + durSeconds; if (isNaN(curMinutes) || isNaN(curSeconds)) tProgress.text("00:00"); else tProgress.text(curMinutes + ":" + curSeconds); if (isNaN(durMinutes) || isNaN(durSeconds)) tTime.text("00:00"); else tTime.text(durMinutes + ":" + durSeconds); if ( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) ) trackTime.removeClass("active"); else trackTime.addClass("active"); seekBar.width(playProgress + "%"); if (playProgress == 100) { if (currIndex === albumArtworks.length - 1) { selectTrack(0); } else { selectTrack(1); audio.play(); } } } function checkBuffering() { clearInterval(buffInterval); buffInterval = setInterval(function () { if (nTime == 0 || bTime - nTime > 1000) albumArt.addClass("buffering"); else albumArt.removeClass("buffering"); bTime = new Date(); bTime = bTime.getTime(); }, 100); } function selectTrack(flag) { if (flag == 0 || flag == 1) ++currIndex; else --currIndex; if (currIndex > -1 && currIndex < albumArtworks.length) { if (flag == 0) i.attr("class", "fa fa-play"); else { albumArt.removeClass("buffering"); i.attr("class", "fa fa-pause"); } seekBar.width(0); trackTime.removeClass("active"); tProgress.text("00:00"); tTime.text("00:00"); currAlbum = albums[currIndex]; currTrackName = trackNames[currIndex]; currArtwork = albumArtworks[currIndex]; audio.src = trackUrl[currIndex]; nTime = 0; bTime = new Date(); bTime = bTime.getTime(); if (flag != 0) { audio.play(); playerTrack.addClass("active"); albumArt.addClass("active"); clearInterval(buffInterval); checkBuffering(); } albumName.text(currAlbum); trackName.text(currTrackName); albumArt.find("img.active").removeClass("active"); $("#" + currArtwork).addClass("active"); bgArtworkUrl = $("#" + currArtwork).attr("src"); bgArtwork.css({ "background-image": "url(" + bgArtworkUrl + ")" }); } else { if (flag == 0 || flag == 1) --currIndex; else ++currIndex; } } function initPlayer() { audio = new Audio(); selectTrack(0); audio.loop = false; playPauseButton.on("click", playPause); sArea.mousemove(function (event) { showHover(event); }); sArea.mouseout(hideHover); sArea.on("click", playFromClickedPos); $(audio).on("timeupdate", updateCurrTime); playPreviousTrackButton.on("click", function () { selectTrack(-1); }); playNextTrackButton.on("click", function () { selectTrack(1); }); audio.addEventListener('ended', function() { currIndex = (currIndex + 1) % albumArtworks.length; selectTrack(1); audio.play(); }); } initPlayer(); });
Код:<div id="app-cover"> <div id="bg-artwork"></div> <div id="bg-layer"></div> <div id="player"> <div id="player-track"> <div id="album-name"></div> <div id="track-name"></div> <div id="track-time"> <div id="current-time"></div> <div id="track-length"></div> </div> <div id="s-area"> <div id="ins-time"></div> <div id="s-hover"></div> <div id="seek-bar"></div> </div> </div> <div id="player-content"> <div id="album-art"> <img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg" class="active" id="_1"> <img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_2.jpg" id="_2"> <img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_3.jpg" id="_3"> <img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_4.jpg" id="_4"> <img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_5.jpg" id="_5"> <div id="buffer-box">Buffering ...</div> </div> <div id="player-controls"> <div class="control"> <div class="button" id="play-previous"> <i class="fas fa-backward"></i> </div> </div> <div class="control"> <div class="button" id="play-pause-button"> <i class="fas fa-play"></i> </div> </div> <div class="control"> <div class="button" id="play-next"> <i class="fas fa-forward"></i> </div> </div> </div> </div> </div> </div>
Код:/*Плеер*/ #app-cover { width: 370px; height: 70px; position: absolute; bottom: 0; left: -1px; } #player { position: relative; height: 100%; z-index: 3; } #player-track { position: absolute; top: 0; right: 15px; left: 15px; padding: 15px 20px 12px 120px; border-radius: 15px 15px 0px 0px; border: var(--border30); background: rgba(32, 42, 46, 0.90); transition: all 1s ease; z-index: 1; opacity: 0; } #player-track.active { opacity: 1; top: -88px; transition: all 1s ease; } #album-name { color: var(--sub-title); text-align: center; font-family: var(--font-family); font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } #track-name { color: var(--sub-title); text-align: center; font-family: var(--font-family); font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } #track-time { height: 12px; margin-bottom: 6px; /*overflow: hidden;*/ } #track-time.active #current-time, #track-time.active #track-length { color: var(--text); background-color: transparent; } #current-time, #track-length { color: transparent; font-size: 11px; border-radius: 10px; transition: 0.3s ease all; } #track-length { float: right; } #current-time { float: left; } #s-area { background: rgba(234, 227, 201, 0.30); cursor: pointer; } #s-area, #seek-bar { position: relative; height: 3px; border-radius: 4px; } #seek-bar { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--text); transition: 0.2s ease width; z-index: 1; } #player-content { position: relative; height: 100%; background-color: var(--dark-bg); border-radius: 15px 15px 0px 0px; border: var(--border60); border-bottom: none; z-index: 2; } #album-art { position: absolute; top: -48px; width: 95px; height: 95px; margin-left: 20px; transform: rotateZ(0); transition: 0.3s ease all; box-shadow: 0 0 0 10px var(--dark-bg); border-radius: 50%; overflow: hidden; } #album-art.active { top: -60px; box-shadow: 0 0 0 4px var(--dark-bg), 0 30px 50px -15px rgba(0, 0, 0, 0.40); } #album-art:before { content: ""; position: absolute; top: 50%; right: 0; left: 0; width: 20px; height: 20px; margin: -10px auto 0 auto; background-color: #535c5a; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--dark-bg); z-index: 2; } #album-art img.active { opacity: 1; z-index: 1; } #album-art img, #buffer-box { transition: 0.1s linear all; } #album-art img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; } #player-controls { display: inline-flex; align-items: center; gap: 73px; width: 217px; height: 100%; margin: 0 20px 0 135px; float: right; overflow: hidden; color: var(--link); font-size: 26px; } .control { width: 33.333%; float: left; padding: 12px 0; cursor: pointer; } #album-art.active img.active { z-index: 1; animation: rotateAlbumArt 5s linear 0s infinite forwards; } @keyframes rotateAlbumArt { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } }