آموزش ساخت موزیک پلیر حرفه ای در جاوا اسکریپت

آموزش ساخت موزیک پلیر حرفه ای در جاوا اسکریپت

ساخت موزیک پلیر حرفه ای با MediaElement.js – در این آموزش با کمک کتابخانه مدیا المنت یک audio player یا موزیک پلیر شیک و زیبا خواهیم ساخت .

از جمله ویژگی های آن می توان به :
پوستر آهنگ
نام آهنگ
نام خواننده
نام آلبوم اشاره کرد .


فایل index.html ساختار موزیک پلیر

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - CODE</title>
    <link rel="stylesheet" href="static/css/lib/mediaelementplayer.min.css">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        
        <audio id="player" data-song-name="House of the Rising Sun" data-singer="The Animals" data-album="XT" data-poster="https://ts2.tarafdari.com/contents/user6984/content-sound/3207122-56a6ca785f9b58b7d0e4a910.jpg" src="https://ts2.tarafdari.com/contents/user6984/content-sound/the_animals_-_the_house_of_the_rising_sun.mp3"></audio>

       
    </div>



    <script src="static/js/lib/mediaelement-and-player.min.js"></script>
    <script src="static/js/lib/mediaelement-fa.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>



فایل main.css استایل موزیک پلیر

.container{
    margin: 0 auto;
    width: 80%;
    text-align: center;
    direction: rtl;
}

#introduce{
    display: block;
    width: 100%;
    font-size: 35px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
    background-color: #4CAF50;
    text-decoration: none;
    margin-bottom: 15px;
}


/* Page Style */

.mejs__mediaelement{
    background: linear-gradient(45deg, #2196F3, #CDDC39);
}

.mejs__container{
    margin-top: 45px;
    display: inline-block;
}

.wrapper-mejs-audio-details{
    width: 90%;
    margin: 0 auto;
    direction: ltr;
}

#mejs-poster-audio{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 0 8px #3a3a3a;
    margin-top: 13px;
    display: inline-block;
    object-fit: cover;
}

.audio-playing{
    animation: scaledownup 3s infinite
}

.song-details , .song-details table{
    display: inline-block;
}

.song-details{
    margin-right: 70px;
    margin-top: 60px;
    float: right;
}

.song-details table{
    direction: rtl;
}


@keyframes scaledownup {
    0%{
        transform: scale(0.95);
        box-shadow: 0 0 8px #f44336;
    }

    50%{
        transform: scale(1);
        box-shadow: 0 0 25px #bcbe34;
    }

    100%{
        transform: scale(0.95);
        box-shadow: 0 0 8px #3a3a3a;
    }
  }




فایل app.js تنظیم رفتار موزیک پلیر


mejs.i18n.language("fa")

var player = new MediaElementPlayer('player', {

    audioWidth : 700,
    audioHeight : 200,

    success: function(mediaElement, originalNode, instance) {
        console.info("شروع پخش");
        const mediaElementDOM = document.getElementsByClassName("mejs__mediaelement")[0];

        const poster = originalNode.getAttribute("data-poster");
        const singer =  originalNode.getAttribute("data-singer");
        const songName =  originalNode.getAttribute("data-song-name");
        const album =  originalNode.getAttribute("data-album");

        let mediaElementHtml = mediaElementDOM.innerHTML;

        const songDetails = `<div class="song-details"><table><tbody><tr id="singer"><td>خواننده :</td><td>${singer}</td></tr><tr id="song-name"><td>نام آهنگ :</td><td>${songName}</td></tr><tr id="album-name"><td>نام آلبوم :</td><td>${album}</td></tr></tbody></table></div>`;

        mediaElementHtml = `<div class="wrapper-mejs-audio-details"><img id="mejs-poster-audio" src="${poster}">${songDetails}</div>` + mediaElementHtml;

        mediaElementDOM.innerHTML = mediaElementHtml;
        const thumbnailSongDOM = document.getElementById("mejs-poster-audio");
        

        mediaElement.addEventListener("playing" , function(){
            thumbnailSongDOM.classList.add("audio-playing");
        });

        mediaElement.addEventListener("pause" , function(){
            thumbnailSongDOM.classList.remove("audio-playing");
        });

    },
    
});



تست music player

دانلود برنامه music player

ارسال نظر

لیست نظرات

  1. سید علی
    سید علی

    دست شما درد نکنه خیلی کاربردی بود خیلی نکاتی که گفتید واقعا من نمیدونستم

    22 فروردین 1400 | 20:28:24