| <?php |
| |
|
|
| |
| $host = "sql111.byetcluster.com"; |
| $db = "ssmm_32394582_music"; |
| $user = "ssmm_32394582"; |
| $pass = "13qrny65"; |
|
|
| |
| $conn = new mysqli($host, $user, $pass, $db); |
| if($conn->connect_error){ |
| die("Connection failed: " . $conn->connect_error); |
| } |
|
|
| |
| if (isset($_GET['action'])) { |
| $action = $_GET['action']; |
|
|
| if ($action === 'getPlaylist') { |
| header("Content-Type: application/json"); |
| $sql = "SELECT * FROM songs ORDER BY uploaded_at DESC"; |
| $result = $conn->query($sql); |
| $songs = array(); |
| while ($row = $result->fetch_assoc()) { |
| $songs[] = $row; |
| } |
| echo json_encode($songs); |
| $conn->close(); |
| exit; |
| } |
| |
| if ($action === 'uploadSong') { |
| header("Content-Type: application/json"); |
| |
| |
| if (isset($_FILES['song'])) { |
| $uploadDir = 'uploads/'; |
| if (!is_dir($uploadDir)) { |
| mkdir($uploadDir, 0777, true); |
| } |
| |
| $songName = basename($_FILES['song']['name']); |
| $targetSong = $uploadDir . $songName; |
| $songType = strtolower(pathinfo($targetSong, PATHINFO_EXTENSION)); |
| |
| |
| if ($songType !== "mp3") { |
| echo json_encode(array("error" => "Only MP3 files are allowed for the song.")); |
| exit; |
| } |
| |
| if (move_uploaded_file($_FILES['song']['tmp_name'], $targetSong)) { |
| $songURL = $targetSong; |
| } else { |
| echo json_encode(array("error" => "Error uploading the song file.")); |
| exit; |
| } |
| } else { |
| echo json_encode(array("error" => "No song file received.")); |
| exit; |
| } |
| |
| |
| $coverURL = ''; |
| if (isset($_FILES['cover']) && $_FILES['cover']['error'] == UPLOAD_ERR_OK) { |
| $coverName = basename($_FILES['cover']['name']); |
| $targetCover = $uploadDir . $coverName; |
| $coverType = strtolower(pathinfo($targetCover, PATHINFO_EXTENSION)); |
| |
| $allowed = array("jpg", "jpeg", "png", "gif"); |
| if (!in_array($coverType, $allowed)) { |
| echo json_encode(array("error" => "Cover image must be jpg, jpeg, png, or gif.")); |
| exit; |
| } |
| if (move_uploaded_file($_FILES['cover']['tmp_name'], $targetCover)) { |
| $coverURL = $targetCover; |
| } |
| } |
| |
| |
| $title = $conn->real_escape_string($_POST['title'] ?? $songName); |
| $artist = $conn->real_escape_string($_POST['artist'] ?? 'Uploaded Artist'); |
| $lyrics = $conn->real_escape_string($_POST['lyrics'] ?? ''); |
| |
| $stmt = $conn->prepare("INSERT INTO songs (title, file, cover, artist, lyrics) VALUES (?, ?, ?, ?, ?)"); |
| $stmt->bind_param("sssss", $title, $songURL, $coverURL, $artist, $lyrics); |
| |
| if ($stmt->execute()){ |
| echo json_encode(array( |
| "success" => "File uploaded successfully", |
| "song" => array( |
| "id" => $stmt->insert_id, |
| "title" => $title, |
| "file" => $songURL, |
| "cover" => $coverURL, |
| "artist" => $artist, |
| "lyrics" => $lyrics |
| ) |
| )); |
| } else { |
| echo json_encode(array("error" => "Database error: " . $conn->error)); |
| } |
| $stmt->close(); |
| $conn->close(); |
| exit; |
| } |
| } |
| ?> |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Music Player</title> |
| <!-- Tailwind CSS CDN --> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <!-- Material Icons --> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| <!-- External CSS file --> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen"> |
| <!-- Main container --> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| <!-- Playlist section --> |
| <div class="w-full lg:w-1/3 bg-gray-800 rounded-xl p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold">Playlist</h2> |
| <div class="flex gap-2"> |
| <button id="refreshBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition"> |
| <i class="material-icons">refresh</i> |
| <span>Refresh</span> |
| </button> |
| <button id="uploadBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition"> |
| <i class="material-icons">upload</i> |
| <span>Upload</span> |
| </button> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <input type="text" id="searchInput" placeholder="Search songs..." class="w-full bg-gray-700 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div id="playlist" class="max-h-[500px] overflow-y-auto"> |
| <!-- Playlist items will be added here --> |
| </div> |
| <div id="emptyState" class="text-center py-12 text-gray-400"> |
| <i class="material-icons text-5xl mb-4">music_off</i> |
| <p class="text-lg mb-4">Your playlist is empty</p> |
| <button id="uploadBtnEmpty" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 mx-auto transition"> |
| <i class="material-icons">upload</i> |
| <span>Upload MP3 files</span> |
| </button> |
| </div> |
| </div> |
| <!-- Player section --> |
| <div class="w-full lg:w-2/3"> |
| <div class="player-container rounded-xl p-6 relative overflow-hidden"> |
| <canvas class="visualizer" id="visualizer"></canvas> |
| <div class="flex flex-col md:flex-row gap-6 items-center"> |
| <!-- Album art --> |
| <div class="album-art w-48 h-48 rounded-lg flex items-center justify-center"> |
| <i class="material-icons text-6xl text-gray-500" id="albumArtIcon">music_note</i> |
| <img id="albumArtImage" src="" alt="Album Art" class="w-full h-full object-cover rounded-lg hidden"> |
| </div> |
| <!-- Song info --> |
| <div class="flex-1"> |
| <h1 class="text-2xl font-bold truncate" id="songTitle">No song selected</h1> |
| <p class="text-gray-400 mb-4" id="songArtist">Unknown artist</p> |
| <!-- Progress bar --> |
| <div class="mb-2"> |
| <div class="progress-bar rounded-full w-full"> |
| <div class="progress-filled rounded-full" id="progressBar" style="width: 0%"></div> |
| </div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-400 mb-6"> |
| <span id="currentTime">0:00</span> |
| <span id="durationTime">0:00</span> |
| </div> |
| <!-- Controls --> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <button id="shuffleBtn" class="control-btn" title="Shuffle"> |
| <i class="material-icons">shuffle</i> |
| </button> |
| <button id="prevBtn" class="control-btn" title="Previous"> |
| <i class="material-icons">skip_previous</i> |
| </button> |
| </div> |
| <button id="playBtn" class="control-btn bg-blue-600 hover:bg-blue-700 w-14 h-14" title="Play/Pause"> |
| <i class="material-icons text-2xl" id="playIcon">play_arrow</i> |
| <i class="material-icons text-2xl hidden" id="pauseIcon">pause</i> |
| </button> |
| <div class="flex items-center gap-2"> |
| <button id="nextBtn" class="control-btn" title="Next"> |
| <i class="material-icons">skip_next</i> |
| </button> |
| <button id="repeatBtn" class="control-btn" title="Repeat"> |
| <i class="material-icons">repeat</i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!-- Additional controls --> |
| <div class="flex justify-between items-center mt-6"> |
| <div class="flex items-center gap-4"> |
| <div class="relative"> |
| <button id="volumeBtn" class="control-btn" title="Volume"> |
| <i class="material-icons" id="volumeIcon">volume_up</i> |
| </button> |
| <div id="volumeControl" class="absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 p-3 rounded-lg shadow-lg mb-2 hidden"> |
| <div class="volume-bar rounded-full"> |
| <div class="volume-filled rounded-full" id="volumeBar"></div> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <button id="timerBtn" class="control-btn" title="Sleep Timer"> |
| <i class="material-icons">timer</i> |
| </button> |
| <div id="timerContainer" class="absolute bottom-full left-0 bg-gray-800 p-3 rounded-lg shadow-lg mb-2 w-40 hidden"> |
| <div class="text-sm mb-2">Sleep Timer</div> |
| <div class="flex flex-col gap-1"> |
| <div class="timer-option" data-minutes="0">Off</div> |
| <div class="timer-option" data-minutes="5">5 minutes</div> |
| <div class="timer-option" data-minutes="15">15 minutes</div> |
| <div class="timer-option" data-minutes="30">30 minutes</div> |
| <div class="timer-option" data-minutes="60">1 hour</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="eq-bars" id="eqBars"> |
| <div class="eq-bar"></div> |
| <div class="eq-bar"></div> |
| <div class="eq-bar"></div> |
| </div> |
| </div> |
| </div> |
| <!-- Lyrics section --> |
| <div class="mt-6 bg-gray-800 rounded-xl p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Lyrics</h3> |
| </div> |
| <div id="lyricsContent" class="text-center text-gray-400"> |
| No lyrics available for the current song |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Toast notification --> |
| <div class="toast" id="toast"></div> |
| |
| <!-- Upload form modal --> |
| <div id="uploadModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden"> |
| <div class="bg-gray-800 rounded-xl p-6 w-11/12 md:w-1/2 relative"> |
| <h2 class="text-2xl mb-4">Upload New Song</h2> |
| <form id="uploadForm"> |
| <div class="mb-4"> |
| <label class="block mb-1">Song Title</label> |
| <input type="text" id="songTitleInput" class="w-full p-2 rounded bg-gray-700" placeholder="Enter song title"> |
| </div> |
| <div class="mb-4"> |
| <label class="block mb-1">Artist</label> |
| <input type="text" id="songArtistInput" class="w-full p-2 rounded bg-gray-700" placeholder="Enter artist name"> |
| </div> |
| <div class="mb-4"> |
| <label class="block mb-1">Cover Image (Optional)</label> |
| <input type="file" id="coverFileInput" accept="image/*" class="w-full p-2 rounded bg-gray-700"> |
| </div> |
| <div class="mb-4"> |
| <label class="block mb-1">Lyrics</label> |
| <textarea id="songLyricsInput" class="w-full p-2 rounded bg-gray-700" placeholder="Enter lyrics"></textarea> |
| </div> |
| <div class="mb-4"> |
| <label class="block mb-1">Song File (MP3)</label> |
| <input type="file" id="songFileInput" accept=".mp3,audio/mp3" class="w-full p-2 rounded bg-gray-700"> |
| </div> |
| <div class="flex justify-end gap-4"> |
| <button type="button" id="cancelUploadBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded">Cancel</button> |
| <button type="submit" id="submitUploadBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Upload</button> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const state = { |
| playlist: [], |
| filteredPlaylist: [], |
| currentIndex: -1, |
| isPlaying: false, |
| isShuffled: false, |
| isRepeating: false, |
| volume: 0.7, |
| timer: null, |
| searchQuery: '', |
| audioContext: null, |
| analyser: null, |
| dataArray: null, |
| animationId: null |
| }; |
| |
| const elements = { |
| audio: new Audio(), |
| playBtn: document.getElementById('playBtn'), |
| playIcon: document.getElementById('playIcon'), |
| pauseIcon: document.getElementById('pauseIcon'), |
| prevBtn: document.getElementById('prevBtn'), |
| nextBtn: document.getElementById('nextBtn'), |
| shuffleBtn: document.getElementById('shuffleBtn'), |
| repeatBtn: document.getElementById('repeatBtn'), |
| volumeBtn: document.getElementById('volumeBtn'), |
| volumeIcon: document.getElementById('volumeIcon'), |
| volumeControl: document.getElementById('volumeControl'), |
| volumeBar: document.getElementById('volumeBar'), |
| timerBtn: document.getElementById('timerBtn'), |
| timerContainer: document.getElementById('timerContainer'), |
| progressBar: document.getElementById('progressBar'), |
| currentTime: document.getElementById('currentTime'), |
| durationTime: document.getElementById('durationTime'), |
| songTitle: document.getElementById('songTitle'), |
| songArtist: document.getElementById('songArtist'), |
| albumArtIcon: document.getElementById('albumArtIcon'), |
| albumArtImage: document.getElementById('albumArtImage'), |
| playlist: document.getElementById('playlist'), |
| emptyState: document.getElementById('emptyState'), |
| uploadBtn: document.getElementById('uploadBtn'), |
| uploadBtnEmpty: document.getElementById('uploadBtnEmpty'), |
| refreshBtn: document.getElementById('refreshBtn'), |
| searchInput: document.getElementById('searchInput'), |
| lyricsContent: document.getElementById('lyricsContent'), |
| eqBars: document.getElementById('eqBars'), |
| visualizer: document.getElementById('visualizer'), |
| toast: document.getElementById('toast'), |
| uploadModal: document.getElementById('uploadModal'), |
| uploadForm: document.getElementById('uploadForm'), |
| cancelUploadBtn: document.getElementById('cancelUploadBtn'), |
| submitUploadBtn: document.getElementById('submitUploadBtn'), |
| songTitleInput: document.getElementById('songTitleInput'), |
| songArtistInput: document.getElementById('songArtistInput'), |
| songLyricsInput: document.getElementById('songLyricsInput'), |
| songFileInput: document.getElementById('songFileInput'), |
| coverFileInput: document.getElementById('coverFileInput') |
| }; |
|
|
| |
| function init() { |
| elements.audio.volume = state.volume; |
| elements.volumeBar.style.height = `${state.volume * 100}%`; |
| loadPlaylist(); |
| setupEventListeners(); |
| initVisualizer(); |
| } |
| |
| |
| function loadPlaylist() { |
| fetch('index.php?action=getPlaylist') |
| .then(response => response.json()) |
| .then(data => { |
| if (Array.isArray(data)) { |
| state.playlist = data; |
| state.filteredPlaylist = [...data]; |
| updatePlaylistUI(); |
| elements.emptyState.style.display = data.length > 0 ? 'none' : 'block'; |
| if(data.length > 0) { |
| state.currentIndex = 0; |
| } |
| } else { |
| console.error("Error fetching playlist:", data.error); |
| } |
| }) |
| .catch(error => console.error("Fetch error:", error)); |
| } |
| |
| |
| function updatePlaylistUI() { |
| elements.playlist.innerHTML = ''; |
| if (state.filteredPlaylist.length === 0) { |
| const item = document.createElement('div'); |
| item.className = 'text-center py-4 text-gray-400'; |
| item.textContent = 'No songs found'; |
| elements.playlist.appendChild(item); |
| return; |
| } |
| state.filteredPlaylist.forEach((song, index) => { |
| const item = document.createElement('div'); |
| item.className = `flex items-center justify-between p-3 rounded-lg cursor-pointer playlist-item ${state.currentIndex === index ? 'current-song' : ''}`; |
| item.dataset.index = index; |
| item.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-gray-700 rounded flex items-center justify-center"> |
| <i class="material-icons text-lg">music_note</i> |
| </div> |
| <div> |
| <div class="font-medium">${song.title}</div> |
| <div class="text-sm text-gray-400">${song.artist}</div> |
| </div> |
| </div> |
| <div class="text-gray-400 text-sm">3:45</div> |
| `; |
| item.addEventListener('click', () => playSong(index)); |
| elements.playlist.appendChild(item); |
| }); |
| } |
| |
| // Play song by index |
| function playSong(index) { |
| if (index < 0 || index >= state.playlist.length) return; |
| state.currentIndex = index; |
| const song = state.playlist[index]; |
| elements.songTitle.textContent = song.title; |
| elements.songArtist.textContent = song.artist; |
| if (song.cover) { |
| elements.albumArtIcon.style.display = 'none'; |
| elements.albumArtImage.src = song.cover; |
| elements.albumArtImage.style.display = 'block'; |
| } else { |
| elements.albumArtIcon.style.display = 'block'; |
| elements.albumArtImage.style.display = 'none'; |
| } |
| if (song.lyrics) { |
| elements.lyricsContent.innerHTML = song.lyrics.split('\n').map(line => |
| `<div class="mb-2">${line}</div>` |
| ).join(''); |
| } else { |
| elements.lyricsContent.innerHTML = 'No lyrics available for this song'; |
| } |
| elements.audio.src = song.file; |
| elements.audio.play().then(() => { |
| state.isPlaying = true; |
| updatePlayButton(); |
| updatePlaylistUI(); |
| }).catch(error => { |
| showNotification('Error playing song', true); |
| console.error('Play error:', error); |
| }); |
| } |
| |
| |
| function updatePlayButton() { |
| if (state.isPlaying) { |
| elements.playIcon.classList.add('hidden'); |
| elements.pauseIcon.classList.remove('hidden'); |
| } else { |
| elements.playIcon.classList.remove('hidden'); |
| elements.pauseIcon.classList.add('hidden'); |
| } |
| } |
| |
| |
| function setupEventListeners() { |
| elements.playBtn.addEventListener('click', () => { |
| if (state.currentIndex === -1 && state.playlist.length > 0) { |
| playSong(0); |
| } else if (state.isPlaying) { |
| elements.audio.pause(); |
| state.isPlaying = false; |
| updatePlayButton(); |
| } else { |
| elements.audio.play().then(() => { |
| state.isPlaying = true; |
| updatePlayButton(); |
| }); |
| } |
| }); |
| elements.prevBtn.addEventListener('click', () => { |
| if (state.currentIndex > 0) { |
| playSong(state.currentIndex - 1); |
| } else { |
| playSong(state.playlist.length - 1); |
| } |
| }); |
| elements.nextBtn.addEventListener('click', () => { |
| if (state.currentIndex < state.playlist.length - 1) { |
| playSong(state.currentIndex + 1); |
| } else { |
| playSong(0); |
| } |
| }); |
| elements.shuffleBtn.addEventListener('click', () => { |
| state.isShuffled = !state.isShuffled; |
| elements.shuffleBtn.classList.toggle('active-btn', state.isShuffled); |
| showNotification(state.isShuffled ? 'Shuffle enabled' : 'Shuffle disabled'); |
| }); |
| elements.repeatBtn.addEventListener('click', () => { |
| state.isRepeating = !state.isRepeating; |
| elements.repeatBtn.classList.toggle('active-btn', state.isRepeating); |
| showNotification(state.isRepeating ? 'Repeat enabled' : 'Repeat disabled'); |
| }); |
| elements.volumeBtn.addEventListener('click', () => { |
| elements.volumeControl.classList.toggle('hidden'); |
| }); |
| elements.volumeBar.addEventListener('click', (e) => { |
| const rect = e.target.getBoundingClientRect(); |
| const volume = 1 - (e.clientY - rect.top) / rect.height; |
| setVolume(Math.max(0, Math.min(1, volume))); |
| }); |
| elements.timerBtn.addEventListener('click', () => { |
| elements.timerContainer.classList.toggle('hidden'); |
| }); |
| document.querySelectorAll('.timer-option').forEach(option => { |
| option.addEventListener('click', (e) => { |
| const minutes = parseInt(e.target.dataset.minutes); |
| setTimer(minutes); |
| }); |
| }); |
| elements.searchInput.addEventListener('input', (e) => { |
| state.searchQuery = e.target.value.toLowerCase(); |
| filterPlaylist(); |
| }); |
| |
| elements.uploadBtn.addEventListener('click', showUploadModal); |
| elements.uploadBtnEmpty.addEventListener('click', showUploadModal); |
| |
| elements.cancelUploadBtn.addEventListener('click', hideUploadModal); |
| |
| elements.uploadForm.addEventListener('submit', handleUploadSubmit); |
| elements.refreshBtn.addEventListener('click', () => { |
| showNotification('Playlist refreshed'); |
| loadPlaylist(); |
| }); |
| elements.audio.addEventListener('timeupdate', updateProgress); |
| elements.audio.addEventListener('ended', handleSongEnd); |
| elements.audio.addEventListener('durationchange', updateDuration); |
| elements.audio.addEventListener('volumechange', updateVolumeIcon); |
| } |
| |
| function filterPlaylist() { |
| if (!state.searchQuery) { |
| state.filteredPlaylist = [...state.playlist]; |
| } else { |
| state.filteredPlaylist = state.playlist.filter(song => |
| song.title.toLowerCase().includes(state.searchQuery) || |
| song.artist.toLowerCase().includes(state.searchQuery) |
| ); |
| } |
| updatePlaylistUI(); |
| } |
| |
| function updateProgress() { |
| const currentTime = elements.audio.currentTime; |
| const duration = elements.audio.duration || 1; |
| const progressPercent = (currentTime / duration) * 100; |
| elements.progressBar.style.width = `${progressPercent}%`; |
| elements.currentTime.textContent = formatTime(currentTime); |
| } |
| |
| function updateDuration() { |
| elements.durationTime.textContent = formatTime(elements.audio.duration || 0); |
| } |
| |
| function formatTime(seconds) { |
| const mins = Math.floor(seconds / 60); |
| const secs = Math.floor(seconds % 60); |
| return `${mins}:${secs < 10 ? '0' : ''}${secs}`; |
| } |
| |
| function handleSongEnd() { |
| if (state.isRepeating) { |
| elements.audio.currentTime = 0; |
| elements.audio.play(); |
| } else if (state.isShuffled) { |
| const nextIndex = Math.floor(Math.random() * state.playlist.length); |
| playSong(nextIndex); |
| } else { |
| if (state.currentIndex < state.playlist.length - 1) { |
| playSong(state.currentIndex + 1); |
| } else { |
| state.isPlaying = false; |
| updatePlayButton(); |
| } |
| } |
| } |
| |
| function setVolume(volume) { |
| state.volume = volume; |
| elements.audio.volume = volume; |
| elements.volumeBar.style.height = `${volume * 100}%`; |
| elements.volumeControl.classList.add('hidden'); |
| } |
| |
| function updateVolumeIcon() { |
| if (elements.audio.muted || elements.audio.volume === 0) { |
| elements.volumeIcon.textContent = 'volume_off'; |
| } else if (elements.audio.volume < 0.5) { |
| elements.volumeIcon.textContent = 'volume_down'; |
| } else { |
| elements.volumeIcon.textContent = 'volume_up'; |
| } |
| } |
| |
| function setTimer(minutes) { |
| if (state.timer) { |
| clearTimeout(state.timer); |
| state.timer = null; |
| } |
| if (minutes > 0) { |
| state.timer = setTimeout(() => { |
| elements.audio.pause(); |
| state.isPlaying = false; |
| updatePlayButton(); |
| showNotification('Sleep timer stopped playback'); |
| }, minutes * 60 * 1000); |
| document.querySelectorAll('.timer-option').forEach(option => { |
| option.classList.toggle('active', parseInt(option.dataset.minutes) === minutes); |
| }); |
| showNotification(`Sleep timer set for ${minutes} minutes`); |
| } else { |
| document.querySelectorAll('.timer-option').forEach(option => { |
| option.classList.remove('active'); |
| }); |
| showNotification('Sleep timer disabled'); |
| } |
| elements.timerContainer.classList.add('hidden'); |
| } |
| |
| function showNotification(message, isError = false) { |
| elements.toast.textContent = message; |
| elements.toast.className = `toast ${isError ? 'error' : ''} show`; |
| setTimeout(() => { |
| elements.toast.className = 'toast'; |
| }, 3000); |
| } |
| |
| |
| function showUploadModal() { |
| |
| elements.uploadForm.reset(); |
| elements.uploadModal.classList.remove('hidden'); |
| } |
| |
| |
| function hideUploadModal() { |
| elements.uploadModal.classList.add('hidden'); |
| } |
| |
| |
| function handleUploadSubmit(event) { |
| event.preventDefault(); |
| |
| if (elements.songFileInput.files.length === 0) { |
| showNotification("No song file selected", true); |
| return; |
| } |
| const songFile = elements.songFileInput.files[0]; |
| const formData = new FormData(); |
| formData.append('song', songFile); |
| |
| if (elements.coverFileInput.files.length > 0) { |
| formData.append('cover', elements.coverFileInput.files[0]); |
| } |
| formData.append('title', elements.songTitleInput.value || songFile.name.replace('.mp3', '')); |
| formData.append('artist', elements.songArtistInput.value || 'Uploaded Artist'); |
| formData.append('lyrics', elements.songLyricsInput.value || ''); |
| |
| |
| showNotification("Uploading..."); |
| |
| fetch('index.php?action=uploadSong', { |
| method: 'POST', |
| body: formData |
| }) |
| .then(response => response.json()) |
| .then(result => { |
| if (result.success) { |
| showNotification(result.success); |
| state.playlist.unshift(result.song); |
| state.filteredPlaylist = [...state.playlist]; |
| updatePlaylistUI(); |
| elements.emptyState.style.display = 'none'; |
| hideUploadModal(); |
| } else { |
| showNotification(result.error, true); |
| } |
| }) |
| .catch(error => { |
| console.error("Upload error:", error); |
| showNotification("Upload failed", true); |
| }); |
| } |
| |
| |
| function initVisualizer() { |
| try { |
| const AudioContext = window.AudioContext || window.webkitAudioContext; |
| state.audioContext = new AudioContext(); |
| state.analyser = state.audioContext.createAnalyser(); |
| state.analyser.fftSize = 256; |
| const source = state.audioContext.createMediaElementSource(elements.audio); |
| source.connect(state.analyser); |
| state.analyser.connect(state.audioContext.destination); |
| const bufferLength = state.analyser.frequencyBinCount; |
| state.dataArray = new Uint8Array(bufferLength); |
| visualize(); |
| } catch (e) { |
| console.error('Audio visualization error:', e); |
| } |
| } |
| |
| |
| function visualize() { |
| if (!state.analyser) return; |
| state.analyser.getByteFrequencyData(state.dataArray); |
| const canvas = elements.visualizer; |
| const ctx = canvas.getContext('2d'); |
| const width = canvas.width = canvas.offsetWidth; |
| const height = canvas.height = canvas.offsetHeight; |
| ctx.clearRect(0, 0, width, height); |
| const barWidth = (width / state.dataArray.length) * 2.5; |
| let x = 0; |
| for (let i = 0; i < state.dataArray.length; i++) { |
| const barHeight = (state.dataArray[i] / 255) * height; |
| ctx.fillStyle = `rgb(${50 + state.dataArray[i]}, 100, 200)`; |
| ctx.fillRect(x, height - barHeight, barWidth, barHeight); |
| x += barWidth + 1; |
| } |
| state.animationId = requestAnimationFrame(visualize); |
| } |
| |
| init(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
