audio link create whith playlis, html css and java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio Player</title>
<link rel="stylesheet" href="styles.css">
<style>.audio-player {
max-width: 400px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.playlist {
list-style: none;
padding: 0;
}
.playlist li {
cursor: pointer;
margin-bottom: 5px;
}
.playlist li:hover {
color: blue;
}
</style>
</head>
<body>
<div class="audio-player">
<h2>Playlist</h2>
<ul class="playlist">
<!-- List of songs -->
<li data-src="https://drive.google.com/uc?id=1jQVvQsrGiS3qTaG2ixJBVxOZ5sSgrPkl">Song 1</li>
<li data-src="https://drive.google.com/uc?export=download&id=1-6vB2FkdQxQMKkhBk6qJJDTy-YFId6Qu">Song 2</li>
<!-- Add more songs in a similar manner -->
<!-- Ensure song file paths are correct -->
</ul>
<audio id="audio" controls>
Your browser does not support the audio element.
</audio>
</div>
<script >document.addEventListener('DOMContentLoaded', function () {
const audio = document.getElementById('audio');
const playlist = document.querySelectorAll('.playlist li');
playlist.forEach(function (song) {
song.addEventListener('click', function () {
audio.src = this.getAttribute('data-src');
audio.play();
});
});
});
</script>
</body>
</html>
Playlist
- Song 1
- Song 2
About malay pramanik
कोई टिप्पणी नहीं