Scribd
Upload
10 views13 pages

Mplayer

Uploaded by

somehowbooyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views13 pages

Mplayer

Uploaded by

somehowbooyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 13

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Music Player</title>
<style>
:root {
--bg-color: #1a1a2e;
--text-color: #e6e6e6;
--primary-color: #00f0ff;
--secondary-color: #ff00ff;
--accent-color: #ff6b6b;
--card-bg: #16213e;
--shadow-color: rgba(0, 240, 255, 0.3);
}

.light-mode {
--bg-color: #f0f0f0;
--text-color: #333333;
--primary-color: #0077ff;
--secondary-color: #ff5500;
--accent-color: #ff3366;
--card-bg: #ffffff;
--shadow-color: rgba(0, 119, 255, 0.2);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 800px;
margin: 0 auto;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid var(--primary-color);
}

h1 {
font-size: 2.5rem;
text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--shadow-
color);
color: var(--primary-color);
}

.mode-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--secondary-color);
text-shadow: 0 0 5px var(--secondary-color);
}

.mode-toggle:hover {
transform: scale(1.1);
}

.player-container {
background-color: var(--card-bg);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 15px var(--shadow-color);
border-left: 4px solid var(--primary-color);
}

.now-playing {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 20px;
}

.album-art {
width: 120px;
height: 120px;
border-radius: 10px;
object-fit: cover;
border: 2px solid var(--primary-color);
box-shadow: 0 0 10px var(--shadow-color);
flex-shrink: 0;
}

.song-info {
flex: 1;
}

.song-title {
font-size: 1.5rem;
margin-bottom: 5px;
color: var(--primary-color);
text-shadow: 0 0 5px var(--shadow-color);
}

.song-artist {
font-size: 1.1rem;
margin-bottom: 10px;
color: var(--text-color);
opacity: 0.8;
}

.progress-container {
width: 100%;
height: 6px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 3px;
margin-bottom: 5px;
cursor: pointer;
}

.progress-bar {
height: 100%;
background-color: var(--primary-color);
border-radius: 3px;
width: 0%;
box-shadow: 0 0 5px var(--primary-color);
}

.time-info {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-color);
opacity: 0.7;
margin-bottom: 20px;
}

.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}

.control-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.8rem;
color: var(--text-color);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.control-btn:hover {
transform: scale(1.1);
color: var(--primary-color);
text-shadow: 0 0 10px var(--shadow-color);
}

.play-btn {
background-color: var(--primary-color);
color: var(--bg-color);
font-size: 2rem;
box-shadow: 0 0 15px var(--shadow-color);
}

.play-btn:hover {
background-color: var(--secondary-color);
color: var(--bg-color);
box-shadow: 0 0 20px var(--secondary-color);
}

.volume-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}

.volume-slider {
flex: 1;
-webkit-appearance: none;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
box-shadow: 0 0 5px var(--shadow-color);
}

.playlist-container {
background-color: var(--card-bg);
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 15px var(--shadow-color);
border-left: 4px solid var(--secondary-color);
}

.playlist-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.playlist-title {
font-size: 1.5rem;
color: var(--secondary-color);
text-shadow: 0 0 5px var(--secondary-color);
}

.add-song-btn {
background-color: var(--secondary-color);
color: #fff;
border: none;
border-radius: 5px;
padding: 8px 15px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 0 10px var(--secondary-color);
transition: all 0.3s;
}

.add-song-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 15px var(--secondary-color);
}

.playlist {
list-style: none;
max-height: 300px;
overflow-y: auto;
}

.playlist::-webkit-scrollbar {
width: 8px;
}

.playlist::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}

.playlist::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}

.song-item {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
margin-bottom: 5px;
cursor: pointer;
transition: all 0.2s;
}

.song-item:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}

.song-item.active {
background-color: rgba(0, 240, 255, 0.2);
border-left: 3px solid var(--primary-color);
}

.song-item-number {
width: 30px;
text-align: center;
opacity: 0.7;
}
.song-item-info {
flex: 1;
}

.song-item-title {
font-weight: bold;
margin-bottom: 3px;
}

.song-item-artist {
font-size: 0.9rem;
opacity: 0.7;
}

.song-item-duration {
padding: 0 10px;
opacity: 0.7;
}

.song-item-delete {
color: var(--accent-color);
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
opacity: 0.7;
transition: all 0.2s;
}

.song-item-delete:hover {
opacity: 1;
transform: scale(1.2);
}

.empty-state {
text-align: center;
padding: 30px;
color: #888;
font-size: 1.2rem;
}

.file-input {
display: none;
}

@media (max-width: 600px) {


.now-playing {
flex-direction: column;
text-align: center;
}

.controls {
gap: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Neon Music Player</h1>
<button class="mode-toggle" id="mode-toggle">🌓</button>
</header>

<div class="player-container">
<div class="now-playing">
<img src="https://via.placeholder.com/120" alt="Album Art"
class="album-art" id="album-art">
<div class="song-info">
<div class="song-title" id="song-title">No song selected</div>
<div class="song-artist" id="song-artist">Artist</div>
<div class="progress-container" id="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="time-info">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
</div>

<div class="controls">
<button class="control-btn" id="prev-btn">⏮</button>
<button class="control-btn play-btn" id="play-btn">▶</button>
<button class="control-btn" id="next-btn">⏭</button>
</div>

<div class="volume-container">
<span>🔈</span>
<input type="range" class="volume-slider" id="volume-slider"
min="0" max="1" step="0.01" value="0.7">
<span>🔊</span>
</div>
</div>

<div class="playlist-container">
<div class="playlist-header">
<h2 class="playlist-title">Playlist</h2>
<button class="add-song-btn" id="add-song-btn">Add Song</button>
<input type="file" class="file-input" id="file-input"
accept="audio/*" multiple>
</div>

<ul class="playlist" id="playlist">


<!-- Songs will be added here dynamically -->
</ul>

<div class="empty-state" id="empty-state">


Your playlist is empty. Add some songs!
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const modeToggle = document.getElementById('mode-toggle');
const albumArt = document.getElementById('album-art');
const songTitle = document.getElementById('song-title');
const songArtist = document.getElementById('song-artist');
const progressContainer = document.getElementById('progress-
container');
const progressBar = document.getElementById('progress-bar');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const playBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const volumeSlider = document.getElementById('volume-slider');
const addSongBtn = document.getElementById('add-song-btn');
const fileInput = document.getElementById('file-input');
const playlistEl = document.getElementById('playlist');
const emptyState = document.getElementById('empty-state');

// Audio context
const audio = new Audio();
let isPlaying = false;
let currentSongIndex = 0;
let songs = JSON.parse(localStorage.getItem('neonPlaylist')) || [];

// Initialize the app


function init() {
renderPlaylist();
updateEmptyState();

// Set initial mode based on localStorage or prefer-color-scheme


const savedMode = localStorage.getItem('themeMode');
if (savedMode === 'light' ||
(!savedMode && window.matchMedia('(prefers-color-scheme:
light)').matches)) {
document.body.classList.add('light-mode');
}

// Event listeners
playBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
progressContainer.addEventListener('click', setProgress);
volumeSlider.addEventListener('input', setVolume);
addSongBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileUpload);
modeToggle.addEventListener('click', toggleMode);

// Audio event listeners


audio.addEventListener('timeupdate', updateProgress);
audio.addEventListener('ended', nextSong);
audio.addEventListener('loadedmetadata', updateSongInfo);

// Set initial volume


audio.volume = volumeSlider.value;
}

// Toggle play/pause
function togglePlay() {
if (songs.length === 0) return;
if (isPlaying) {
pauseSong();
} else {
playSong();
}
}

// Play song
function playSong() {
if (songs.length === 0) return;

const song = songs[currentSongIndex];


audio.src = song.url;
audio.play();
isPlaying = true;
playBtn.textContent = '❚❚';
updateActiveSong();
}

// Pause song
function pauseSong() {
audio.pause();
isPlaying = false;
playBtn.textContent = '▶';
}

// Previous song
function prevSong() {
if (songs.length === 0) return;

currentSongIndex--;
if (currentSongIndex < 0) {
currentSongIndex = songs.length - 1;
}
playSong();
}

// Next song
function nextSong() {
if (songs.length === 0) return;

currentSongIndex++;
if (currentSongIndex >= songs.length) {
currentSongIndex = 0;
}
playSong();
}

// Update progress bar


function updateProgress() {
const { duration, currentTime } = audio;
const progressPercent = (currentTime / duration) * 100;
progressBar.style.width = `${progressPercent}%`;

// Update time display


currentTimeEl.textContent = formatTime(currentTime);
if (duration) {
durationEl.textContent = formatTime(duration);
}
}

// Set progress bar on click


function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}

// Set volume
function setVolume() {
audio.volume = this.value;
}

// Update song info when metadata loads


function updateSongInfo() {
const song = songs[currentSongIndex];
songTitle.textContent = song.title || 'Unknown Title';
songArtist.textContent = song.artist || 'Unknown Artist';
albumArt.src = song.artwork || 'https://via.placeholder.com/120';
}

// Format time (seconds to MM:SS)


function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}

// Handle file upload


function handleFileUpload(e) {
const files = e.target.files;
if (files.length === 0) return;

for (let i = 0; i < files.length; i++) {


const file = files[i];
const url = URL.createObjectURL(file);

// Extract metadata from filename (you could use more advanced


methods here)
const fileName = file.name.replace(/\.[^/.]+$/, ""); // Remove
extension
const artistTitle = fileName.split(' - ');

const song = {
id: Date.now() + i,
title: artistTitle.length > 1 ? artistTitle[1] : fileName,
artist: artistTitle.length > 1 ? artistTitle[0] : 'Unknown
Artist',
url: url,
artwork: 'https://via.placeholder.com/120',
duration: 0 // Will be updated when played
};

songs.push(song);
}

savePlaylist();
renderPlaylist();
updateEmptyState();

// Reset file input


fileInput.value = '';

// If this was the first song added, play it


if (songs.length === files.length) {
currentSongIndex = 0;
playSong();
}
}

