1

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>

1 respuesta 1

0

Yo usuaria stroke-dasharray, que genera una línea divida por espacios

Su sintaxis es la siguiente: stroke-dasharray="<dash-length>, <gap-length>"

              gap-length     dash-length
               _______          _____
               |     |          |   |
               V     V          V   V           
----      -----      -----      ----- 

Donde:

  • gap-length: Es el espacio entre líneas
  • dash-length: Es el largo de la línea

Entonces si hacemos que el gap-length mida "medio arco" solo mostrará una línea (porque la siguiente queda fuera el área de visión)

Y Digamos que "medio arco" vale 315 y que el porcentaje del volumen está entre 0 y 1

tendríamos que:

  • 10%: stroke-dasharray = "0.1*315, 315";
  • 20%: stroke-dasharray = "0.2*315, 315";
  • 30%: stroke-dasharray = "0.3*315, 315";
  • Etc..

nota: Además hay que eliminar el atributo stroke-dashoffset; y los stroke-dasharray: 275; stroke-dashoffset: 275;* del css para que no interfieran

Demo

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
  
  
  //ESTO ES LO NUEVO ===========================
  const media_arc=315;
  volumeFill.setAttribute('stroke-dasharray', `${volumePercentage * media_arc}, ${media_arc}`);
  //=============================================
  
  
  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;

  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" d="M 10,55 A 45,45 0 0,0 210,55" stroke-dasharray="0, 315"></path>
        <circle class="volume-knob" cx="10" cy="55" r="10"></circle>
      </svg>
    </div>
  </div>
  <script src="script.js"></script>
  </body>
</html>

Tu código tiene otro problema, el cual la bola no sigue correctamente los porcentajes del volumen. Pero eso escapa a la pregunta que realizaste.

2
  • vale gracias, por la explicacion, pero veo que al pasar del medio me cre el relleno por encima del circulo a la derecha Commented el 19 jul. 2023 a las 11:37
  • @DanielOvidiu No es crezca el circulo a la derecha, es que la bola no sigue correctamente el porcentaje (es lo que te puse en último párrafo). Si te fifas la bola no llega al final
    – Yussef
    Commented el 19 jul. 2023 a las 19:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.