eine Website, auf der Sie Songs abspielen können

2016 alqsdeus

Im Editor öffnen Veröffentlichen Sie Ihren Code

eine Website, auf der Sie Songs abspielen können

Empfohlen

29 December 2024

Eine alternative Homepage

6 April 2025

Finden Sie einen Liebhaber und eine Dating-Website

30 May 2025

Manuelles Codieren der Facebook-Anmeldeseite

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

Empfohlen

Eine alternative Homepage

Finden Sie einen Liebhaber und eine Dating-Website

Manuelles Codieren der Facebook-Anmeldeseite

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS