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

trellat · 19 Sep 2024

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í macho cabríoes, por la patilla, porqueyolovalgo

trellat · 19 Sep 2024

¿Alguien sabría hacer para que le des a una y de deje de reproducir la que estaba sonando?

Glasgow · 19 Sep 2024

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

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 ojo ciego sangrando y la cara colorada. Fíjate lo lento que va el subforo esta tarde de repente sin explicación. Las doscientas ratas 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 apiolar a todos los que envidian y que la JIA es la salvación a sus autoestimitas. Vírgenes mamarrachos.

dischcatfish · 19 Sep 2024

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;
    tras*ition: 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:

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.
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.
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.

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

trellat

Madmaxista

trellat

Madmaxista

Glasgow

Madmaxista

Ia para gestionar reservas por whatsapp.

dischcatfish

Sinŭiju citizen

ChatGPT Plus

Explicación para los Glasgow de la vida:

Similar threads

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

trellat

Madmaxista

trellat

Madmaxista

Glasgow

Madmaxista

Ia para gestionar reservas por whatsapp.

dischcatfish

Sinŭiju citizen

ChatGPT Plus​

Explicación para los Glasgow de la vida:​

Similar threads

ChatGPT Plus

Explicación para los Glasgow de la vida: