ए कोड लेखक: emmanuelbossro2004

532 emmanuelbossro2004

अनुशंसित

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

ए कोड लेखक: emmanuelbossro2004

अनुशंसित

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

एनिमेटेड HTML और CSS इनपुट

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

रिएक्ट नेटफ्लिक्स लैंडिंग पेज

एनिमेटेड HTML और CSS इनपुट

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS