Hola necesito modificar el volume del reproductor web pero no va como yo quiero, quiero que el relleno empieze desde el minimo y cuando muevo el circulo del volume que rellene de izquerda a derecha como debe ir adjunto codigo.
const playCircle = document.getElementById('playCircle');
const volumePath = document.querySelector('.volume-path');
const volumeFill = document.querySelector('.volume-fill');
const volumeKnob = document.querySelector('.volume-knob');
const audioPlayer = document.getElementById('audioPlayer');
let isPlaying = false;
let isDragging = false;
playCircle.addEventListener('click', () => {
if (isPlaying) {
audioPlayer.pause();
} else {
audioPlayer.play();
}
isPlaying = !isPlaying;
updatePlayCircle();
});
function updatePlayCircle() {
if (isPlaying) {
playCircle.classList.add('active');
} else {
playCircle.classList.remove('active');
}
}
function getPointOnPath(path, percentage) {
const pathLength = path.getTotalLength();
const point = path.getPointAtLength(percentage * pathLength);
return point;
}
function updateVolume(x) {
const volumePath = document.querySelector('.volume-path');
const svg = document.querySelector('.volume-svg');
const svgRect = svg.getBoundingClientRect();
const svgWidth = svgRect.width;
const svgLeft = svgRect.left;
let volumePercentage = (x - svgLeft) / svgWidth;
volumePercentage = Math.min(Math.max(volumePercentage, 0), 1);
audioPlayer.volume = volumePercentage;
const knobX = volumePercentage * 200; // Posición del círculo en la barra (200 es el ancho de la barra)
const point = getPointOnPath(volumePath, knobX / 220); // Normalizamos la posición del círculo a la longitud total del path
// Ajuste para que el relleno vaya desde M 10,55 hacia la derecha hasta la posición del círculo
const arcFlag = volumePercentage > 0.5 ? 1 : 0; // 1 para sentido de las agujas del reloj, 0 para sentido contrario
volumeFill.setAttribute('d', `M 10,55 A 45,45 0 ${arcFlag},1 ${point.x},${point.y}`);
volumeFill.setAttribute('stroke-dashoffset', 275 - volumePercentage * 275);
volumeKnob.setAttribute('cx', point.x);
volumeKnob.setAttribute('cy', point.y);
}
volumeKnob.addEventListener('mousedown', (e) => {
isDragging = true;
updateVolume(e.clientX);
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
updateVolume(e.clientX);
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Actualización inicial del círculo de manipulación en la posición de 0
updateVolume(10); // Establecemos la posición inicial del círculo al inicio de la barra
updatePlayCircle();
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.player-container {
position: relative;
width: 220px;
height: 220px;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transform: translate(-50%, -50%);
transition: background-color 0.2s ease;
z-index: 3; /* Mover el círculo hacia adelante */
}
.circle.active {
background-color: #ff5733;
}
.volume-container {
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 300px;
overflow: hidden;
}
.volume-svg {
width: 100%;
height: 100%;
}
.volume-path {
fill: none;
stroke: #ccc;
stroke-width: 10;
stroke-linecap: round;
transition: stroke 0.2s ease;
z-index: 2;
}
.volume-fill {
fill: none;
stroke: #ff5733;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 275; /* Longitud total de la barra (220 + 45 + 10) */
stroke-dashoffset: 275; /* Valor inicial para que el relleno esté vacío */
z-index: 1; /* Mover el relleno detrás del círculo */
}
.volume-knob {
fill: #ff5733;
cursor: pointer;
z-index: 4; /* Mover el círculo del volumen más adelante */
}
<!DOCTYPE html>
<html>
<head>
<title>Reproductor con Control de Volumen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="player-container">
<div class="circle" id="playCircle"></div>
<audio id="audioPlayer">
<source src="https://play.los40.com/widget/directo/los40_dance/" type="audio/mpeg">
Tu navegador no admite el elemento de audio.
</audio>
<div class="volume-container">
<svg class="volume-svg" viewBox="0 0 220 110" width="220" height="110">
<path class="volume-path" d="M 10,55 A 45,45 0 0,0 210,55"></path>
<path class="volume-fill"></path>
<circle class="volume-knob" cx="10" cy="55" r="10"></circle>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
</html>