Ein Code von emmanuelbossro2004

256 emmanuelbossro2004

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

Empfohlen

26 May 2025

das Ballspiel zum Spaß (von Herrn)

HTML

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

Ein Code von emmanuelbossro2004

Empfohlen

Ein Code für Codex

Ein Code von ribeirosarah905

das Ballspiel zum Spaß (von Herrn)

HTML

CSS

JS

Empfohlen

Ein Code für Codex

Ein Code von ribeirosarah905

das Ballspiel zum Spaß (von Herrn)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS