please am having issue creating a rounded custom image indicator around album image, the dot indicator is breaking out on page load but when i press play it move back to the circle , html, i want to create custom music player, any suggestion we do
const img = document.querySelector("#img");
const playPause = document.querySelector("#playpause");
const playPauseBtn = document.querySelector("#playpause-btn");
const audio = document.querySelector("#audio");
const title = document.querySelector("#title");
const prevBtn = document.querySelector("#prevbtn");
const nextBtn = document.querySelector("#nextbtn");
const progress = document.querySelector("#progress");
const progressIndicator = document.querySelector(".progress-indicator");
const repeatBtn = document.querySelector("#repeat");
const songs = [{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
displayName: 'Yıldız Tozu',
artist: 'Ozbi',
cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
},
{
path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',
displayName: 'You're Somebody Else',
artist: 'flora cash',
cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
},
];
let songIndex = 2;
let isPlaying = false;
function playSong() {
isPlaying = true;
playPauseBtn.classList.replace("fa-play", "fa-pause");
audio.play();
}
function pauseSong() {
isPlaying = false;
playPauseBtn.classList.replace("fa-pause", "fa-play");
audio.pause();
}
function loadSong(song) {
img.src = song.cover;
title.textContent = song.displayName;
audio.src = song.path;
}
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]);
playSong();
}
function updateProgress(e) {
if (isPlaying) {
const {
duration,
currentTime
} = e.target;
const progressPercent = (currentTime / duration) * 100;
progress.value = progressPercent;
const indicatorAngle = (progressPercent / 100) * 360;
const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
}
}
function progressSlide(e) {
const {
value
} = e.target;
const progressTime = Math.ceil((audio.duration / 100) * value);
audio.currentTime = progressTime;
if (!isPlaying) {
const indicatorAngle = (value / 100) * 360;
const indicatorX = Math.cos((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
const indicatorY = Math.sin((indicatorAngle - 90) * (Math.PI / 180)) * 160 + 160;
progressIndicator.style.transform = `translate(${indicatorX}px, ${indicatorY}px)`;
}
}
function repeat() {
repeatBtn.classList.toggle('color');
if (repeatBtn.classList.contains("color")) {
audio.loop = true;
} else {
audio.loop = false;
}
}
playPause.addEventListener("click", () => (isPlaying ? pauseSong() : playSong()));
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);
audio.addEventListener("timeupdate", updateProgress);
progress.addEventListener("input", progressSlide);
repeatBtn.addEventListener("click", repeat);
loadSong(songs[songIndex]);
.music-player-unique {
max-width: 350px;
margin: auto;
}
.disc-container-unique {
position: relative;
width: 300px;
height: 300px;
margin: auto;
}
.disc-image-unique {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 5px solid #343a40;
}
.progress-container-unique {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
height: 320px;
border-radius: 50%;
transform: translate(-50%, -50%);
border: 4px solid black;
box-shadow: 0 17px 33px rgb(189 190 193 / 1);
display: flex;
justify-content: center;
align-items: center;
}
.progress-unique {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 2px;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
cursor: pointer;
}
.progress-indicator {
position: absolute;
width: 16px;
height: 16px;
background-color: #007bff;
border-radius: 50%;
top: -8px;
left: -8px;
transform: translateX(0);
}
.song-title-unique {
font-size: 18px;
font-weight: bold;
color: #343a40;
}
.controls-unique {
display: flex;
justify-content: center;
align-items: center;
}
.controls-unique .btn-unique {
background-color: transparent;
border: none;
font-size: 32px;
color: #343a40;
margin: 0 10px;
}
.controls-unique .btn-unique:hover {
color: #007bff;
}
<div class="container text-center mt-5">
<div class="music-player-unique">
<div class="disc-container-unique">
<img id="img" src="/src/images/music-1.jpg" alt="Music Disc" class="disc-image-unique">
<div class="progress-container-unique">
<input type="range" id="progress" value="0" class="progress-unique">
<div class="progress-indicator"></div>
</div>
</div>
<div class="song-title-unique mt-3" id="title">Song Title</div>
<div class="controls-unique mt-4">
<button id="repeat" class="btn-unique"><i class="fa-regular fa-repeat"></i></button>
<button id="prevbtn" class="btn-unique"><i class="fa-regular fa-backward"></i></button>
<button id="playpause" class="btn-unique"><i id="playpause-btn" class="fa-regular fa-play"></i></button>
<button id="nextbtn" class="btn-unique"><i class="fa-regular fa-forward"></i></button>
<button id="list" class="btn-unique"><i class="fa-regular fa-list"></i></button>
</div>
<audio id="audio"></audio>
</div>
</div>
i have tried my best to make it work but seem not working, the dot not working well