Description:
GrooveHub is your dynamic Music Playlist Generator. Discover and play your favorite tunes with a visually appealing playlist interface. Simply click "Generate Playlist" to enjoy a seamless musical experience. Elevate your listening pleasure with GrooveHub—a responsive solution for music enthusiasts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Playlist Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 50px;
}
#playlist {
max-width: 600px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
audio {
width: 100%;
margin-top: 15px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:active {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="playlist">
<h2>Music Playlist Generator</h2>
<ul id="tracks-list"></ul>
<audio id="audio-player" controls></audio>
<button onclick="generatePlaylist()">Generate Playlist</button>
</div>
<script>
const playlist = [
{ name: 'Song 1', url: 'path/to/song1.mp3' },
{ name: 'Song 2', url: 'path/to/song2.mp3' },
{ name: 'Song 3', url: 'path/to/song3.mp3' },
// Add more songs to the playlist
];
function generatePlaylist() {
const tracksList = document.getElementById('tracks-list');
const audioPlayer = document.getElementById('audio-player');
// Clear previous playlist
tracksList.innerHTML = '';
// Generate playlist
playlist.forEach((track, index) => {
const listItem = document.createElement('li');
listItem.innerHTML = `<span>${track.name}</span><span><button onclick="playTrack(${index})">Play</button></span>`;
tracksList.appendChild(listItem);
});
// Set the first track as the default source for the audio player
audioPlayer.src = playlist[0].url;
}
function playTrack(index) {
const audioPlayer = document.getElementById('audio-player');
audioPlayer.src = playlist[index].url;
audioPlayer.play();
}
</script>
</body>
</html>
No comments:
Post a Comment