// Delete song from playlist


function deleteSong(id, e) {
e.stopPropagation();

const index = songs.findIndex(song => song.id === id);


if (index === -1) return;

// If deleting the currently playing song, stop it


if (currentSongIndex === index) {
pauseSong();
audio.src = '';
songTitle.textContent = 'No song selected';
songArtist.textContent = 'Artist';
progressBar.style.width = '0%';
currentTimeEl.textContent = '0:00';
durationEl.textContent = '0:00';
}

// Adjust currentSongIndex if needed


if (index < currentSongIndex) {
currentSongIndex--;
} else if (index === currentSongIndex && currentSongIndex ===
songs.length - 1) {
currentSongIndex = 0;
}

// Remove the song


songs.splice(index, 1);
savePlaylist();
renderPlaylist();
updateEmptyState();
}

// Render playlist
function renderPlaylist() {
playlistEl.innerHTML = '';

songs.forEach((song, index) => {


const songEl = document.createElement('li');
songEl.className = `song-item ${index === currentSongIndex &&
isPlaying ? 'active' : ''}`;
songEl.dataset.id = song.id;
songEl.innerHTML = `
<div class="song-item-number">${index + 1}</div>
<div class="song-item-info">
<div class="song-item-title">${song.title || 'Unknown
Title'}</div>
<div class="song-item-artist">${song.artist || 'Unknown
Artist'}</div>
</div>
<div class="song-item-duration">${song.duration ?
formatTime(song.duration) : '0:00'}</div>
<button class="song-item-delete">✕</button>
`;

// Play song when clicked


songEl.addEventListener('click', () => {
currentSongIndex = index;
playSong();
});

// Delete button
const deleteBtn = songEl.querySelector('.song-item-delete');
deleteBtn.addEventListener('click', (e) => deleteSong(song.id,
e));

playlistEl.appendChild(songEl);
});
}

// Update active song in playlist


function updateActiveSong() {
const songItems = document.querySelectorAll('.song-item');
songItems.forEach((item, index) => {
if (index === currentSongIndex && isPlaying) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}

// Save playlist to localStorage


function savePlaylist() {
localStorage.setItem('neonPlaylist', JSON.stringify(songs));
}

// Update empty state visibility


function updateEmptyState() {
emptyState.style.display = songs.length === 0 ? 'block' : 'none';
}

// Toggle dark/light mode


function toggleMode() {
document.body.classList.toggle('light-mode');
const isLightMode = document.body.classList.contains('light-mode');
localStorage.setItem('themeMode', isLightMode ? 'light' : 'dark');
}

// Initialize the app


init();
});
//shortcut
document.addEventListener('keydown', function (e) {
if (e.key === 'Tab') {
e.preventDefault(); // stops the default tabbing behavior
window.location.href = 'Anime.html'; // change this to your desired
page
}
});

</script>
</body>
</html>

You might also like