اسکریپت موزیک پلیر شناور و شیشه‌ای برای وبلاگ + آموزش

اگر دوست دارید فضای وبلاگتون رو جذاب‌تر کنید و یک موسیقی پس‌زمینه با ظاهری بسیار مدرن داشته باشید، این پست دقیقاً برای شماست. امروز دو نسخه از یک موزیک پلیر شناور رو براتون آماده کردم که طراحی “شیشه‌ای” (Glassmorphism) داره و به صورت ثابت در پایین صفحه قرار می‌گیره.

✨ ویژگی‌های جذاب این موزیک پلیر: 

•  طراحی بسیار سبک، مینیمال و شیشه‌ای
• دارای انیمیشن رقص نور (اکولایزر) هنگام پخش
• هماهنگی خودکار رنگ و فونت پلیر با قالب وبلاگ شما
• دارای دکمه‌های کنترل (بعدی، قبلی، پخش/توقف) و دکمه دانلود آهنگ

<style>
    .mini-player { 
        position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); 
        z-index: 9999; display: flex; align-items: center; gap: 10px; color: inherit; 
        background: rgba(128, 128, 128, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
        border: 1px solid rgba(128, 128, 128, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
        padding: 6px 18px; border-radius: 40px; transition: 0.3s; 
    }
    .mini-player:hover { transform: translate(-50%, -2px); background: rgba(128, 128, 128, 0.15); }
    
    .mini-player button, .mini-player a.mp-dl {
        background: none; border: none; color: inherit; cursor: pointer; padding: 0;
        font-family: 'Material Symbols Rounded'; font-size: 22px; transition: 0.2s; 
        display: flex; align-items: center; justify-content: center; text-decoration: none;
    }
    .mini-player button:hover, .mini-player a.mp-dl:hover { transform: scale(1.1); }
    #mp-close { font-size: 18px; opacity: 0.6; } #mp-close:hover { opacity: 1; color: #ff4757; } 
    
    .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 5px; }
    .eq span { width: 3px; background: currentColor; border-radius: 2px; transition: 0.2s; height: 3px; }
    .eq.play span { animation: eq-play 1s infinite ease-in-out; }
    .eq.play span:nth-child(1) { animation-delay: 0s; height: 14px; }
    .eq.play span:nth-child(2) { animation-delay: 0.2s; height: 8px; }
    .eq.play span:nth-child(3) { animation-delay: 0.4s; height: 12px; }
    @keyframes eq-play { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
</style>

<div class="mini-player" id="mp-box">
    <button id="mp-close" title="بستن">close</button>	
    <a id="mp-download" class="mp-dl" href="#" download target="_blank" title="دانلود آهنگ">download</a>     
    <button id="mp-next" title="بعدی">skip_next</button>
    <button id="mp-toggle" title="پخش/توقف">play_arrow</button>
    <button id="mp-prev" title="قبلی">skip_previous</button>
    <div class="eq" id="mp-eq"><span></span><span></span><span></span></div>   
    <audio id="mp-audio"></audio>
</div>

<script>
    
    const playlist = [
        "https://dl.musicdel.ir/Music/1404/07/City%20of%20the%20Sun-Spaghetti%20-musicdel.ir%20128.mp3",
        "https://dl.musicdel.ir/tag/music/1401/12/09/Tchaikovsky%20-%20Swan%20Lake%20(128).mp3",
        "https://dl.musicdel.ir/Music/1404/07/Kayhan%20Kalhor-Where%20Are%20You%20-musicdel.ir%20128.mp3"
    ];

    let currentTrack = 0;
    let playing = false;

    const box = document.getElementById('mp-box'), aud = document.getElementById('mp-audio');
    const btnPlay = document.getElementById('mp-toggle'), eq = document.getElementById('mp-eq');
    const dlBtn = document.getElementById('mp-download');

    const loadTrack = (index) => {
        aud.src = playlist[index];
        dlBtn.href = playlist[index]; 
        if (playing) aud.play();
    };

    const setPlay = (s) => {
        playing = s;
        btnPlay.innerText = s ? 'pause' : 'play_arrow';
        s ? eq.classList.add('play') : eq.classList.remove('play');
    };

    const nextTrack = () => { currentTrack = (currentTrack + 1) % playlist.length; loadTrack(currentTrack); };
    const prevTrack = () => { currentTrack = (currentTrack - 1 + playlist.length) % playlist.length; loadTrack(currentTrack); };

    document.getElementById('mp-next').onclick = (e) => { e.stopPropagation(); nextTrack(); setPlay(true); aud.play(); };
    document.getElementById('mp-prev').onclick = (e) => { e.stopPropagation(); prevTrack(); setPlay(true); aud.play(); };
    
    aud.addEventListener('ended', () => { nextTrack(); aud.play(); });

    const autoPlay = () => {
        if (playing) return;
        aud.play().then(() => setPlay(true)).catch(() => setPlay(false));
        ['click', 'scroll'].forEach(e => document.removeEventListener(e, autoPlay));
    };

    loadTrack(currentTrack);
    window.addEventListener('load', autoPlay);
    ['click', 'scroll'].forEach(e => document.addEventListener(e, autoPlay));

    btnPlay.onclick = (e) => { e.stopPropagation(); playing ? aud.pause() : aud.play(); setPlay(!playing); };
    
    document.getElementById('mp-close').onclick = (e) => {
        e.stopPropagation(); aud.pause(); box.style.opacity = '0';
        setTimeout(() => box.style.display = 'none', 300);
    };
</script>

🛠️ آموزش نصب روی وبلاگ:

نصب این پلیر بسیار ساده است و فقط چند ثانیه زمان می‌بره:

1.  ابتدا یکی از کدهای بالا را کپی کنید.
2. در پنل مدیریت وبلاگ خود، از منوی سمت راست روی «تنظیمات» کلیک کنید.
3. به بخش  «شخصی سازی» بروید و گزینه «کدهای جاوا اسکریپت» را انتخاب کنید.
4. کد را در آنجا پیست (Paste) کرده و تنظیمات را ذخیره کنید. تمام! وبلاگ شما حالا موزیکال شد.

💡 نکته مهم برای تغییر آهنگ‌ها: 

در کدی که کپی می‌کنید، به دنبال آدرس لینک آهنگ‌ها (لینک‌هایی که با پسوند mp3 تمام می‌شوند) بگردید و به سادگی لینک آهنگ‌های دلخواه خودتون رو جایگزین اون‌ها کنید.

📽️ آموزش ویدیویی: