Reproductor de audio HTML con lista de reproducción y controles

Abrir en el editor Publica tu código

Recomendado

30 April 2024

Plantilla de calificación de estrellas animadas

3 May 2025

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>say ok</title>
    <link rel="stylesheet" href="denyMusica.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="audio-player">
        <div id="notification" class="notification" style="display: none;">
            <span id="notification-text"></span>
            <button class="close-btn" onclick="hideNotification()">x</button>
        </div>

<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
        </button>

<input type="range" id="volume" min="0" max="1" step="0.01" value="0.5" onchange="changeVolume()" class="slider">
        <div class="volume-display">volume: <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>

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;
}
.audio-player {
    background: linear-gradient(145deg, #4e3b4a, #8c5882); 
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    text-align: center;
    box-sizing: border-box;
}
.choose-song-btn {
    background: linear-gradient(145deg, #4e3b4a, #85537b);
    border-radius: 20px;
    color: white;
    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: #ff9eed;
}
.track {
    background-color: #303030;
    color: #fff;
    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: #ff9eed; 
}
.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: #ff9eed;
    transform: scale(1.1);
}
.stop-btn {
    background-color: #ff9eed;
}
.stop-btn:hover {
    background-color: #ff9eed;
}
.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: #ff9eed;  
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#volume::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background: #ff9eed; 
    cursor: pointer;
}
#volume::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;  
    background: #ff9eed;  
    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: #ff9eed;  
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#speed::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background: #ff9eed;
    cursor: pointer;
}
#speed::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;  
    background: #ff9eed;  
    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: #ff9eed;  
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#progress-bar::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff9eed;
    cursor: pointer;
}
#progress-bar::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;  
    background: #ff9eed; 
    cursor: pointer;
}
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(145deg, #303030, #585858);
    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: #ff9eed;
    font-size: 1.5em;
    cursor: pointer;
    border: none;
    transition: color 0.3s ease;
}
.notification .close-btn:hover {
    color: #ffaaaa;
}
@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();

function loadFiles(event) {
    const files = Array.from(event.target.files).slice(0, 5);
    if (playlist.length + files.length > 5) {
        showNotification("u 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("404:", 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.play().catch(error => {
        console.error("404:", error);
    });
    isPlaying = true;
    updateDuration();
    showNotification(`playing: ${playlist[currentTrack].name}`);
    document.querySelector("#play-icon").classList.replace("fa-play", "fa-pause");
}

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 === playlist.length - 1) ? 0 : currentTrack + 1;
    selectTrack(currentTrack);
}

function prevTrack() {
    currentTrack = (currentTrack === 0) ? playlist.length - 1 : currentTrack - 1;
    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");
}

Reproductor de audio HTML con lista de reproducción y controles

Recomendado

Plantilla de calificación de estrellas animadas

Un código de nehapanchal8087

Un código de alejandrokundrah

HTML

CSS

JS

Recomendado

Plantilla de calificación de estrellas animadas

Un código de nehapanchal8087

Un código de alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS