|
| 1 | +// script.js |
| 2 | + |
| 3 | +const audio = document.getElementById('audio'); |
| 4 | +const songTitle = document.getElementById('song-title'); |
| 5 | +const playButton = document.getElementById('play'); |
| 6 | +const nextButton = document.getElementById('next'); |
| 7 | +const prevButton = document.getElementById('prev'); |
| 8 | +const volumeControl = document.getElementById('volume'); |
| 9 | +const playlist = document.getElementById('playlist'); |
| 10 | +const fileInput = document.getElementById('file-input'); |
| 11 | +const addSongButton = document.getElementById('add-song-btn'); |
| 12 | + |
| 13 | +const songs = []; |
| 14 | +let currentSongIndex = 0; |
| 15 | + |
| 16 | +// Load song by index |
| 17 | +const loadSong = (index) => { |
| 18 | + const song = songs[index]; |
| 19 | + audio.src = song.src; |
| 20 | + songTitle.textContent = song.title; |
| 21 | +}; |
| 22 | + |
| 23 | +// Play/Pause functionality |
| 24 | +const togglePlay = () => { |
| 25 | + if (audio.paused) { |
| 26 | + audio.play(); |
| 27 | + playButton.textContent = '⏸️'; |
| 28 | + } else { |
| 29 | + audio.pause(); |
| 30 | + playButton.textContent = '▶️'; |
| 31 | + } |
| 32 | +}; |
| 33 | + |
| 34 | +// Next song |
| 35 | +const nextSong = () => { |
| 36 | + currentSongIndex = (currentSongIndex + 1) % songs.length; |
| 37 | + loadSong(currentSongIndex); |
| 38 | + audio.play(); |
| 39 | + playButton.textContent = '⏸️'; |
| 40 | +}; |
| 41 | + |
| 42 | +// Previous song |
| 43 | +const prevSong = () => { |
| 44 | + currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length; |
| 45 | + loadSong(currentSongIndex); |
| 46 | + audio.play(); |
| 47 | + playButton.textContent = '⏸️'; |
| 48 | +}; |
| 49 | + |
| 50 | +// Volume control |
| 51 | +const changeVolume = () => { |
| 52 | + audio.volume = volumeControl.value; |
| 53 | +}; |
| 54 | + |
| 55 | +// Update playlist display |
| 56 | +const updatePlaylist = () => { |
| 57 | + playlist.innerHTML = ''; |
| 58 | + songs.forEach((song, index) => { |
| 59 | + const li = document.createElement('li'); |
| 60 | + li.textContent = song.title; |
| 61 | + li.addEventListener('click', () => { |
| 62 | + currentSongIndex = index; |
| 63 | + loadSong(currentSongIndex); |
| 64 | + audio.play(); |
| 65 | + playButton.textContent = '⏸️'; |
| 66 | + }); |
| 67 | + playlist.appendChild(li); |
| 68 | + }); |
| 69 | +}; |
| 70 | +// Add a song to the playlist |
| 71 | +function addSong(file) { |
| 72 | + const song = { |
| 73 | + title: file.name, |
| 74 | + src: URL.createObjectURL(file), |
| 75 | + }; |
| 76 | + songs.push(song); |
| 77 | + updatePlaylist(); |
| 78 | +} |
| 79 | + |
| 80 | +// Event listeners |
| 81 | +playButton.addEventListener('click', togglePlay); |
| 82 | +nextButton.addEventListener('click', nextSong); |
| 83 | +prevButton.addEventListener('click', prevSong); |
| 84 | +volumeControl.addEventListener('input', changeVolume); |
| 85 | + |
| 86 | +addSongButton.addEventListener('click', () => { |
| 87 | + const file = fileInput.files[0]; |
| 88 | + if (file) { |
| 89 | + addSong(file); |
| 90 | + fileInput.value = ''; // Reset file input |
| 91 | + } |
| 92 | +}); |
| 93 | + |
| 94 | +// Initialize player with no songs |
| 95 | +songTitle.textContent = 'No song playing'; |
0 commit comments