Pregunta Música en la página

santibrocal · 21 Sep 2024

Hola a todos! Un cliente me pidió incluir una canción al ingresar a la web. No se lo recomendé pero el quiere que lo haga ya que es una página del rubro de Yoga y es una canción relajante. Alguno sabe como podría incluirla? Vi un video en donde puedo incrustar un video pero en vez de que sea mp4, subirlo en mp3 y ocultar todo detalle de reproductor. El problema es con Chorme que te pide permisos para reproducir. Si alguno tiene una solución más eficiente se los agradecería :)

Lalotowerz · 21 Sep 2024

Simple lo subes a medios y lo incrustas en algún lado con el auto play; sugiero en en los widgets; la otra es poner un reproductor en la parte de abajo del sitio igual el parámetro es autoplay
Hasta con HTML 5 lo puedes incrustar

Código:

<audio controls autoplay>
  <source src="tu-archivo.mp3" type="audio/mpeg">
  Tu navegador no soporta la reproducción de audio.
</audio>

exile · 22 Sep 2024

Los navegadores no permiten autoplay por defecto al entrar en una web, el usuario tiene que hacer un clikc para empezar a reproducir. Una posible solución es poner una pantalla previa a modo de preloader y cuando el usuario haga click empezar a reproducir la canción.

Cosmin Vladut · 23 Sep 2024

Hola prueba esto: descarga un plugin para introducir código como por ejemplo:

Descargar - Code Snippets PRO - ForoWebmasters - 🕑 Registro de cambios

forowebmasters.com

-Una vez que lo tengas instalado puedes introducir esto para hacer un botón de audio que esté fijo en la parte izquierda inferior de la página para que el usuario cuando lo cliquen la música se reproduzcámoos en loop.

HTML

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio en la página</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <audio id="backgroundMusic" loop>
    <source src="ruta_de_tu_musica.mp3" type="audio/mpeg">
  </audio>

  <button id="audioButton">
    <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="Icono de audio">
  </button>

  <script src="script.js"></script>
</body>
</html>

CSS

CSS:

#audioButton {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#audioButton img {
  width: 24px;
  height: 24px;
}

SCRIPT

JavaScript:

<script>
    const audio = document.getElementById('backgroundMusic');
const audioButton = document.getElementById('audioButton');

document.addEventListener('DOMContentLoaded', () => {
  audio.play().catch(() => {
    audioButton.style.display = 'block';
  });
});

audioButton.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});
<\script>

Prueba esto y nos comentas como va, cualquier duda preguntas. Quedo a la espera.

Pregunta Música en la página

Aviso legal de Cookies