adio link 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player with Playlist</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGvzDhwk5cm_cpuMZ3MPv5sxoUIC79xOcMQiNpOcSrIbqyaFqLuuMyBmWRnB1OaiQFyDr08cElVsKy6LmqnhgegRP3z9A3oi6c-HxXBZm21m4cs5MDp_5F0E4KydgVmFrBEpzydF5Ft3j9bIxpBQFGzha7HqSE0WYtvLEJyTrFCK2NHcttwHrmynfJhc/s259/download%20(1).jpg'); /* Apne background image ka URL yahan daalein */
background-size: cover;
background-position: center;
}
#content {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 80%;
margin: auto;
}
#image-container {
flex: 1;
text-align: center;
}
#song-list {
flex: 1;
background: rgba(255, 255, 255, 0.7); /* Transparent white background for better readability */
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#audioPlayer {
margin-top: 20px;
width: 100%;
}
#playlist {
list-style: none;
padding: 0;
margin: 0;
}
#playlist li {
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<div id="content">
<div id="image-container">
<!-- Add your image or any content you want to display on the left side -->
<img src="yaha photo lagaye" alt="Background Image" style="max-width: 100%; border-radius: 10px;">
</div>
<div id="song-list">
<h1 style="color: black;">Simple Audio Player with Playlist</h1>
<audio id="audioPlayer" controls autoplay>
Your browser does not support the audio element.
</audio>
<ul id="playlist">
<li onclick="playSong('song1.mp3')">Song 1</li>
<li onclick="playSong('song2.mp3')">Song 2</li>
<li onclick="playSong('song3.mp3')">Song 3</li>
<!-- Add more songs as needed -->
</ul>
</div>
</div>
<script>
var playlist = document.getElementById('playlist');
var audioPlayer = document.getElementById('audioPlayer');
function playSong(song) {
audioPlayer.src = song;
audioPlayer.play();
// Automatically play the next song when the current song ends
audioPlayer.addEventListener('ended', playNextSong);
}
function playNextSong() {
var nextSongIndex = Array.from(playlist.children).indexOf(document.querySelector('[src="' + audioPlayer.src + '"]')) + 1;
if (nextSongIndex < playlist.children.length) {
var nextSong = playlist.children[nextSongIndex].getAttribute('onclick').replace("playSong('", '').replace("')", '');
playSong(nextSong);
} else {
// If last song, stop playing
audioPlayer.pause();
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Audio Player with Playlist</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
color: white;
}
#background {
position: center;
top: 0;
left: 0;
width: 40vw;
height: 150vh;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyt5u3N7bk6T65A7PgRJXRxne2qvq1H3mEZtEQY5Mp5kPkf28m7hSSvZ7g3HD00ntkBWFLvR7pJo5MZE3wtW9LDYXRCPjrTGHSv1CJI5wf6Jkgxy1f6zUpFxWtYl0KT7Ml4ih5GnCS50Aw31dWhGQ6o05h9iOocpnVznFfSJUt1h6CbKpeQmKPbVoA_Q0/s225/Untitledd.jpg') no-repeat center center fixed; /* Apne round background image ka URL yahan daalein */
background-size: cover;
border-radius: 100%;
animation: rotateBackground 30s linear infinite; /* Background image ko 20 seconds mein ek baar ghumaye */
}
@keyframes rotateBackground {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
h1 {
z-index: 1;
}
#audioPlayer {
margin-top: 20px;
z-index: 1;
}
#playlist {
list-style: none;
padding: 0;
z-index: 1;
}
#playlist li {
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<div id="background"></div>
<h1>Animated Audio Player with Playlist</h1>
<audio id="audioPlayer" controls autoplay>
Your browser does not support the audio element.
</audio>
<ul id="playlist">
<li onclick="playSong('https://drive.google.com/uc?export=download&id=1m7e4_iyeaF33S3Cawvhg609qsVM2TcNg')">Song 1</li>
<li onclick="playSong('song2.mp3')">Song 2</li>
<li onclick="playSong('song3.mp3')">Song 3</li>
<!-- Add more songs as needed -->
</ul>
<script>
var playlist = document.getElementById('playlist');
var audioPlayer = document.getElementById('audioPlayer');
function playSong(song) {
audioPlayer.src = song;
audioPlayer.play();
// Automatically play the next song when the current song ends
audioPlayer.addEventListener('ended', playNextSong);
}
function playNextSong() {
var nextSongIndex = Array.from(playlist.children).indexOf(document.querySelector('[src="' + audioPlayer.src + '"]')) + 1;
if (nextSongIndex < playlist.children.length) {
var nextSong = playlist.children[nextSongIndex].getAttribute('onclick').replace("playSong('", '').replace("')", '');
playSong(nextSong);
} else {
// If last song, stop playing
audioPlayer.pause();
}
}
</script>
</body>
</html>
About malay pramanik
कोई टिप्पणी नहीं