diff --git a/README.md b/README.md index f34710e..72f2cb3 100644 --- a/README.md +++ b/README.md @@ -441,6 +441,17 @@ In order to run this project you need: +
  • +
    +Music Player +

    A simple, user-friendly Music Player built using HTML, CSS, and JavaScript. This app allows users to upload and manage their favorite songs dynamically, creating a personalized playlist.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/MusicPlayer/index.html b/Source-Code/MusicPlayer/index.html new file mode 100644 index 0000000..1c3f58f --- /dev/null +++ b/Source-Code/MusicPlayer/index.html @@ -0,0 +1,35 @@ + + + + + + Music Player + + + +
    +

    Music Player

    +
    +

    No song playing

    + +
    + + + +
    + +
    +
    +

    Your Playlist

    + +
    +
    +

    Add Your Songs

    + + +
    +
    + + + + \ No newline at end of file diff --git a/Source-Code/MusicPlayer/script.js b/Source-Code/MusicPlayer/script.js new file mode 100644 index 0000000..980df0e --- /dev/null +++ b/Source-Code/MusicPlayer/script.js @@ -0,0 +1,95 @@ +// script.js + +const audio = document.getElementById('audio'); +const songTitle = document.getElementById('song-title'); +const playButton = document.getElementById('play'); +const nextButton = document.getElementById('next'); +const prevButton = document.getElementById('prev'); +const volumeControl = document.getElementById('volume'); +const playlist = document.getElementById('playlist'); +const fileInput = document.getElementById('file-input'); +const addSongButton = document.getElementById('add-song-btn'); + +const songs = []; +let currentSongIndex = 0; + +// Load song by index +const loadSong = (index) => { + const song = songs[index]; + audio.src = song.src; + songTitle.textContent = song.title; +}; + +// Play/Pause functionality +const togglePlay = () => { + if (audio.paused) { + audio.play(); + playButton.textContent = '⏸️'; + } else { + audio.pause(); + playButton.textContent = '▶️'; + } +}; + +// Next song +const nextSong = () => { + currentSongIndex = (currentSongIndex + 1) % songs.length; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; +}; + +// Previous song +const prevSong = () => { + currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; +}; + +// Volume control +const changeVolume = () => { + audio.volume = volumeControl.value; +}; + +// Update playlist display +const updatePlaylist = () => { + playlist.innerHTML = ''; + songs.forEach((song, index) => { + const li = document.createElement('li'); + li.textContent = song.title; + li.addEventListener('click', () => { + currentSongIndex = index; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; + }); + playlist.appendChild(li); + }); +}; +// Add a song to the playlist +function addSong(file) { + const song = { + title: file.name, + src: URL.createObjectURL(file), + }; + songs.push(song); + updatePlaylist(); +} + +// Event listeners +playButton.addEventListener('click', togglePlay); +nextButton.addEventListener('click', nextSong); +prevButton.addEventListener('click', prevSong); +volumeControl.addEventListener('input', changeVolume); + +addSongButton.addEventListener('click', () => { + const file = fileInput.files[0]; + if (file) { + addSong(file); + fileInput.value = ''; // Reset file input + } +}); + +// Initialize player with no songs +songTitle.textContent = 'No song playing'; diff --git a/Source-Code/MusicPlayer/style.css b/Source-Code/MusicPlayer/style.css new file mode 100644 index 0000000..9cc2090 --- /dev/null +++ b/Source-Code/MusicPlayer/style.css @@ -0,0 +1,86 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #1e1e2f; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.music-player { + text-align: center; + background: #29293d; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); + width: 300px; +} + +.player h2 { + font-size: 18px; + margin-bottom: 20px; +} + +.controls { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 15px; +} + +.controls button { + background: #3b3b57; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +.add-song button { + background: #3b3b57; + color: white; + border: none; + padding: 10px; + margin-top: 10px; + border-radius: 5px; + cursor: pointer; +} + +.controls button:hover { + background: #50506b; +} + +#volume { + width: 100%; +} + +.song-list ul { + list-style: none; + padding: 0; + margin: 0; +} + +.song-list li { + background: #3b3b57; + padding: 10px; + margin: 5px 0; + border-radius: 5px; + cursor: pointer; +} + +.song-list li:hover { + background: #50506b; +} + +.add-song input { + margin-top: 10px; +} + +.add-song button:hover { + background: #50506b; +}