audio player link html me
<!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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
#audio-container {
display: flex;
flex-direction: column;
align-items: center;
}
audio {
width: 100%;
max-width: 400px;
margin-bottom: 20px;
}
button {
font-size: 16px;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="audio-container">
<audio id="myAudio" src="your-audio-file.mp3"></audio>
<button id="playPauseBtn" onclick="togglePlay()">Play</button>
<button onclick="stopAudio()">Stop</button>
<input type="range" id="volumeControl" step="0.1" onchange="changeVolume()" value="1" min="0" max="1">
</div>
<script>
const audio = document.getElementById("myAudio");
const playPauseBtn = document.getElementById("playPauseBtn");
function togglePlay() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = "Pause";
} else {
audio.pause();
playPauseBtn.textContent = "Play";
}
}
function stopAudio() {
audio.pause();
audio.currentTime = 0;
playPauseBtn.textContent = "Play";
}
function changeVolume() {
audio.volume = document.getElementById("volumeControl").value;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add your styles here */
</style>
<title>Audio Playlist Widget</title>
</head>
<body>
<div id="audio-container">
<audio id="audio-player" controls>
Your browser does not support the audio element.
</audio>
<ul id="playlist">
<!-- Add your audio files to the playlist -->
<li data-src="audio1.mp3">Audio 1</li>
<li data-src="audio2.mp3">Audio 2</li>
<li data-src="audio3.mp3">Audio 3</li>
<!-- Add more items as needed -->
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const audioPlayer = document.getElementById('audio-player');
const playlist = document.getElementById('playlist');
const playlistItems = playlist.getElementsByTagName('li');
let currentTrack = 0;
// Function to play a track
function playTrack(index) {
const track = playlistItems[index];
const trackSource = track.getAttribute('data-src');
audioPlayer.src = trackSource;
audioPlayer.play();
}
// Play the first track when the page loads
playTrack(currentTrack);
// Event listener for playlist items
playlist.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
currentTrack = Array.from(playlistItems).indexOf(e.target);
playTrack(currentTrack);
}
});
// Event listener for the end of the audio track
audioPlayer.addEventListener('ended', function () {
// Play the next track in the playlist
currentTrack = (currentTrack + 1) % playlistItems.length;
playTrack(currentTrack);
});
});
</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 Element Widget</title>
</head>
<body>
<!-- Audio Element -->
<audio id="myAudio" controls>
<source src="your-audio-file.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- Play Button -->
<button onclick="playAudio()">Play</button>
<!-- Pause Button -->
<button onclick="pauseAudio()">Pause</button>
<!-- Stop Button -->
<button onclick="stopAudio()">Stop</button>
<script>
// Get the audio element
var audio = document.getElementById("myAudio");
// Function to play the audio
function playAudio() {
audio.play();
}
// Function to pause the audio
function pauseAudio() {
audio.pause();
}
// Function to stop the audio
function stopAudio() {
audio.pause();
audio.currentTime = 0;
}
</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>Auto Play Audio Playlist</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#playlist {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
#playlist li {
margin: 0 10px;
cursor: pointer;
text-decoration: underline;
}
#audioPlayer {
width: 100%;
max-width: 400px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Auto Play Audio Playlist</h1>
<ul id="playlist">
<li onclick="playSong('audio/song1.mp3')">Song 1</li>
<li onclick="playSong('audio/song2.mp3')">Song 2</li>
<li onclick="playSong('audio/song3.mp3')">Song 3</li>
<!-- Add more songs as needed -->
</ul>
<audio id="audioPlayer" controls autoplay onended="playNext()">
<source src="" type="audio/mp3" id="audioSource">
Your browser does not support the audio element.
</audio>
<script>
var playlist = [
'audio/song1.mp3',
'audio/song2.mp3',
'audio/song3.mp3'
// Add more songs as needed
];
var currentSongIndex = 0;
var audioPlayer = document.getElementById('audioPlayer');
var audioSource = document.getElementById('audioSource');
function playSong(songUrl) {
audioSource.src = songUrl;
audioPlayer.load();
audioPlayer.play();
}
function playNext() {
currentSongIndex = (currentSongIndex + 1) % playlist.length;
playSong(playlist[currentSongIndex]);
}
</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>Custom Audioplayer</title>
<style>
body {
font-family: Arial, sans-serif;
}
#audio-player {
width: 300px;
margin: 20px auto;
background-color: #f4f4f4;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
#playlist {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 150px;
}
#playlist li {
cursor: pointer;
padding: 8px;
border-bottom: 1px solid #ddd;
}
#playlist li:hover {
background-color: #f0f0f0;
}
.active {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div id="audio-player">
<audio id="audio" controls>
Your browser does not support the audio element.
</audio>
<ul id="playlist"></ul>
</div>
<script>
const audioPlayer = document.getElementById('audio');
const playlist = document.getElementById('playlist');
const songs = [
{ name: 'Song 1', src: 'path/to/song1.mp3' },
{ name: 'Song 2', src: 'path/to/song2.mp3' },
{ name: 'Song 3', src: 'path/to/song3.mp3' }
];
songs.forEach((song, index) => {
const listItem = document.createElement('li');
listItem.textContent = song.name;
listItem.setAttribute('data-index', index);
playlist.appendChild(listItem);
listItem.addEventListener('click', () => {
audioPlayer.src = song.src;
toggleActive(index);
audioPlayer.play();
});
});
function toggleActive(index) {
const listItems = document.querySelectorAll('#playlist li');
listItems.forEach(item => {
item.classList.remove('active');
});
listItems[index].classList.add('active');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
}
.column {
flex: 1;
padding: 20px;
border: 1px solid #ccc;
}
#audio-column {
display: none; /* Initially hide the audio column */
}
#playlist-column {
/* Add styling for playlist column */
}
#image-column {
/* Add styling for image column */
}
</style>
</head>
<body>
<div id="audio-column" class="column">
<!-- Audio content goes here -->
<audio controls>
<source src="your-audio-file.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
<div id="playlist-column" class="column">
<!-- Playlist content goes here -->
<h2>Playlist</h2>
<ul>
<li>Song 1</li>
<li>Song 2</li>
<!-- Add more playlist items as needed -->
</ul>
</div>
<div id="image-column" class="column">
<!-- Image content goes here -->
<img src="your-image.jpg" alt="Image">
</div>
<script>
// JavaScript to toggle the visibility of the audio column
function toggleAudioColumn() {
var audioColumn = document.getElementById('audio-column');
audioColumn.style.display = (audioColumn.style.display === 'none') ? 'block' : 'none';
}
</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 and Playlist Layout</title>
<style>
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.column {
flex: 1;
margin: 10px;
padding: 20px;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
#audio-column {
order: 1;
}
#animation-column {
order: 2;
}
#playlist-columns {
display: flex;
flex-wrap: wrap;
order: 3;
}
.playlist-column {
flex: 1 0 48%;
margin: 10px;
}
/* Add your specific styling for audio player, animation, and playlist items */
audio {
width: 100%;
outline: none;
}
img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="audio-column" class="column">
<h2>Audio Player</h2>
<audio controls>
<source src="your-audio-file.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<div id="animation-column" class="column">
<h2>Animation</h2>
<img src="your-animation-image.gif" alt="Animation">
</div>
<div id="playlist-columns" class="column">
<div class="playlist-column">
<h2>Playlist 1</h2>
<ul>
<li>Song 1</li>
<li>Song 2</li>
<li>Song 3</li>
</ul>
</div>
<div class="playlist-column">
<h2>Playlist 2</h2>
<ul>
<li>Song 4</li>
<li>Song 5</li>
<li>Song 6</li>
</ul>
</div>
<!-- Add more playlist columns as needed -->
</div>
</body>
</html>
<!DOCTYPE html>
<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;
text-align: center;
margin: 50px;
}
audio {
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>My Audio Player</h1>
<ul id="playlist">
<li data-src="audio/song1.mp3">Song 1</li>
<li data-src="audio/song2.mp3">Song 2</li>
<!-- Add more songs as needed -->
</ul>
<audio controls id="audioPlayer">
Your browser does not support the audio element.
</audio>
<script>
const playlist = document.getElementById('playlist');
const audioPlayer = document.getElementById('audioPlayer');
playlist.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
const songPath = e.target.getAttribute('data-src');
audioPlayer.src = songPath;
audioPlayer.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 with Background Image Slider</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
#audio-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.7); /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
width: 300px;
}
#audio {
width: 100%;
margin-bottom: 20px;
}
#playlist {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
}
#background-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: opacity 1s ease-in-out;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
z-index: 1;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-container">
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<select id="playlist" onchange="playSelectedSong()">
<option value="" selected disabled>Select a Song</option>
<option value="song1.mp3">Song 1</option>
<option value="song2.mp3">Song 2</option>
<!-- Add more songs as needed -->
</select>
</div>
<img id="background-image" src="" alt="Background Image">
<script>
var audio = document.getElementById('audio');
var playlist = document.getElementById('playlist');
var backgroundImage = document.getElementById('background-image');
var backgroundImages = ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz4fmm8sVt2nK41DuOIEWXfOmy1AWwfUM8iYCJu-X_19pgRSXF2t0qPXAQwGBOrQdI96cG-nys-TmjT3HRV6PNKsOelkeyNXlA8dU0pHwoMiTS7FaPiFD1X2r3gXsxlE1_tOsBPGuEltnE0VO423Qw892V0u759Fo9OrBJg1KCKySRxOm781iMQIVCR9A/s720/08530a79d003b7a29739eeefd905c614.jpg', 'image2.jpg', 'image3.jpg']; // Add more image URLs as needed
var currentImageIndex = 0;
function playSelectedSong() {
var selectedSong = playlist.value;
if (selectedSong) {
audio.src = selectedSong;
audio.play();
}
}
function changeBackgroundImage() {
currentImageIndex = (currentImageIndex + 1) % backgroundImages.length;
backgroundImage.src = backgroundImages[currentImageIndex];
setTimeout(changeBackgroundImage, 5000); // Change image every 5 seconds
}
changeBackgroundImage();
</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>Custom Audio Player with Dropdown Playlist</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#audio-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
}
#audio {
width: 100%;
margin-bottom: 20px;
}
#playlist-dropdown {
width: 100%;
padding: 10px;
font-size: 16px;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-container">
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<select id="playlist-dropdown" onchange="playSelectedSong()">
<option value="" selected disabled>Select a Song</option>
<option value="song1.mp3">Song 1</option>
<option value="song2.mp3">Song 2</option>
<!-- Add more songs as needed -->
</select>
</div>
<script>
var audio = document.getElementById('audio');
var playlistDropdown = document.getElementById('playlist-dropdown');
function playSelectedSong() {
var selectedSong = playlistDropdown.value;
if (selectedSong) {
audio.src = selectedSong;
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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#audio-container {
width: 400px;
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
}
#audio-column {
padding: 0 10px;
}
#audio-column audio, #audio-title {
width: 100%;
margin-bottom: 10px;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
}
#playlist-dropdown {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #34495e; /* Darker background color */
color: #fff;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-container">
<div id="audio-column">
<div>
<label for="playlist-dropdown">Select a song:</label>
<select id="playlist-dropdown" onchange="playSelectedSong()">
<option value="0">Song 1</option>
<option value="1">Song 2</option>
<!-- Add more songs as needed -->
</select>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<div id="audio-title">Now Playing: </div>
</div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "https://drive.google.com/uc?export=download&id=1pLANmeHChkdtX5IZleaO3hpTRAa-A2gp" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
var playlistDropdown = document.getElementById('playlist-dropdown');
function playSelectedSong() {
var selectedSongIndex = playlistDropdown.value;
audio.src = songs[selectedSongIndex].src;
audio.play();
updateAudioTitle(selectedSongIndex);
}
function updateAudioTitle(index) {
audioTitle.textContent = 'Now Playing: ' + songs[index].title;
}
</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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#audio-container {
display: flex;
justify-content: space-around;
width: 800px;
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
}
#audio-column, #photo-column, #playlist-column {
width: 30%;
padding: 0 10px;
}
#audio-column audio, #audio-title {
width: 100%;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
}
#playlist-column ul {
list-style: none;
padding: 0;
text-align: left;
}
#playlist-column li {
margin-bottom: 10px;
display: flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
#playlist-column li:hover {
background-color: #34495e; /* Darker background color on hover */
}
#playlist-column img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
#photo-column img {
width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-container">
<div id="audio-column">
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<div id="audio-title">Now Playing: </div>
</div>
<div id="photo-column">
<img id="current-photo" src="image1.jpg" alt="Current Photo">
</div>
<div id="playlist-column">
<ul id="song-list">
<li onclick="playSong(0)">
<img src="image1.jpg" alt="Song 1">
<span>Song 1</span>
</li>
<li onclick="playSong(1)">
<img src="image2.jpg" alt="Song 2">
<span>Song 2</span>
</li>
<!-- Add more songs as needed -->
</ul>
</div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3", photo: "image1.jpg" },
{ title: "Song 2", src: "song2.mp3", photo: "image2.jpg" }
// Add more songs as needed
];
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
var songList = document.getElementById('song-list');
var currentPhoto = document.getElementById('current-photo');
var currentSongIndex = null;
function playSong(index) {
currentSongIndex = index;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
updateCurrentPhoto();
highlightCurrentSong();
}
function updateAudioTitle() {
audioTitle.textContent = 'Now Playing: ' + songs[currentSongIndex].title;
}
function updateCurrentPhoto() {
currentPhoto.src = songs[currentSongIndex].photo;
}
function highlightCurrentSong() {
var songItems = document.querySelectorAll('#song-list li');
songItems.forEach(function (item, index) {
if (index === currentSongIndex) {
item.style.backgroundColor = '#34495e';
} else {
item.style.backgroundColor = 'transparent';
}
});
}
</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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#audio-container {
display: flex;
justify-content: space-between;
width: 600px;
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
}
#audio-column {
width: 60%;
padding: 0 20px;
}
#playlist-column {
width: 40%;
text-align: left;
}
#song-list {
list-style: none;
padding: 0;
}
#song-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
#song-list li:hover {
background-color: #34495e; /* Darker background color on hover */
}
#audio, #audio-title {
width: 100%;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
}
#current-song {
background-color: #34495e; /* Darker background color for the current song */
padding: 5px;
border-radius: 5px;
}
#playlist-column img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-container">
<div id="audio-column">
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<div id="audio-title">Now Playing: </div>
</div>
<div id="playlist-column">
<ul id="song-list">
<li onclick="playSong(0)">
<img src="image1.jpg" alt="Song 1">
<span>Song 1</span>
</li>
<li onclick="playSong(1)">
<img src="image2.jpg" alt="Song 2">
<span>Song 2</span>
</li>
<!-- Add more songs as needed -->
</ul>
</div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
var songList = document.getElementById('song-list');
var currentSongIndex = null;
function playSong(index) {
currentSongIndex = index;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
highlightCurrentSong();
}
function updateAudioTitle() {
audioTitle.textContent = 'Now Playing: ' + songs[currentSongIndex].title;
}
function highlightCurrentSong() {
var songItems = document.querySelectorAll('#song-list li');
songItems.forEach(function (item, index) {
if (index === currentSongIndex) {
item.style.backgroundColor = '#34495e';
} else {
item.style.backgroundColor = 'transparent';
}
});
}
</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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#audio-player {
display: flex;
width: 600px;
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
overflow: hidden;
}
#audio-column {
flex: 1;
text-align: left;
padding-right: 20px;
}
#playlist-column {
flex: 1;
text-align: left;
}
#song-list {
list-style: none;
padding: 0;
}
#song-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
#song-list img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
#audio-controls {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
audio {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="audio-player">
<div id="audio-column">
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
<div id="playlist-column">
<ul id="song-list">
<li>
<img src="song1.jpg" alt="Song 1">
<span>Song 1</span>
</li>
<li>
<img src="song2.jpg" alt="Song 2">
<span>Song 2</span>
</li>
<!-- Add more songs as needed -->
</ul>
</div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var songList = document.getElementById('song-list');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
}
function updateSongList() {
songList.innerHTML = '';
songs.forEach(function(song, index) {
var listItem = document.createElement('li');
listItem.innerHTML = '<img src="song' + (index + 1) + '.jpg" alt="' + song.title + '"><span>' + song.title + '</span>';
songList.appendChild(listItem);
});
}
audio.addEventListener('ended', function() {
nextSong();
});
updateSongList();
</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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
#audio-container {
display: flex;
}
#audio-player {
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
width: 300px;
margin-right: 20px;
}
#playlist-container {
background-color: #2c3e50;
padding: 20px;
border-radius: 10px;
width: 300px;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
margin-top: 20px;
}
#song-list li {
margin-bottom: 10px;
cursor: pointer;
}
#audio, #audio-title {
width: 100%;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
}
#image-container {
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
#image-list {
display: flex;
transition: transform 0.5s ease-in-out;
}
.image-item {
width: 150px;
height: 150px;
margin-right: 10px;
border-radius: 50%;
overflow: hidden;
}
.image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-container">
<div id="audio-player">
<div id="image-container">
<div id="image-list">
<div class="image-item"><img src="image1.jpg" alt="Image 1"></div>
<!-- Add more images as needed -->
</div>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<div id="audio-title">Now Playing: </div>
</div>
<div id="playlist-container">
<ul id="song-list">
<li>Song 1</li>
<li>Song 2</li>
<!-- Add more songs as needed -->
</ul>
</div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var images = ["image1.jpg"];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
var imageList = document.getElementById('image-list');
var songList = document.getElementById('song-list');
function playSong(index) {
currentSongIndex = index;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
}
function updateAudioTitle() {
audioTitle.textContent = 'Now Playing: ' + songs[currentSongIndex].title;
}
function updateImageList() {
imageList.style.transform = 'translateX(-' + currentSongIndex * 160 + 'px)';
}
function createImageItems() {
var html = '';
images.forEach(function (image) {
html += '<div class="image-item"><img src="' + image + '" alt="Image"></div>';
});
imageList.innerHTML = html;
}
function createSongList() {
var html = '';
songs.forEach(function (song, index) {
html += '<li onclick="playSong(' + index + ')">' + song.title + '</li>';
});
songList.innerHTML = html;
}
createImageItems();
createSongList();
</script>
</body>
</html>
<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;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#audio-container {
display: flex;
justify-content: space-around;
width: 600px;
}
#audio-info {
text-align: left;
}
#audio-player {
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
width: 300px;
overflow: hidden;
}
#audio-controls {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
#audio, #audio-title {
width: 100%;
}
#playlist-container {
background-color: #2c3e50; /* Dark background color for the playlist */
padding: 20px;
border-radius: 10px;
width: 300px;
overflow: hidden;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
}
#song-list li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="audio-container">
<div id="audio-player">
<div id="audio-info">
<div id="image-container">
<img alt="Current Song Image" id="current-image" src="default-image.jpg" style="width: 100%;" />
</div>
<div id="audio-title">Now Playing: </div>
</div>
<div id="audio-controls">
<button onclick="previewSong()">Preview</button>
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
<audio controls="" id="audio">
<source src="" type="audio/mp3"></source>
Your browser does not support the audio tag.
</audio>
</div>
<div id="playlist-container">
<ul id="song-list">
<li>Song 1</li>
<li>Song 2</li>
<li>Song 1</li>
<li>Song 2</li
<!-- Add more songs as needed -->
</ul>
</div>
</div>
<script>
var songs = [
{ title: "chakke me chakka ", src: "https://drive.google.com/uc?export=download&id=1fVew46o9lw1QCWhoatTxf670tMMM0UTf", image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge-lks-kaTHu1t0o0skcMRlpqPzJFFNzpqduckcrAOwnYHcme7c6TT45jKp6ZCe3vzMzHMerXY7IU2rdne2L6qvrRbTHV-6SL0WLrIU14k8kWxGPqmsNENLBKMlF4gOF1jnZtVRgyBgekuSNEhtHsFYB8t9fXao87kEmT_I7-UpL-A6K_XpQCqdFqgUR4/s246/images%20(1).jpg" },
{ title: "tarif kya karu ", src: "https://drive.google.com/uc?export=download&id=1Z_GLOVPT80NfH6wMKOD5dQ67tSJRrJm1", image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsuEprLM-rb6LpIxeuAbBLKpf5yti3Ofb10RxuICg3Uru2IG90P5U-96yNTj96cIsQrx0nlLMeuqtyUaDNIlY3e2vxbXFHiUkgl-MSe47nfKZduoJc6uvcv7ngNc4BLw8kLGcvJEIjWAdIHn7eGwCoj2HZ4tqWZbfe-fYNS-p8qNKMwV8JTZEaDRDXog/s246/Screenshot_4.jpg" },
{ title: "mohabbat ke khuda ", src: "https://drive.google.com/uc?export=download&id=1bKRkZlvwt95zPX1HZuPoiGf7GA-YXOrN", image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsuEprLM-rb6LpIxeuAbBLKpf5yti3Ofb10RxuICg3Uru2IG90P5U-96yNTj96cIsQrx0nlLMeuqtyUaDNIlY3e2vxbXFHiUkgl-MSe47nfKZduoJc6uvcv7ngNc4BLw8kLGcvJEIjWAdIHn7eGwCoj2HZ4tqWZbfe-fYNS-p8qNKMwV8JTZEaDRDXog/s246/Screenshot_4.jpg" },
{ title: "dil ke jharokho me tumko ", src: "https://drive.google.com/uc?export=download&id=1flPxBOnzJynH_pO31KwHsiRky8ZUQkoC", image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsuEprLM-rb6LpIxeuAbBLKpf5yti3Ofb10RxuICg3Uru2IG90P5U-96yNTj96cIsQrx0nlLMeuqtyUaDNIlY3e2vxbXFHiUkgl-MSe47nfKZduoJc6uvcv7ngNc4BLw8kLGcvJEIjWAdIHn7eGwCoj2HZ4tqWZbfe-fYNS-p8qNKMwV8JTZEaDRDXog/s246/Screenshot_4.jpg" },
{ title: "aaj kal tere mere pyar ke charche ", src: "https://drive.google.com/uc?export=download&id=1pLANmeHChkdtX5IZleaO3hpTRAa-A2gp", image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxihq1uZSkcetMPIrFv_KDLDMqZji6UphzJDSNUHLt_KrKo1qxKsmdh6-Kn4uZ1dbbPM611BqV8Q41LkrkX9_WKXNGBbK8eVCYH6Qzh-_i0q_FnO9c4MRKDtyt9AqGmzTVxPxZf2k-hjMeCf0N2iNJYEvQUTD8CAOg9GJ9pONXPkwXqR4uN7eWB4Z8V_c/s279/Screenshot_3.jpg" },
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
var currentImage = document.getElementById('current-image');
var songList = document.getElementById('song-list');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioInfo();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
updateAudioInfo();
audio.src = songs[currentSongIndex].src;
audio.play();
}
function previewSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
updateAudioInfo();
audio.src = songs[currentSongIndex].src;
audio.play();
}
function updateAudioInfo() {
audioTitle.textContent = 'Now Playing: ' + songs[currentSongIndex].title;
currentImage.src = songs[currentSongIndex].image;
}
function updateSongList() {
songList.innerHTML = '';
songs.forEach(function(song, index) {
var listItem = document.createElement('li');
listItem.textContent = song.title;
listItem.addEventListener('click', function() {
currentSongIndex = index;
updateAudioInfo();
audio.src = song.src;
audio.play();
});
songList.appendChild(listItem);
});
}
updateAudioInfo();
updateSongList();
</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>Radio-Style Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#audio-player {
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
width: 300px;
}
#playlist {
list-style: none;
padding: 0;
text-align: left;
margin-bottom: 20px;
}
#playlist li {
margin-bottom: 10px;
}
#audio-controls {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
}
#audio, #audio-title {
width: 100%;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="audio-player">
<ul id="playlist">
<li>Song 1</li>
<li>Song 2</li>
<!-- Add more songs as needed -->
</ul>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<div id="audio-title">Now Playing: </div>
<div id="audio-controls">
<button onclick="previousSong()">Previous</button>
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
}
function previousSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
}
function updateAudioTitle() {
audioTitle.textContent = 'Now Playing: ' + songs[currentSongIndex].title;
}
// Create playlist buttons dynamically
var playlist = document.getElementById('playlist');
songs.forEach(function(song, index) {
var listItem = document.createElement('li');
listItem.textContent = song.title;
listItem.addEventListener('click', function() {
currentSongIndex = index;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
});
playlist.appendChild(listItem);
});
</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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#audio-player {
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
width: 300px;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
}
#song-list li {
margin-bottom: 10px;
}
#audio-controls {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
#audio, #audio-title {
width: 100%;
}
#background-text {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
color: #fff;
}
</style>
</head>
<body>
<div id="background-text">Your Name</div>
<div id="audio-player">
<ul id="song-list">
<li>Song 1</li>
<li>Song 2</li>
<!-- Add more songs as needed -->
</ul>
<div id="audio-controls">
<button onclick="previewSong()">Preview</button>
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<div id="audio-title">Now Playing: </div>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var audioTitle = document.getElementById('audio-title');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
}
function previewSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
updateAudioTitle();
}
function updateAudioTitle() {
audioTitle.textContent = 'Now Playing: ' + songs[currentSongIndex].title;
}
</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</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
}
#audio-player {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
max-height: 200px;
overflow-y: auto;
margin-bottom: 20px;
}
#song-list li {
margin-bottom: 10px;
}
#audio-controls {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
}
audio {
width: 100%;
margin-top: 10px;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
opacity: 0.3;
animation: backgroundAnimation 20s infinite linear;
}
@keyframes backgroundAnimation {
from {
filter: brightness(100%);
}
to {
filter: brightness(150%);
}
}
</style>
</head>
<body>
<div id="background"></div>
<div id="audio-player">
<ul id="song-list">
<li>Song 1</li>
<li>Song 2</li>
<!-- Add more songs as needed -->
</ul>
<div id="audio-controls">
<button onclick="prevSong()">Prev</button>
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
<script>
var songs = [
{ title: "Song 1", src: "https://drive.google.com/uc?export=download&id=1J60EuYglDV0hxqjR0dQY5LJlm7gOxLl_" },
{ title: "Song 2", src: "https://drive.google.com/uc?export=download&id=1J60EuYglDV0hxqjR0dQY5LJlm7gOxLl_" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var songList = document.getElementById('song-list');
var background = document.getElementById('background');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
}
function prevSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
}
function updateSongList() {
songList.innerHTML = '';
songs.forEach(function(song) {
var listItem = document.createElement('li');
listItem.textContent = song.title;
songList.appendChild(listItem);
});
}
audio.addEventListener('ended', function() {
nextSong();
});
updateSongList();
</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;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #3498db, #e74c3c, #3498db, #e74c3c);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
text-align: center;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#audio-player {
width: 400px;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
}
#song-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
cursor: pointer;
}
#song-list img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
#audio-controls {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
audio {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="audio-player">
<ul id="song-list">
<li data-src="song1.mp3">
<img src="song1.jpg" alt="Song 1">
<span>Song 1</span>
</li>
<li data-src="song2.mp3">
<img src="song2.jpg" alt="Song 2">
<span>Song 2</span>
</li>
<!-- Add more songs as needed -->
</ul>
<div id="audio-controls">
<button onclick="previousSong()">Previous</button>
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3", image: "song1.jpg" },
{ title: "Song 2", src: "song2.mp3", image: "song2.jpg" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var songList = document.getElementById('song-list');
var audioTitle = document.getElementById('audio-title');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong();
}
function previousSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
loadSong();
}
function loadSong() {
audio.src = songs[currentSongIndex].src;
audio.play();
updateSongList();
}
function updateSongList() {
songList.innerHTML = '';
songs.forEach(function(song, index) {
var listItem = document.createElement('li');
listItem.innerHTML = '<img src="' + song.image + '" alt="' + song.title + '"><span>' + song.title + '</span>';
listItem.setAttribute('data-src', song.src);
listItem.addEventListener('click', function() {
currentSongIndex = index;
loadSong();
});
songList.appendChild(listItem);
});
}
audio.addEventListener('ended', function() {
nextSong();
});
updateSongList();
</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</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url('background.jpg'); /* Background image URL */
transition: background-image 0.5s ease; /* Background image transition */
}
#audio-player {
width: 400px;
background-color: rgba(255, 255, 255, 0.7); /* White background with transparency */
padding: 20px;
border-radius: 10px;
text-align: center;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
margin-bottom: 20px;
}
#song-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
cursor: pointer;
}
#song-list img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
#audio-controls {
display: flex;
justify-content: center;
align-items: center;
}
audio {
width: 100%;
margin-top: 10px;
}
button {
padding: 10px;
margin: 0 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="audio-player">
<ul id="song-list">
<li onclick="changeSong(0)">
<img src="song1.jpg" alt="Song 1">
<span>Song 1</span>
</li>
<li onclick="changeSong(1)">
<img src="song2.jpg" alt="Song 2">
<span>Song 2</span>
</li>
<!-- Add more songs as needed -->
</ul>
<div id="audio-controls">
<button onclick="prevSong()">Prev</button>
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3", img: "song1.jpg" },
{ title: "Song 2", src: "song2.mp3", img: "song2.jpg" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var songList = document.getElementById('song-list');
function changeSong(index) {
currentSongIndex = index;
updateBackgroundImage(songs[index].img);
playSong();
}
function playPause() {
if (audio.paused) {
playSong();
} else {
audio.pause();
}
}
function playSong() {
audio.src = songs[currentSongIndex].src;
audio.play();
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
updateBackgroundImage(songs[currentSongIndex].img);
playSong();
}
function prevSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
updateBackgroundImage(songs[currentSongIndex].img);
playSong();
}
function updateBackgroundImage(imageUrl) {
document.body.style.backgroundImage = 'url(' + imageUrl + ')';
}
audio.addEventListener('ended', function() {
nextSong();
});
function updateSongList() {
songList.innerHTML = '';
songs.forEach(function(song, index) {
var listItem = document.createElement('li');
listItem.innerHTML = '<img src="' + song.img + '" alt="' + song.title + '"><span>' + song.title + '</span>';
listItem.onclick = function() {
changeSong(index);
};
songList.appendChild(listItem);
});
}
updateSongList();
</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; /* Blue background color */
color: #fff;
text-align: center;
}
#audio-player {
margin: 50px auto;
width: 400px;
background-color: #2c3e50; /* Dark background color for the player */
padding: 20px;
border-radius: 10px;
}
#song-list {
list-style: none;
padding: 0;
text-align: left;
}
#song-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
#song-list img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
#audio-controls {
margin-top: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
audio {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="audio-player">
<ul id="song-list">
<li>
<img src="song1.jpg" alt="Song 1">
<span>Song 1</span>
</li>
<li>
<img src="song2.jpg" alt="Song 2">
<span>Song 2</span>
</li>
<!-- Add more songs as needed -->
</ul>
<div id="audio-controls">
<button onclick="playPause()">Play/Pause</button>
<button onclick="nextSong()">Next</button>
</div>
<audio id="audio" controls>
<source src="" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
<script>
var songs = [
{ title: "Song 1", src: "song1.mp3" },
{ title: "Song 2", src: "song2.mp3" }
// Add more songs as needed
];
var currentSongIndex = 0;
var audio = document.getElementById('audio');
var songList = document.getElementById('song-list');
var audioTitle = document.getElementById('audio-title');
function playPause() {
if (audio.paused) {
audio.src = songs[currentSongIndex].src;
audio.play();
} else {
audio.pause();
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
audio.src = songs[currentSongIndex].src;
audio.play();
}
function updateSongList() {
songList.innerHTML = '';
songs.forEach(function(song, index) {
var listItem = document.createElement('li');
listItem.innerHTML = '<img src="song' + (index + 1) + '.jpg" alt="' + song.title + '"><span>' + song.title + '</span>';
songList.appendChild(listItem);
});
}
audio.addEventListener('ended', function() {
nextSong();
});
updateSongList();
</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;
}
#audio-player-container {
width: 300px;
margin: 50px auto;
padding: 20px;
background-color: #2980b9;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#audio-image {
width: 100%;
border-radius: 5px;
margin-bottom: 10px;
}
#audio-title {
font-size: 18px;
margin-bottom: 10px;
}
#audio-controls {
display: flex;
justify-content: space-between;
align-items: center;
}
audio {
width: 100%;
margin-top: 10px;
}
#playlist-container {
width: 300px;
margin: 20px auto;
background-color: #2980b9;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#playlist {
list-style: none;
padding: 0;
margin: 0;
}
#playlist li {
cursor: pointer;
padding: 8px;
border-radius: 5px;
margin-bottom: 5px;
background-color: #3498db;
}
</style>
</head>
<body>
<div id="audio-player-container">
<img id="audio-image" src="song1.jpg" alt="Song Image">
<div id="audio-title">Song Title</div>
<div id="audio-controls">
<button onclick="previousSong()">Previous</button>
<button id="playPauseButton" onclick="togglePlayPause()">Play</button>
<button onclick="nextSong()">Next</button>
</div>
<audio id="audio" controls>
<source src="song1.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<div id="playlist-container">
<ul id="playlist">
<li onclick="playSong('song1.mp3', 'Song Title 1', 'song1.jpg')">Song 1</li>
<li onclick="playSong('song2.mp3', 'Song Title 2', 'song2.jpg')">Song 2</li>
<!-- Add more songs as needed -->
</ul>
</div>
<script>
var currentSongIndex = 0;
var playlist = [
{ title: 'Song Title 1', source: 'song1.mp3', image: 'song1.jpg' },
{ title: 'Song Title 2', source: 'song2.mp3', image: 'song2.jpg' }
// Add more songs as needed
];
var audio = document.getElementById('audio');
var audioImage = document.getElementById('audio-image');
var audioTitle = document.getElementById('audio-title');
var playPauseButton = document.getElementById('playPauseButton');
function playSong(source, title, image) {
audio.src = source;
audioTitle.innerText = title;
audioImage.src = image;
playPauseButton.innerText = 'Pause';
audio.play();
}
function togglePlayPause() {
if (audio.paused) {
audio.play();
playPauseButton.innerText = 'Pause';
} else {
audio.pause();
playPauseButton.innerText = 'Play';
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % playlist.length;
var nextSong = playlist[currentSongIndex];
playSong(nextSong.source, nextSong.title, nextSong.image);
}
function previousSong() {
currentSongIndex = (currentSongIndex - 1 + playlist.length) % playlist.length;
var previousSong = playlist[currentSongIndex];
playSong(previousSong.source, previousSong.title, previousSong.image);
}
</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>Custom Audio Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #3498db; /* Blue background color */
color: #fff;
text-align: center;
}
#audio-player {
width: 300px;
margin: 50px auto;
background-color: #2980b9; /* Darker blue background color */
padding: 20px;
border-radius: 10px;
}
#audio-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
}
#audio-title {
font-size: 18px;
margin-bottom: 10px;
}
#audio-list {
list-style: none;
padding: 0;
text-align: left;
}
#audio-list li {
margin-bottom: 10px;
cursor: pointer;
}
#audio-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
#play-btn, #next-btn {
background-color: #2ecc71; /* Green play and next button color */
color: #fff;
border: none;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
border-radius: 5px;
}
#play-btn:hover, #next-btn:hover {
background-color: #27ae60; /* Darker green color on hover */
}
#audio-player audio {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="audio-player">
<img id="audio-img" src="song1.jpg" alt="Song Image">
<p id="audio-title">Song Title 1</p>
<ul id="audio-list">
<li onclick="changeAudio('song1.mp3', 'Song Title 1', 'song1.jpg')">Song 1</li>
<li onclick="changeAudio('song2.mp3', 'Song Title 2', 'song2.jpg')">Song 2</li>
<li onclick="changeAudio('song3.mp3', 'Song Title 3', 'song3.jpg')">Song 3</li>
</ul>
<div id="audio-controls">
<button id="play-btn" onclick="toggleAudio()">Play</button>
<button id="next-btn" onclick="nextAudio()">Next</button>
</div>
<audio id="audio" controls>
Your browser does not support the audio element.
</audio>
</div>
<script>
var audio = document.getElementById('audio');
var audioImg = document.getElementById('audio-img');
var audioTitle = document.getElementById('audio-title');
var playlist = [
{ title: 'Song Title 1', src: 'song1.mp3', img: 'song1.jpg' },
{ title: 'Song Title 2', src: 'song2.mp3', img: 'song2.jpg' },
{ title: 'Song Title 3', src: 'song3.mp3', img: 'song3.jpg' }
];
var currentSongIndex = 0;
function changeAudio(src, title, img) {
audio.src = src;
audioTitle.innerText = title;
audioImg.src = img;
currentSongIndex = playlist.findIndex(item => item.src === src);
}
function toggleAudio() {
if (audio.paused) {
audio.play();
document.getElementById('play-btn').innerText = 'Pause';
} else {
audio.pause();
document.getElementById('play-btn').innerText = 'Play';
}
}
function nextAudio() {
currentSongIndex = (currentSongIndex + 1) % playlist.length;
var nextSong = playlist[currentSongIndex];
changeAudio(nextSong.src, nextSong.title, nextSong.img);
audio.play();
document.getElementById('play-btn').innerText = 'Pause';
}
</script>
</body>
</html>
About malay pramanik
कोई टिप्पणी नहीं