audio play genereate html css java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#audio-player {
width: 300px;
margin: auto;
text-align: center;
background-color: #3498db;
padding: 20px;
color: #fff;
}
#audio-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.audio-item {
margin: 5px 0;
cursor: pointer;
display: flex;
align-items: center;
}
.audio-item img {
width: 30px;
height: 30px;
margin-right: 10px;
}
#audio-controls {
margin-top: 20px;
}
#audio-controls button {
margin: 0 10px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="audio-player">
<ul id="audio-list"></ul>
<div id="audio-controls">
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="nextAudio()">Next</button>
</div>
<audio id="audio" controls></audio>
</div>
<script>
var audioList = [
{ title: 'Song 1', src: 'audio/song1.mp3', image: 'images/song1.jpg' },
{ title: 'Song 2', src: 'audio/song2.mp3', image: 'images/song2.jpg' },
// Add more songs as needed
];
var currentAudioIndex = 0;
function loadAudioList() {
var audioListElement = document.getElementById('audio-list');
audioList.forEach(function (audio, index) {
var listItem = document.createElement('li');
listItem.className = 'audio-item';
listItem.innerHTML = '<img src="' + audio.image + '" alt="' + audio.title + '"> ' + audio.title;
listItem.addEventListener('click', function () {
currentAudioIndex = index;
loadAudio();
});
audioListElement.appendChild(listItem);
});
}
function loadAudio() {
var audioElement = document.getElementById('audio');
audioElement.src = audioList[currentAudioIndex].src;
audioElement.load();
}
function playAudio() {
var audioElement = document.getElementById('audio');
audioElement.play();
}
function pauseAudio() {
var audioElement = document.getElementById('audio');
audioElement.pause();
}
function nextAudio() {
currentAudioIndex = (currentAudioIndex + 1) % audioList.length;
loadAudio();
playAudio(); // Auto-play next audio
}
window.onload = function () {
loadAudioList();
loadAudio();
};
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db;
color: #fff;
text-align: center;
}
#audio-player {
margin: 50px auto;
width: 300px;
background-color: #2980b9;
padding: 20px;
border-radius: 10px;
}
#song-list {
text-align: left;
margin-bottom: 20px;
}
#controls {
display: flex;
justify-content: center;
align-items: center;
}
#play,
#next {
background-color: #2ecc71;
color: #fff;
padding: 10px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#play:hover,
#next:hover {
background-color: #27ae60;
}
#preview {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="audio-player">
<div id="song-list">
<label for="songs">Select a song:</label>
<select id="songs" onchange="loadSong()">
<option value="song1.mp3">Song 1</option>
<option value="song2.mp3">Song 2</option>
<!-- Add more songs as needed -->
</select>
</div>
<img id="preview" src="default-image.jpg" alt="Song Cover">
<div id="controls">
<button id="play" onclick="togglePlay()">Play</button>
<button id="next" onclick="nextSong()">Next</button>
</div>
<audio id="audio" src="" controls style="width: 100%;"></audio>
</div>
<script>
var audio = document.getElementById('audio');
var songList = document.getElementById('songs');
var previewImage = document.getElementById('preview');
function loadSong() {
var selectedSong = songList.value;
audio.src = selectedSong;
// You can set the preview image based on the selected song
previewImage.src = selectedSong.replace('.mp3', '-image.jpg');
}
function togglePlay() {
if (audio.paused) {
audio.play();
document.getElementById('play').textContent = 'Pause';
} else {
audio.pause();
document.getElementById('play').textContent = 'Play';
}
}
function nextSong() {
// Add logic to switch to the next song in the list
// For simplicity, let's just select the next option in the list
var currentIndex = songList.selectedIndex;
if (currentIndex < songList.options.length - 1) {
songList.selectedIndex = currentIndex + 1;
loadSong();
audio.play();
}
}
</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>Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db;
}
#audio-container {
width: 300px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#audio-list {
list-style: none;
padding: 0;
margin: 0;
overflow: auto;
max-height: 150px;
}
#audio-list li {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #ccc;
background-color: #3498db;
color: #fff;
}
#audio-list li:hover {
background-color: #2980b9;
}
#player-controls {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
#audio-image {
max-width: 100px;
max-height: 100px;
border-radius: 50%;
overflow: hidden;
background-color: #2980b9;
}
#audio-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
#audio-controls {
display: flex;
align-items: center;
gap: 10px;
}
</style>
</head>
<body>
<div id="audio-container">
<ul id="audio-list">
<!-- Add your audio files here -->
<li data-src="audio1.mp3" data-image="image1.jpg">Song 1</li>
<li data-src="audio2.mp3" data-image="image2.jpg">Song 2</li>
<li data-src="audio3.mp3" data-image="image3.jpg">Song 3</li>
</ul>
<div id="player-controls">
<div id="audio-image">
<img id="album-image" src="" alt="Album Image">
</div>
<div id="audio-controls">
<button id="prev-button" onclick="prevSong()">Prev</button>
<button id="play-button" onclick="togglePlay()">Play</button>
<button id="next-button" onclick="nextSong()">Next</button>
</div>
</div>
</div>
<script>
var audioList = document.getElementById('audio-list');
var albumImage = document.getElementById('album-image');
var audio = new Audio();
var currentIndex = 0;
function loadSong(index) {
var song = audioList.children[index];
audio.src = song.dataset.src;
albumImage.src = song.dataset.image;
}
function togglePlay() {
if (audio.paused) {
audio.play();
document.getElementById('play-button').innerText = 'Pause';
} else {
audio.pause();
document.getElementById('play-button').innerText = 'Play';
}
}
function nextSong() {
currentIndex = (currentIndex + 1) % audioList.children.length;
loadSong(currentIndex);
audio.play();
document.getElementById('play-button').innerText = 'Pause';
}
function prevSong() {
currentIndex = (currentIndex - 1 + audioList.children.length) % audioList.children.length;
loadSong(currentIndex);
audio.play();
document.getElementById('play-button').innerText = 'Pause';
}
// Load the first song
loadSong(currentIndex);
</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>Audio Embed Tool</title>
<style><br>body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.audio-embed-tool {
max-width: 400px;
width: 100%;
text-align: center;
}
.playlist {
margin-top: 10px;
}
.controls {
margin-top: 10px;
}
button {
margin: 5px;
}
</br></style>
</head>
<body>
<div class="audio-embed-tool">
<audio controls id="audioPlayer" preload="metadata">
Your browser does not support the audio element.
</audio>
<div id="playlist" class="playlist">
<!-- Playlist items will be added dynamically using JavaScript -->
</div>
<div class="controls">
<button id="prevBtn">Previous</button>
<button id="playPauseBtn">Play</button>
<button id="nextBtn">Next</button>
</div>
</div>
<script>document.addEventListener("DOMContentLoaded", function() {
const audioPlayer = document.getElementById("audioPlayer");
const playlistContainer = document.getElementById("playlist");
const playPauseBtn = document.getElementById("playPauseBtn");
const nextBtn = document.getElementById("nextBtn");
const prevBtn = document.getElementById("prevBtn");
let currentSongIndex = 0;
const songs = [
{ src: "https://drive.google.com/uc?export=download&id=16-G_EfQuXoHHPrbwDe1mYWu8BOTeaXtx", title: "Song 1" },
{ src: "https://drive.google.com/uc?export=download&id=1u_zZfFG521Gfq2r8LL1aDRmL0TDwmmsS", title: "Song 2" },
// Add more songs as needed
];
function loadSong(index) {
const currentSong = songs[index];
audioPlayer.src = currentSong.src;
audioPlayer.play();
}
function updatePlaylist() {
playlistContainer.innerHTML = '';
songs.forEach((song, index) => {
const playlistItem = document.createElement('div');
playlistItem.className = 'playlist-item';
playlistItem.textContent = song.title;
playlistItem.addEventListener('click', () => {
currentSongIndex = index;
loadSong(currentSongIndex);
});
playlistContainer.appendChild(playlistItem);
});
}
function togglePlayPause() {
if (audioPlayer.paused) {
audioPlayer.play();
playPauseBtn.textContent = 'Pause';
} else {
audioPlayer.pause();
playPauseBtn.textContent = 'Play';
}
}
function playNextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);
}
function playPrevSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
loadSong(currentSongIndex);
}
playPauseBtn.addEventListener("click", togglePlayPause);
nextBtn.addEventListener("click", playNextSong);
prevBtn.addEventListener("click", playPrevSong);
audioPlayer.addEventListener("ended", playNextSong);
// Load the first song and update the playlist
loadSong(currentSongIndex);
updatePlaylist();
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>Audio Player</title>
<link href="styles.css" rel="stylesheet"></link>
<style>.audio-player {
max-width: 600px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.playlist {
list-style: none;
padding: 0;
}
.playlist li {
cursor: pointer;
margin-bottom: 10px;
}
.playlist li:hover {
color: red;
}
</style>
</head>
<body>
<div class="audio-player">
<h2>Playlist</h2>
<ol class="playlist">
<!-- List of songs -->
<h2><li data-src="https://drive.google.com/uc?export=download&id=11QXmR2WD6H5OfM6_v9-1l8a_C2BsULyb">pardeshion se na ankhiya milana</li>
<li data-src="https://drive.google.com/uc?export=download&id=11pijF6mlT43OxW-BZbRUmow6RN9-lMwx">yahan mai ajnabi hun</li>
<!-- Add more songs in a similar manner -->
<!-- Ensure song file paths are correct -->
</ol>
<audio controls="" id="audio">
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio Player with Auto Play Next</title>
<style>
/* Basic styles for the audio player */
.audio-player {
max-width: 400px;
margin: 20px auto;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 5px;
cursor: pointer;
}
li:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="audio-player">
<audio id="audio" controls></audio>
<ul id="playlist"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const audio = document.getElementById('audio');
const playlist = document.getElementById('playlist');
const songs = [
{ name: 'Song 1', src: "https://drive.google.com/uc?export=download&id=1m7e4_iyeaF33S3Cawvhg609qsVM2TcNg" },
{ name: 'Song 2', src: 'https://drive.google.com/uc?export=download&id=1m7e4_iyeaF33S3Cawvhg609qsVM2TcNg' },
{ name: 'Song 10', src: 'https://drive.google.com/uc?export=download&id=1m7e4_iyeaF33S3Cawvhg609qsVM2TcNg' }
];
let currentSongIndex = 0;
function loadSong(songIndex) {
audio.src = songs[songIndex].src;
audio.play();
}
function playNextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);
}
audio.addEventListener('ended', playNextSong);
songs.forEach((song, index) => {
const listItem = document.createElement('li');
listItem.textContent = song.name;
listItem.addEventListener('click', () => {
currentSongIndex = index;
loadSong(currentSongIndex);
});
playlist.appendChild(listItem);
});
loadSong(currentSongIndex);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe_mzFSlpNYPjIshwmZ0ibeJX3UDgo8eCeOseijdeM_V3_5cn7krzJxM9OW3W36mwb6UsTVLOl7Nn3aHAsmHhVMucd9-jYCCmHDaA5DC0yfg4oZIizC56ExlyCs8xDLUhyOyKB_2LYMwQvyr-RywbDx5Fysfn1VnR5E3Yt-RhW2uTPyhwzLbZkokbw3A/s200/download%20(2).jpg" alt="Snow" style="width:50%">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1ergAQpZkPbGx2vhKux5TBDEGuXc702EP" type="audio/mpeg">
</audio>
</div>
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe_mzFSlpNYPjIshwmZ0ibeJX3UDgo8eCeOseijdeM_V3_5cn7krzJxM9OW3W36mwb6UsTVLOl7Nn3aHAsmHhVMucd9-jYCCmHDaA5DC0yfg4oZIizC56ExlyCs8xDLUhyOyKB_2LYMwQvyr-RywbDx5Fysfn1VnR5E3Yt-RhW2uTPyhwzLbZkokbw3A/s200/download%20(2).jpg" alt="Forest" style="width:50%">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1ergAQpZkPbGx2vhKux5TBDEGuXc702EP" type="audio/mpeg">
</audio>
</div>
<div class="row">
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe_mzFSlpNYPjIshwmZ0ibeJX3UDgo8eCeOseijdeM_V3_5cn7krzJxM9OW3W36mwb6UsTVLOl7Nn3aHAsmHhVMucd9-jYCCmHDaA5DC0yfg4oZIizC56ExlyCs8xDLUhyOyKB_2LYMwQvyr-RywbDx5Fysfn1VnR5E3Yt-RhW2uTPyhwzLbZkokbw3A/s200/download%20(2).jpg" alt="Snow" style="width:50%">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1ergAQpZkPbGx2vhKux5TBDEGuXc702EP" type="audio/mpeg">
</audio>
</div>
<div class="column">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe_mzFSlpNYPjIshwmZ0ibeJX3UDgo8eCeOseijdeM_V3_5cn7krzJxM9OW3W36mwb6UsTVLOl7Nn3aHAsmHhVMucd9-jYCCmHDaA5DC0yfg4oZIizC56ExlyCs8xDLUhyOyKB_2LYMwQvyr-RywbDx5Fysfn1VnR5E3Yt-RhW2uTPyhwzLbZkokbw3A/s200/download%20(2).jpg" alt="Forest" style="width:50%">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1ergAQpZkPbGx2vhKux5TBDEGuXc702EP" type="audio/mpeg">
</audio>
</div>
</body>
</html>
About malay pramanik
कोई टिप्पणी नहीं