Mp3 Mp4 code Music player in website | كود مشغل mp3 html
How to add Music player in website or Blogger, Music player code,كود مشغل الموسيقى في مواقع ومدونه بلوجر،وضع اداة مشغل الموسيقى في مدونة بلوجر،mp4,mp3
ملفات الموسيقى كود <a href="song1.mp3">الأغنية 1</a> <a href="song2.mp3">الأغنية 2</a> ... ... ... يقدم مشغل الوسائط ياهو الى زوارك أيقونة صغيرة عوضاً عن مشغل كامل وعلى أي حال عند الضغط على الأيقونة ستظهر نافذة بحجم كامل
كيف how tto add ترفع ملفات الموسيقى
تصميم مشغل الموسيقى في موقعك، مدونة بلوجر
مرحبا بك في alrsooog.
إليك طريقه انشاء Music player في مدونك أو موقعك
قد تكون رأيت قبلا مشغل الموسيقى في مواقع ومدونات واحببت أن تجعل مثلها في موقعك اومدونتك إليك أكواد لتصميم مشغل الموسيقى.
أولا :
- اذهب الى مدونتك في بلوجر أو موقعك
- افتح التصميم (html)
- ابحث عن <skin/><[[ قبلها انسخ الكود التالي والصقه تحت أي style tag
الكود التالي :
CSS
/* Music player */.player-STLH{transform:translate(0%,0%);width:330px;height:500px;border-radius:15px;background-color:#fff;box-shadow:0 15px 20px 0 #dadada;}.player-STLH input[type=range]{-webkit-appearance:none!important;margin:0px;padding:0px;background:#e7e8ff;height:5px;width:150px;outline:none;cursor:pointer;overflow:hidden;border-radius:5px;}.player-STLH input[type=range]::-ms-fill-lower{background:#0505ff;opacity:.2}.player-STLH input[type=range]::-ms-fill-upper{background:#0505ff;opacity:.2}.player-STLH input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.player-STLH input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#0505ff;height:5px;width:5px;border-radius:50%;box-shadow:-100vw 0 0 100vw #0505ff;}.player-STLH input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.player-STLH input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.player-STLH .cover-PS{width:150px;height:150px;border-radius:50%;overflow:hidden;position:absolute;left:50%;top:50px;transform:translateX(-50%)}.player-STLH .cover-PS img{width:100%;height:100%;object-fit:cover-PS;}.player-STLH .info-MS{position:absolute;left:50%;top:240px;transform:translateX(-50%);text-align:center;}.player-STLH .info-MS .title-MS{font-size:20px;font-weight:700;margin-bottom:2px;}.player-STLH .info-MS .singer-MS{font-size:12px;}.player-STLH .btn-box{position:absolute;top:330px;width:100%;display:flex;justify-content:center;}.player-STLH .btn-box i{font-size:24px;color:#72646f;margin:0 30px;cursor:pointer;}.player-STLH .btn-box i.active{color:#0505ff;}.player-STLH .volume-box{display:none;position:absolute;left:50%;top:295px;transform:translateX(-50%);z-index:1;padding:0 20px;}.player-STLH .volume-box .volume-down{position:absolute;left:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.player-STLH .volume-box .volume-up{position:absolute;right:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.player-STLH .volume-box .volume-up::selection{background-color:unset;}.player-STLH .volume-box input[type=range]{height:5px;width:150px;margin:0 0 15px 0;}.player-STLH .volume-box.active{display:block;}.player-STLH .music-box{position:absolute;left:50%;top:385px;transform:translateX(-50%);}.player-STLH .music-box input[type=range]{height:5px;width:230px;margin:0 0 10px 0;}.player-STLH .music-box input[type=range]::-webkit-slider-thumb{height:5px;width:7px;}.player-STLH .music-box .current-time{position:absolute;left:-35px;top:50%;transform:translateY(-50%);font-size:12px}.player-STLH .music-box .duration{position:absolute;right:-35px;top:50%;transform:translateY(-50%);font-size:12px}.player-STLH .music-box .play,.player-STLH .music-box .pause{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:50px;height:50px;border-radius:50px;background-color:#0505ff;cursor:pointer;transition:all 0.4s;}.player-STLH .music-box .play i,.player-STLH .music-box .pause i{font-size:36px;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-48%,-50%);}.player-STLH .music-box .pause i{font-size:32px;transform:translate(-50%,-50%);}.drK .player-STLH{background:#2d2d30; box-shadow:none} .drK .player-STLH .music-box .play,.drK .player-STLH .music-box .pause {background-color:#5442f5}.drK.player-STLH input[type=range]::-ms-fill-lower{background:#5442f5;opacity:.2}.drK .player-STLH input[type=range]::-ms-fill-upper{background:#5442f5;opacity:.2}.drK .player-STLH input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.drK .player-STLH input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#0505ff);height:5px;width:5px;border-radius:50%;box-shadow:-100vw 0 0 100vw #0505ff;}.drK.player-STLH input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK.player-STLH input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK .player-STLH .btn-box i.active{color:#0505ff;}.drK.player-STLH input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}
ثانيا :
- ابحث عن <body />الكود التالي الصقه قوف له
الكود التالي :
JS
<script>/*<![CDATA[*//* Music Player (alrsooog World) */var music=document.querySelector(".music-element"),playBtn=document.querySelector(".play"),seekbar=document.querySelector(".seekbar"),currentTime=document.querySelector(".current-time"),duration=document.querySelector(".duration");function handlePlay(){music.paused?(music.play(),playBtn.className="pause",playBtn.innerHTML='<i class="material-icons">pause</i>'):(music.pause(),playBtn.className="play",playBtn.innerHTML='<i class="material-icons">play_arrow</i>'),music.addEventListener("ended",function(){playBtn.className="play",playBtn.innerHTML='<i class="material-icons">play_arrow</i>',music.currentTime=0})}music.onloadeddata=function(){seekbar.max=music.duration;var e=parseInt(music.duration%60),n=parseInt(music.duration/60%60);duration.innerHTML=n+":"+e},music.ontimeupdate=function(){seekbar.value=music.currentTime},handleSeekBar=function(){music.currentTime=seekbar.value},music.addEventListener("timeupdate",function(){var e=parseInt(music.currentTime%60),n=parseInt(music.currentTime/60%60);currentTime.innerHTML=n+":"+e},!1);var favIcon=document.querySelector(".favorite");function handleFavorite(){favIcon.classList.toggle("active")}var repIcon=document.querySelector(".repeat");function handleRepeat(){1==music.loop?(music.loop=!1,repIcon.classList.toggle("active")):(music.loop=!0,repIcon.classList.toggle("active"))}var volIcon=document.querySelector(".volume"),volBox=document.querySelector(".volume-box"),volumeRange=document.querySelector(".volume-range"),volumeDown=document.querySelector(".volume-down"),volumeUp=document.querySelector(".volume-up");function handleVolume(){volIcon.classList.toggle("active"),volBox.classList.toggle("active")}function handleVolumeDown(){volumeRange.value=Number(volumeRange.value)-20,music.volume=volumeRange.value/100}function handleVolumeUp(){volumeRange.value=Number(volumeRange.value)+20,music.volume=volumeRange.value/100}volumeDown.addEventListener("click",handleVolumeDown),volumeUp.addEventListener("click",handleVolumeUp);/*]]>*/</script>
- بعدها اعمل حفظ للقالب (html)
- واذهب إلى post /page الذي أنت تريد وضع مشغل الموسيقى فيه Music player
- وتأكد جيداً انك حذف كل الأكواد التي في الصفحة أو البوست(post /page(html علشان تضع كود التالي فيه لتشغيل الموسيقى والصقه في في html الصفحة أو البوست.
- مبروك عليك Music player in your Blogger or website.
الكود التالي :
HTML
<div align="center"> <div class="player-STLH"> <div class="cover-PS"> <img alt="alt_here" src="add_image_here" title="title_here"> </div> <div class="info-MS"> <div class="title-MS">song_title_here</div> <div class="singer-MS">creator_name_here</div> </div> <div class="volume-box"> <span class="volume-down"><i class="material-icons">remove</i></span> <input type="range" class="volume-range" step="1" value="80" min="0" max="100" oninput="music.volume = this.value/100"> <span class="volume-up"><i class="material-icons">add</i></span> </div> <div class="btn-box"> <i class="material-icons repeat" onclick="handleRepeat()">repeat</i> <i class="material-icons favorite active" onclick="handleFavorite()">favorite</i> <i class="material-icons volume" onclick="handleVolume()">volume_up</i> </div> <div class="music-box"> <input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="handleSeekBar()"> <audio class="music-element"> <source src="song_src_here"> </audio> <span class="current-time">0:0</span><span class="duration">0:0</span> <span class="play" onclick="handlePlay()"> <i class="material-icons">play_arrow</i> </span> </div> </div> </div> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
الانضمام إلى المحادثة