Como hacer que las canciones se reproduzcan una detras de otra en orden html

trellat

Madmaxista
Desde
20 Abr 2020
Mensajes
16.753
Fruta
15.476
Pues eso, que me estoy haciendo unapagina web picando codigo html y javascript con una lista de canciones y quiero que cuando pulses a tercera por ejemplo al terminar esta empiece la 4 y al terminar esata la 5 y al terminar esta ....

¿sabeis de algun sitio que me pueda ayudar?

O decidme como hacerlo directamente por aquí carbon, por la patilla, porqueyolovalgo
 
¿Alguien sabría hacer para que le des a una y de deje de reproducir la que estaba sonando?
 
Espérate que los 200 mongolitos están todavía pidiéndole a la JIA que haga esta app:

Ia para gestionar reservas por whatsapp.

¿Alguien sabe de alguna IA (de pago si es necesario) que puedas gestionar reservas de salas para grupos de personas mediante WhatsApp? Es decir yo tengo un Excel con varias salsas y horarios disponibles, y necesito que los clientes puedan reservar sala y hora de forma independiente mediante...
www.burbuja.info www.burbuja.info

Todos expresando que tienen un primo en la NASA que hizo un cobete con el chatGPT y cuando aparece un caso real todos humillados con el pandero sangrando y la cara colorada. Fíjate lo lento que va el subforo esta tarde de repente sin explicación. Las doscientas ardilla humilladas mirando al suelo. Y dentro de tres días otra vez todos muy subiditos abriendo otro hilo repitiendo lo mismo, que la JIA va a cancelar a todos los que envidian y que la JIA es la salvación a sus autoestimitas. Vírgenes mamarrachos.
 
Crea una pagina en html y javascript, donde una lista de canciones se reproduzca automarticamente, una tras otra. Añade css para que quede un diseño agradable y sencillo, y que hasta el forero @Glasgow pueda entenderlo.

ChatGPT Plus​


Aquí te dejo un ejemplo de una página en HTML, CSS y JavaScript donde se reproduce una lista de canciones automáticamente, una tras otra. He creado un diseño simple y agradable usando CSS.

HTML (index.html)
HTML: 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Reproducción Automática</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Lista de Reproducción</h1>
        <audio id="audio-player" controls>
            Tu navegador no soporta el elemento de audio.
        </audio>
        <ul id="playlist">
            <li data-src="song1.mp3">Canción 1</li>
            <li data-src="song2.mp3">Canción 2</li>
            <li data-src="song3.mp3">Canción 3</li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)
CSS: 
body {
    font-family: Arial, sans-serif;
    background-tonalidad: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-tonalidad: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    font-size: 24px;
    tonalidad: #333;
}

#playlist {
    list-style: none;
    padding: 0;
}

#playlist li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: background-tonalidad 0.3s;
}

#playlist li:hover {
    background-tonalidad: #f7f7f7;
}

#playlist li.active {
    background-tonalidad: #d3e0ff;
}

#audio-player {
    width: 100%;
    margin-top: 20px;
}

JavaScript (script.js)
JavaScript: 
document.addEventListener('DOMContentLoaded', function() {
    const audioPlayer = document.getElementById('audio-player');
    const playlistItems = document.querySelectorAll('#playlist li');
    let currentSongIndex = 0;

    // Función para reproducir la canción seleccionada
    function playSong(index) {
        playlistItems.forEach((item, i) => {
            item.classList.toggle('active', i === index);
        });
        audioPlayer.src = playlistItems[index].getAttribute('data-src');
        audioPlayer.play();
    }

    // Reproducir la primera canción al cargar la página
    playSong(currentSongIndex);

    // Escuchar cuando termine la canción actual y pasar a la siguiente
    audioPlayer.addEventListener('ended', function() {
        currentSongIndex = (currentSongIndex + 1) % playlistItems.length;
        playSong(currentSongIndex);
    });

    // Hacer clic en una canción para reproducirla
    playlistItems.forEach((item, index) => {
        item.addEventListener('click', () => {
            currentSongIndex = index;
            playSong(currentSongIndex);
        });
    });
});

Explicación para los Glasgow de la vida:​

  1. HTML:
    • La página incluye un contenedor principal con un elemento <audio> y una lista de reproducción (<ul>).
    • Cada elemento <li> en la lista contiene la ruta del archivo de audio en el atributo data-src.
  2. CSS:
    • Se proporciona un diseño sencillo con un contenedor centrado y una lista de reproducción interactiva.
    • Las canciones activas tienen un fondo diferente para resaltar la selección.
  3. JavaScript:
    • El script carga automáticamente la primera canción y escucha el evento ended para pasar a la siguiente canción en la lista.
    • También permite seleccionar y reproducir una canción haciendo clic en ella.
Recuerda reemplazar las rutas de las canciones (song1.mp3, song2.mp3, etc.) por tus propios archivos de audio.
 
Iniciar sesión o registrarte para responder aquí.

Estadísticas del foro

Temas
2.049.632
Mensajes
58.154.017
Miembros
190.834
Último miembro
Xxtoxicxx

El blog de burbuja.info

Volver