audio player create with play list
Audio Player
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#audio-player {
width: 300px;
margin: 50px auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: GREEN;
padding: 20px;
}
#audio-list {
list-style: none;
padding: 0;
}
#audio-list li {
margin-bottom: 10px;
}
audio {
width: 100%;
margin-top: 10px;
}
button {
margin: 5px;
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="audio-player">
<h2>Audio Player</h2>
<ul id="audio-list">
<li><button onclick="playAudio('https://drive.google.com/uc?export=download&id=1BZjFY-c_Er6aSICfAiDiifbnP3RE6LmA')">Play Song 1</button></li>
<li><button onclick="playAudio('https://drive.google.com/uc?export=download&id=1HcoF9FPsCX2nRyoLQi0VDe2ohLcJl3Bv')">Play Song 2</button></li>
<li><button onclick="playAudio('audio3.mp3')">Play Song 3</button></li>
</ul>
<audio id="player" controls></audio>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="next()">Next</button>
</div>
<script>
var audioList = ['audio1.mp3', 'audio2.mp3', 'audio3.mp3'];
var currentAudioIndex = 0;
function playAudio(audioSrc) {
var player = document.getElementById('player');
player.src = audioSrc;
player.play();
}
function play() {
var player = document.getElementById('player');
player.play();
}
function pause() {
var player = document.getElementById('player');
player.pause();
}
function next() {
currentAudioIndex = (currentAudioIndex + 1) % audioList.length;
playAudio(audioList[currentAudioIndex]);
}
</script>
</body>
</html>
About malay pramanik
कोई टिप्पणी नहीं