how to create audio play list with photo
-
Song 1
-
Song 2
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: RED;
}
#audio-player {
width: 600px;
margin: 50px auto;
background-color: black;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
#audio-list {
list-style: none;
padding: 0;
text-align: left;
max-height: 300px;
overflow-x: auto;
}
.audio-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.audio-item img {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 50%;
}
.audio-controls {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
audio {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="audio-player">
<ul id="audio-list">
<li class="audio-item" data-src="song1.mp3">
<img alt="Song 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyt5u3N7bk6T65A7PgRJXRxne2qvq1H3mEZtEQY5Mp5kPkf28m7hSSvZ7g3HD00ntkBWFLvR7pJo5MZE3wtW9LDYXRCPjrTGHSv1CJI5wf6Jkgxy1f6zUpFxWtYl0KT7Ml4ih5GnCS50Aw31dWhGQ6o05h9iOocpnVznFfSJUt1h6CbKpeQmKPbVoA_Q0/s225/Untitledd.jpg" />
Song 1
</li>
<li class="audio-item" data-src="song2.mp3">
<img alt="Song 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyt5u3N7bk6T65A7PgRJXRxne2qvq1H3mEZtEQY5Mp5kPkf28m7hSSvZ7g3HD00ntkBWFLvR7pJo5MZE3wtW9LDYXRCPjrTGHSv1CJI5wf6Jkgxy1f6zUpFxWtYl0KT7Ml4ih5GnCS50Aw31dWhGQ6o05h9iOocpnVznFfSJUt1h6CbKpeQmKPbVoA_Q0/s225/Untitledd.jpg" />
Song 2
</li>
<!-- Add more songs as needed -->
</ul>
<div class="audio-controls">
<button onclick="prevSong()">Previous</button>
<button id="playPause" onclick="togglePlay()">Play</button>
<button onclick="nextSong()">Next</button>
</div>
<audio controls="" id="audio">
Your browser does not support the audio element.
</audio>
</div>
<script>
var audioList = document.getElementById('audio-list');
var audioPlayer = document.getElementById('audio');
var playPauseButton = document.getElementById('playPause');
var currentIndex = 0;
function loadSong(index) {
var song = audioList.children[index];
var source = song.getAttribute('data-src');
var title = song.textContent.trim();
audioPlayer.src = source;
audioPlayer.load();
audioPlayer.play();
playPauseButton.textContent = 'Pause';
// Update the currently playing song
currentIndex = index;
}
function togglePlay() {
if (audioPlayer.paused) {
audioPlayer.play();
playPauseButton.textContent = 'Pause';
} else {
audioPlayer.pause();
playPauseButton.textContent = 'Play';
}
}
function prevSong() {
currentIndex = (currentIndex - 1 + audioList.children.length) % audioList.children.length;
loadSong(currentIndex);
}
function nextSong() {
currentIndex = (currentIndex + 1) % audioList.children.length;
loadSong(currentIndex);
}
// Load the first song by default
loadSong(currentIndex);
</script>
</body>
</html>
About malay pramanik
कोई टिप्पणी नहीं