um site onde você pode tocar músicas

Abrir no Editor Publique Seu Código

Recomendado

24 December 2024

<!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");
}

um site onde você pode tocar músicas

Recomendado

Um código por fastclass383

Um código de Metr

Um site de jornal responsivo

HTML

CSS

JS

Recomendado

Um código por fastclass383

Um código de Metr

Um site de jornal responsivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS