YouMusic-U-personal-Music

Open In Editor Video Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouMusic</title>
    <link rel="stylesheet" href="index.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>

<input type="file" id="fileInput" multiple accept="audio/*" onchange="loadFiles(event)" hidden>
            <button onclick="document.getElementById('fileInput').click()" class="choose-song-btn">
                <i class="fas fa-folder-open"></i> Choose a Song
            </button>

<input type="range" id="volume" min="0" max="1" step="0.01" value="0.5" onchange="changeVolume()"
                class="slider">
            <div class="volume-display">Volumen: <span id="volume-display">50%</span></div>
            <input type="range" id="speed" min="0.5" max="2" step="0.1" value="1" onchange="changeSpeed()"
                class="slider">
            <div class="volume-display">Speed: <span id="speed-display">1x</span></div>
        </div>
    </div>

<div class="usage-guide-container">
        
        <div class="usage-guide">
            <h2>How to Use</h2>
            <ul>
                <li>Press <strong>"Choose Song"</strong> to load audio files.</li>
                <li><strong>"Once selected, click the file and it will start playing."</strong></li>
                <li>Use the buttons <i class="fas fa-play"></i>, <i class="fas fa-pause"></i>, <i class="fas fa-stop"></i> to control playback.</li>
                <li>Scroll with the progress bar to seek through the song.</li>
                <li>Adjust the volume and speed with the sliders.</li>
                <li>Activate <i class="fas fa-sync-alt"></i> to repeat the playlist or <i class="fas fa-redo-alt"></i>
                    to repeat a song.</li>
                <li>Remove songs from the playlist using the <i class="fas fa-trash"></i> icon.</li>
            </ul>
        </div>
    </div>

</html>

CSS

* {
    scrollbar-width: auto;
    scrollbar-color: #B4BCC2 #0c0d0f;
}

*::-webkit-scrollbar {
    width: 12.5px;
}

*::-webkit-scrollbar-track {
    background: #0c0d0f;
}

*::-webkit-scrollbar-thumb {
    background-color: #B4BCC2;
    border-radius: 10px;
    border: 3px solid #0c0d0f;
}

body {
    background-color: #000000;
    color: #FFF;
    font-family: 'Manrope', sans-serif;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Contenedor principal */
.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    padding: 20px;
    flex-wrap: wrap;
}

/* Contenedor general */
.container {
    display: flex;
    justify-content: center; /* Centra los elementos en el eje horizontal */
    gap: 20px; /* Espacio entre los elementos */
}

/* Estilo del cartel de modo de uso */
.usage-guide-container {
    display: flex;
    justify-content: flex-end; /* Alinea el cartel de modo de uso a la derecha */
    margin-right: 5mm; /* Ajusta el margen derecho */
}

.usage-guide {
    background: linear-gradient(145deg, #182fb4, #17ada5, #3000dd);
    color: #000000;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
}

.usage-guide h2 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #000000;
}

.usage-guide ul {
    list-style: none;
    padding: 0;
    font-size: 1em;
}

.usage-guide li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.usage-guide li i {
    color: #ffee00;
    font-size: 1.2em;
}

/* Contenedor de audio */
.audio-player-container {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Centra el reproductor */
}

.audio-player {
    background: linear-gradient(145deg, #1f207e, #27bb65, #3308cc);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgb(0, 204, 255);
    width: 100%;
    max-width: 500px;
    text-align: center;
    box-sizing: border-box;
}

.choose-song-btn {
    background: linear-gradient(145deg, #484abb, #2cc97a);
    border-radius: 20px;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choose-song-btn i {
    margin-right: 10px;
}

.choose-song-btn:hover {
    background-color: #000000;
}

#repeat-infinite-btn,
#repeat-once-btn {
    transition: color 0.3s ease, transform 0.2s ease;
}

#repeat-infinite-btn:hover,
#repeat-once-btn:hover {
    transform: scale(1.2);
    color: #00ff4c;
}

.track {
    background-color: #2bc2a1;
    color: #000000;
    padding: 10px;
    border-radius: 15px;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.track-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.track-buttons i {
    cursor: pointer;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.track-buttons i:hover {
    color: #00ff4c;
}

.track:hover {
    background-color: #303030;
}

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

.control-btn {
    width: 60px;
    height: 60px;
    background-color: #303030;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.control-btn:hover {
    background-color: #0a008fd3;
    transform: scale(1.1);
}

.stop-btn {
    background-color: #0a008fd3;
}

.stop-btn:hover {
    background-color: #00ff4c;
}

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

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #303030;
    border-radius: 5px;
    appearance: none;
}

.slider {
    width: 80%;
    margin: 10px auto;
}

.volume-display {
    font-size: 0.85em;
    color: #8b8b8b;
    padding-top: 5px;
}

#volume {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 8px;
    background: #303030;
    border-radius: 10px;
    outline: none;
    transition: background 0.3s ease;
}

#volume::-webkit-slider-runnable-track {
    background: #303030;
    border-radius: 10px;
}

#volume::-moz-range-track {
    background: #303030;
    border-radius: 10px;
}

#volume::-ms-track {
    background: #303030;
    border-radius: 10px;
    border-color: transparent;
}

#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#volume::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
}

#volume::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
}

#speed {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 8px;
    background: #303030;
    border-radius: 10px;
    outline: none;
    transition: background 0.3s ease;
}

#speed::-webkit-slider-runnable-track {
    background: #303030;
    border-radius: 10px;
}

#speed::-moz-range-track {
    background: #303030;
    border-radius: 10px;
}

#speed::-ms-track {
    background: #303030;
    border-radius: 10px;
    border-color: transparent;
}

#speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#speed::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
}

#speed::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
}

#progress-bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #303030;
    border-radius: 10px;
    outline: none;
    transition: background 0.3s ease;
}

#progress-bar::-webkit-slider-runnable-track {
    background: #303030;
    border-radius: 10px;
}

#progress-bar::-moz-range-track {
    background: #303030;
    border-radius: 10px;
}

#progress-bar::-ms-track {
    background: #303030;
    border-radius: 10px;
    border-color: transparent;
}

#progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#progress-bar::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
}

#progress-bar::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00d9ff;
    cursor: pointer;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(145deg, #00ffc8, #1a2296);
    color: #fff;
    padding: 15px 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: fade-in-out 3s ease forwards;
    z-index: 10;
    font-family: 'Helvetica', sans-serif;
    font-size: 1rem;
}

.notification .close-btn {
    background-color: transparent;
    color: #00d9ff;
    font-size: 1.5em;
    cursor: pointer;
    border: none;
    transition: color 0.3s ease;
}

.notification .close-btn:hover {
    color: #00d9ff;
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

20%,
    80% {
        opacity: 1;
        transform: translateY(0);
    }

100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

JS

let currentTrack = 0;
let isPlaying = false;
let playlist = [];
const audio = new Audio();

let repeatInfinite = false;
let repeatOnce = false;

function loadFiles(event) {
    const files = Array.from(event.target.files).slice(0, 5);
    if (playlist.length + files.length > 5) {
        showNotification("You can only add up to 5 songs.");
        return;
    }
    playlist = [...playlist, ...files];
    renderPlaylist();
}

function playPause() {
    if (playlist.length === 0) {
        showNotification("No songs available to play.");
        return;
    }

if (isPlaying) {
        audio.pause();
        document.querySelector("#play-icon").classList.replace("fa-pause", "fa-play");
        showNotification("Paused");
    } else {
        audio.play().catch(error => {
            console.error("Error playing audio:", error);
        });
        document.querySelector("#play-icon").classList.replace("fa-play", "fa-pause");
        showNotification("Playing");
    }
    isPlaying = !isPlaying;
}

function stopPlayback() {
    if (playlist.length === 0) {
        showNotification("No songs available to stop.");
        return;
    }

audio.pause();
    audio.currentTime = 0;
    document.querySelector("#play-icon").classList.replace("fa-pause", "fa-play");
    showNotification("Stopped");
    isPlaying = false;
}

function selectTrack(trackIndex) {
    if (playlist.length === 0) {
        showNotification("No songs available to play.");
        return;
    }

currentTrack = trackIndex;
    audio.src = URL.createObjectURL(playlist[currentTrack]);
    audio.load();
    audio.play().then(() => {
        isPlaying = true;
        document.querySelector("#play-icon").classList.replace("fa-play", "fa-pause");
        updateDuration();
        showNotification(`Playing: ${playlist[currentTrack].name}`);
    }).catch(error => {
        console.error("Error playing audio:", error);
    });
}

function updateDuration() {
    const progressBar = document.getElementById("progress-bar");

audio.onloadedmetadata = () => {
        document.getElementById("total-duration").textContent = formatTime(audio.duration);
        progressBar.max = audio.duration;
    };

audio.ontimeupdate = () => {
        document.getElementById("current-time").textContent = formatTime(audio.currentTime);
        progressBar.value = audio.currentTime;
    };
}

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

function seekAudio() {
    audio.currentTime = document.getElementById("progress-bar").value;
}

function nextTrack() {
    currentTrack = (currentTrack + 1) % playlist.length;
    selectTrack(currentTrack);
}

function prevTrack() {
    currentTrack = (currentTrack - 1 + playlist.length) % playlist.length;
    selectTrack(currentTrack);
}

function changeVolume() {
    audio.volume = document.getElementById("volume").value;
    document.getElementById("volume-display").innerText = `${Math.floor(audio.volume * 100)}%`;
}

function changeSpeed() {
    audio.playbackRate = document.getElementById("speed").value;
    document.getElementById("speed-display").innerText = `${audio.playbackRate}x`;
}

function showNotification(message) {
    const notification = document.getElementById("notification");
    const notificationText = document.getElementById("notification-text");
    notificationText.innerText = message;
    notification.style.display = "flex";
    setTimeout(() => {
        notification.style.display = "none";
    }, 3000);
}

function hideNotification() {
    document.getElementById("notification").style.display = "none";
}

function deleteTrack(index) {
    playlist.splice(index, 1);
    renderPlaylist();
    showNotification("Track deleted");
}

function toggleRepeatInfinite() {
    repeatInfinite = !repeatInfinite;
    repeatOnce = false; // Desactiva repetición única
    updateRepeatButtons();
    showNotification(repeatInfinite ? "Repeat All Enabled" : "Repeat All Disabled");
}

function toggleRepeatOnce() {
    repeatOnce = !repeatOnce;
    repeatInfinite = false; // Desactiva repetición infinita
    updateRepeatButtons();
    showNotification(repeatOnce ? "Repeat One Enabled" : "Repeat One Disabled");
}

function updateRepeatButtons() {
    const repeatInfiniteBtn = document.getElementById('repeat-infinite-btn');
    const repeatOnceBtn = document.getElementById('repeat-once-btn');

repeatInfiniteBtn.style.color = repeatInfinite ? '#ff9eed' : '';
    repeatOnceBtn.style.color = repeatOnce ? '#ff9eed' : '';
}

audio.onended = () => {
    if (repeatOnce) {
        selectTrack(currentTrack); // Repite la misma canción
    } else if (repeatInfinite) {
        nextTrack(); // Pasa a la siguiente canción en modo infinito
    } else if (currentTrack < playlist.length - 1) {
        nextTrack();
    } else {
        stopPlayback();
    }
};

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS