السلام عليكم ورحمة الله تعالى وبركاته .
فى حلقة اليوم نتعرف معكم على إضافة جديده ان شاء الله وهى اضافة مشغل الموسيقي للمدونات
تعريف الاضافة
هى عبارة عن اضافة من خلالها يمكن للمستخدم تشغيل الموسيقي و تشغيل اى الملفات او حتى التسجيلات الصوتيه او اى شئ يريده المصمم
ايضا من خلالها يمكن عمل موسيقي ثابتها و اى شي معين
وايضا الكثير من الاضافات المخصصه لبلوجر . لم تتمكن من اضافة تلك المميزات و تلك الاضافات مثل هذه الاضافه و اضافة المويسقي حصريه عندنا فقط وليس اى موقع
معاينة الاضافة
طريقة تركيب الاضافة
الان نتعرف معكمعلى طريقة تركيب اضافة مشغر الموسيقي لمدونات بلوجر واى قالب من القوالب
- نقوم بالذهاب الى بلوجر
- بعدها نقوم بالذهاب الى المظهر
- نختار السهم لاسفل ثم نختار تعديل html
ثم نقوم بوضع هذا الكود فى منطقة b:skin
.music-box{max-width:300px;width:100%;padding:10px;overflow:hidden;position:relative;background:#fff;box-shadow:0 6px 15px 0 12px 25px 0 rgb(30 30 30 / 4%)}
.music-box i{cursor:pointer}
.top-bar,.progress-area .song-timer,.music-list .header-music,.music-list ul li{display:flex;align-items:center;justify-content:space-between}
.controls{display:flex;align-items:center;justify-content:space-evenly}
.top-bar span{font-size:16px;margin-left:-3px;color:#555}
.img-area{width:185px;height:185px;position:relative;overflow:hidden;margin:15px auto 0;border:5px solid #fff;border-radius:50%;box-shadow:0 6px 12px rgba(0,0,0,0.09)}
.img-area:before{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%, -50%);background-color:#d6dee7;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;z-index:2}
.img-area img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.music-box.paused .img-area img{animation: rotateAlbumArt 3s linear 0s infinite forwards}
.song-details{text-align:center;margin:20px 0}
.song-details p{color:#666}
.song-details .name{font-size:16px}
.song-details .artist{font-size:13px;opacity:.9;line-height:35px}
.progress-area{height:10px;width:100%;border-radius:50px;background:#f0f0f0;cursor:pointer}
.progress-area .progress-bar{height:inherit;width:0;position:relative;border-radius:inherit;background:linear-gradient(90deg,#7577a9 0%,#66689c 100%)}
.progress-area .song-timer{margin-top:5px}
.song-timer span{font-size:13px;color:#666}
.controls{margin:30px 0 20px}
.controls .play-pause{height:30px;width:30px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:50%;background:#fff}
.play-pause::before{position:absolute;content:"";height:30px;width:30px;border-radius:inherit;background:linear-gradient(#7577a9 0%,#66689c 100%)}
.play-pause i{position:absolute}
.music-list{position:absolute;background:#fff;width:100%;left:0;bottom:-55%;opacity:0;pointer-events:none;z-index:5;padding:15px 30px;box-shadow:0 -5px 10px rgba(0,0,0,0.05);transition:all .15s ease-out}
#repeat-plist > span{display:none}
.music-list.show{bottom:0;opacity:1;pointer-events:auto}
.header-music .row-music{display:flex;align-items:center;font-size:19px}
.header-music .row-music i{cursor:default}
.header-music .row-music span{margin-left:5px;font-size:15px;color:#666666}
.music-list ul{margin:10px 0!important;max-height:260px;overflow:auto}
.music-list ul::-webkit-scrollbar{width:0}
.music-list ul li{list-style:none;display:flex;cursor:pointer;padding-bottom:10px;margin-bottom:10px;color:#666;border-bottom:1px solid #E5E5E5}
.music-list ul li:last-child{border-bottom:0}
.music-list ul li .row span{font-size:15px}
.music-list ul li .row p{opacity:.9;font-size:13px;margin-top:5px}
ul li .audio-duration{font-size:13px}
ul li.playing{pointer-events:none;color:#66689c}
.slider_volumn{display:flex;justify-content:center;align-items:center}
.volume_slider{height:10px;width:100%;border-radius:50px;background:#f0f0f0;cursor:pointer;padding:0;overflow:hidden; -webkit-transition: .2s;transition: opacity .2s;-webkit-appearance:none}
.volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width: 10px;height: 10px;background:#66689c;cursor: pointer;border-radius:0 50% 50% 0;box-shadow:-350px 0px 0px 340px #66689c}
.volume_slider::-moz-range-thumb {width:10px;height:10px;background:#66689c;cursor:pointer}
@keyframes rotateAlbumArt{0%{ transform: rotateZ(0)}100%{ transform: rotateZ(360deg)}}
.has-svg-icon:before{background-size:100%;content:"";display:inline-block;vertical-align:middle}
.music-more:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-horiz:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-play:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E%0A");width:23px;height:23px}
.music-pause:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E%0A");width:23px;height:23px}
.music-skippre:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 6h2v12H6zm3.5 6l8.5 6V6z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-skipnext:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-repeat:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-repeatone:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z'/%3E%3C/svg%3E ");width:20px;height:20px}
.music-shuffle:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-queue:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M15,6H3v2h12V6z M15,10H3v2h12V10z M3,16h8v-2H3V16z M17,6v8.18C16.69,14.07,16.35,14,16,14c-1.66,0-3,1.34-3,3s1.34,3,3,3 s3-1.34,3-3V8h3V6H17z'/%3E%3C/g%3E%3C/svg%3E%0A");width:20px;height:20px}
.music-queuemenu:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M15,6H3v2h12V6z M15,10H3v2h12V10z M3,16h8v-2H3V16z M17,6v8.18C16.69,14.07,16.35,14,16,14c-1.66,0-3,1.34-3,3s1.34,3,3,3 s3-1.34,3-3V8h3V6H17z'/%3E%3C/g%3E%3C/svg%3E%0A");width:20px;height:23px}
.music-close:before{background-image: url("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'/%3E%3C/svg%3E");width:11px;height:11px}
.icon-volume-up:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
.icon-volume-down:before{background-image: url("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z'/%3E%3C/svg%3E%0A");width:20px;height:20px}
بعد اضافة هذا الكود نقوم بالبحث على /body
بعدها نقوم بإضافة هذا الكود
<!--[ Main js ]-->
<script>
/*<![CDATA[*/
const wrapper=document.querySelector(".music-box"),musicImg=wrapper.querySelector(".img-area img"),musicName=wrapper.querySelector(".song-details .name"),musicArtist=wrapper.querySelector(".song-details .artist"),playPauseBtn=wrapper.querySelector(".play-pause"),prevBtn=wrapper.querySelector("#prev"),nextBtn=wrapper.querySelector("#next"),mainAudio=wrapper.querySelector("#main-audio"),progressArea=wrapper.querySelector(".progress-area"),progressBar=progressArea.querySelector(".progress-bar"),musicList=wrapper.querySelector(".music-list"),moreMusicBtn=wrapper.querySelector("#more-music"),closemoreMusic=musicList.querySelector("#close"),volumeslider=wrapper.querySelector(".volume_slider"),maxvolum=wrapper.querySelector("#max-volume"),minvolum=wrapper.querySelector("#min-volume");let musicIndex=Math.floor(Math.random()*allMusic.length+1);function loadMusic(e){musicName.innerText=allMusic[e-1].name,musicArtist.innerText=allMusic[e-1].artist,musicImg.alt=allMusic[e-1].artist,musicImg.title=allMusic[e-1].artist,musicImg.src=allMusic[e-1].img,mainAudio.src=allMusic[e-1].src}function playMusic(){wrapper.classList.add("paused"),playPauseBtn.querySelector("i").classList.remove("music-play"),playPauseBtn.querySelector("i").classList.add("music-pause"),mainAudio.play()}function pauseMusic(){wrapper.classList.remove("paused"),playPauseBtn.querySelector("i").classList.remove("music-pause"),playPauseBtn.querySelector("i").classList.add("music-play"),mainAudio.pause()}function prevMusic(){musicIndex--,musicIndex<1&&(musicIndex=allMusic.length),loadMusic(musicIndex),playMusic(),playingSong()}function nextMusic(){musicIndex++,musicIndex>allMusic.length&&(musicIndex=1),loadMusic(musicIndex),playMusic(),playingSong()}isMusicPaused=!0,curr_track=mainAudio,window.addEventListener("load",(()=>{loadMusic(musicIndex),playingSong()})),playPauseBtn.addEventListener("click",(()=>{wrapper.classList.contains("paused")?pauseMusic():playMusic(),playingSong()})),prevBtn.addEventListener("click",(()=>{prevMusic()})),nextBtn.addEventListener("click",(()=>{nextMusic()})),mainAudio.addEventListener("timeupdate",(e=>{const t=e.target.currentTime;let r=t/e.target.duration*100;progressBar.style.width=`${r}%`;let i=wrapper.querySelector(".current-time"),a=wrapper.querySelector(".max-duration");mainAudio.addEventListener("loadeddata",(()=>{let e=mainAudio.duration,t=Math.floor(e/60),r=Math.floor(e%60);r<10&&(r=`0${r}`),a.innerText=` ${t} : ${r} `}));let s=Math.floor(t/60),l=Math.floor(t%60);l<10&&(l=`0${l}`),i.innerText=`${s}:${l}`})),progressArea.addEventListener("click",(e=>{let t=progressArea.clientWidth,r=e.offsetX,i=mainAudio.duration;mainAudio.currentTime=r/t*i,playMusic(),playingSong()}));const repeatBtn=wrapper.querySelector("#repeat-plist span");wrapper.querySelector("#repeat-plist").addEventListener("click",(()=>{switch(repeatBtn.innerText){case"repeat":repeatBtn.innerText="repeat_one",wrapper.querySelector("#repeat-plist").classList.toggle("music-repeat"),wrapper.querySelector("#repeat-plist").classList.toggle("music-repeatone"),wrapper.querySelector("#repeat-plist").setAttribute("title","Song looped");break;case"repeat_one":repeatBtn.innerText="shuffle",wrapper.querySelector("#repeat-plist").classList.toggle("music-repeatone"),wrapper.querySelector("#repeat-plist").classList.toggle("music-shuffle"),wrapper.querySelector("#repeat-plist").setAttribute("title","Playback shuffled");break;case"shuffle":repeatBtn.innerText="repeat",wrapper.querySelector("#repeat-plist").classList.toggle("music-shuffle"),wrapper.querySelector("#repeat-plist").classList.toggle("music-repeat"),wrapper.querySelector("#repeat-plist").setAttribute("title","Playlist looped")}})),mainAudio.addEventListener("ended",(()=>{switch(repeatBtn.innerText){case"repeat":nextMusic();break;case"repeat_one":mainAudio.currentTime=0,loadMusic(musicIndex),playMusic();break;case"shuffle":let e=Math.floor(Math.random()*allMusic.length+1);do{e=Math.floor(Math.random()*allMusic.length+1)}while(musicIndex==e);musicIndex=e,loadMusic(musicIndex),playMusic(),playingSong()}})),moreMusicBtn.addEventListener("click",(()=>{musicList.classList.toggle("show")})),closemoreMusic.addEventListener("click",(()=>{moreMusicBtn.click()}));const ulTag=wrapper.querySelector("ul");for(let e=0;e<allMusic.length;e++){let t=`<li li-index="${e+1}">\n <div class="row">\n <span>${allMusic[e].name}</span>\n <p>${allMusic[e].artist}</p>\n </div>\n <span id="${allMusic[e].id}" class="audio-duration">3:40</span>\n <audio class="${allMusic[e].id}" src="${allMusic[e].src}"></audio>\n </li>`;ulTag.insertAdjacentHTML("beforeend",t);let r=ulTag.querySelector(`#${allMusic[e].id}`),i=ulTag.querySelector(`.${allMusic[e].id}`);i.addEventListener("loadeddata",(()=>{let e=i.duration,t=Math.floor(e/60),a=Math.floor(e%60);a<10&&(a=`0${a}`),r.innerText=` ${t} : ${a} `,r.setAttribute("t-duration",`${t}:${a}`)}))}function playingSong(){const e=ulTag.querySelectorAll("li");for(let t=0;t<e.length;t++){let r=e[t].querySelector(".audio-duration");if(e[t].classList.contains("playing")){e[t].classList.remove("playing");let i=r.getAttribute("t-duration");r.innerText=i}e[t].getAttribute("li-index")==musicIndex&&(e[t].classList.add("playing"),r.innerText="Playing"),e[t].setAttribute("onclick","clicked(this)")}}function clicked(e){let t=e.getAttribute("li-index");musicIndex=t,loadMusic(musicIndex),playMusic(),playingSong()}function setVolume(){curr_track.volume=volumeslider.value/100}maxvolum.addEventListener("click",(()=>{curr_track.volume=1,volumeslider.value=100})),minvolum.addEventListener("click",(()=>{curr_track.volume=.01,volumeslider.value=0}));
/*]]>*/</script>
الان وصلنا لطريقة اضهار الاضافة الخاصه بمشغل الموسيقي فى المقالات مثل الاعلى
فى كل مرة ستريد اضافتها ستضيف الكود التالى فى المكان الذى تريد ان تظهر فيه الاضافة مثل التى فى الاعلى
<div class='music-box'>
<div class='top-bar'>
<i class='has-svg-icon music-more'></i>
<span>Now Playing</span>
<i class='has-svg-icon music-horiz'></i>
</div>
<div class='img-area'>
<img alt='' loading='lazy' src='' title='' />
</div>
<div class='song-details'>
<p class='name'></p>
<p class='artist'></p>
</div>
<div class='progress-area'>
<div class='progress-bar'>
<audio id='main-audio' src=''></audio>
</div>
<div class='song-timer'>
<span class='current-time'>0:00</span>
<span class='max-duration'>0:00</span>
</div>
</div>
<div class='controls'>
<i class='has-svg-icon music-repeat' id='repeat-plist' title='Playlist looped'><span>repeat</span></i>
<i class='has-svg-icon music-skippre' id='prev'></i>
<div class='play-pause'>
<i class='has-svg-icon music-play play'></i>
</div>
<i class='has-svg-icon music-skipnext' id='next'></i>
<i class='has-svg-icon music-queue' id='more-music'></i>
</div>
<div class='slider_volumn'>
<i class='has-svg-icon icon-volume-down' id='min-volume'></i>
<input class='volume_slider' max='100' min='1' onchange='setVolume()' type='range' value='100' />
<i class='has-svg-icon icon-volume-up' id='max-volume'></i>
</div>
<div class='music-list'>
<div class='header-music'>
<div class='row-music'>
<i class='has-svg-icon list music-queuemenu'></i>
<span>Music list</span>
</div>
<i class='has-svg-icon music-close' id='close'></i>
</div>
<ul>
</ul>
</div>
</div>
<!--[ Main js ]-->
<script>
/*<![CDATA[*/
let allMusic = [
{
name: "اسم المشغل",
artist: "اسم المغنى",
img: "صورة للمغنى ",
src: "رابط الاغنية",
id: "m1"
}
];
/*]]>*/</script>
الان بعد ان وضعت هذا الكود فى المكان المراد ان تظهر فيه الاضافة
ماعليك سوى تعديل بعض الاشياء
- فى خانة Name تقوم يتغير اسم الشئ الذى سوف يتم تشغيله
- فى خانة artist تقوم يتغير اسم المغنى
- فى خانة img تقوم يتغير الصورة المعروضه
- فى خانة src تقوم بوضع مسار الاغنيه او الرابط الخاص بالشى الذى سيتم تشغيله لكن شرط ان يكون امتداده mp3
والى هنا احبابي فى الله قد وصلنا للنهاية الرجاء مشاركة المنشور لكى نستمر فى نشر الاضافات الحصريه