كيفية إضافة مشغل صوت Mp3 مع قائمة تشغيل في بلوجر

يعتبر إضافة مشغل صوت Mp3 إلى مدونتك على Blogger خطوة رائعة لزيادة تفاعل الزوار وتحسين تجربة المستخدم. تعرف في هذا المقال على كيفية تنفيذ ذلك بأبسط الطرق باستخدام HTML، CSS، وJavaScript.

كود مشغل صوت Mp3 مع قائمة تشغيل

إذا كنت ترغب في إضافة لمسة جمالية إلى مدونتك على بلوجر وجعلها أكثر جاذبية لزوارك، فإن إضافة مشغل صوت مع قائمة تشغيل قد يكون الحل المثالي. في هذا المقال، سنتعلم خطوة بخطوة كيفية إضافة مشغل صوت (Audio Player) باستخدام HTML وCSS وJavaScript. سنركز على الجوانب الأساسية لجعل المدونة أكثر تفاعلاً.

كيفية إضافة مشغل صوت Mp3 في مدونة بلوجر (Blogger)

إذا كنت ترغب في إضافة مشغل صوت HTML إلى مدونة Blogger الخاصة بك مع ميزة قائمة التشغيل، فاتبع الخطوات الموضحة أدناه:

1. أولاً، قم بتحميل ملفات MP3 الخاصة بك إلى خدمة تخزين سحابي.
2. الانتقال إلى لوحة تحكم المدونة وفتح منشور المدونة الذي تريد إضافة مشغل الصوت إليه.
3. الانتقال إلى عرض HTML ولصق الكود أدناه.
4. في data-src، قم بلصق عنوان URL لملف الصوت.
5. لإضافة صورة الغلاف، يمكنك استخدام data-cover="Image_URL" في عنصر القائمة.

الآن، قم بتعديل عنوان URL لملف الصوت واسم الملف الصوتي والوصف وصورة الغلاف حسب رغبتك. يمكنك أيضًا تخصيص المشغل ليناسب تخطيط موقع الويب الخاصة بك.

بعد ذلك، احفظ الكود. بعد هذه الخطوات، ستكون قد أضفت بنجاح كود مشغل صوت MP3 مع خيارات قائمة التشغيل، وسيتمكن المستخدمون من التبديل بين المقاطع من القائمة.

إذا كنت تبحث عن طريقة لجعل مدونتك أكثر تفاعلية وجذابة، فإليك كيفية إضافة مشغل صوت (Mp3 Audio player) مع قائمة تشغيل في مدونتك على Blogger باستخدام تقنيات HTML، CSS، وJavaScript.

كود مشغل صوت Mp3 باستخدام HTML

ابدأ بإنشاء ملف HTML جديد وأضف الهيكل الأساسي لمشغل الصوت. يمكنك استخدام العناصر الأساسية، وكما شرحنا في الأعلى قم بوضع رابط مقطع الصوت مكان URl-Mp3، وايضاً اسم المقطع والوصف والصورة.

<div class="Multi-audio-player" id="simp" data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'>
  <div class="Audio-playlist">
    <ul>
       <li><span class="Audio_source" data-src="URl-Mp3">اسم مقطع الصوت</span><span class="Audio_description">وصف</span></li>      
       <li><span class="Audio_source" data-src="URl-Mp3" data-cover="صورة مطع الصوت">اسم مقطع الصوت</span><span class="Audio_description">وصف</span></li>
       <li><span class="Audio_source" data-src="URl-Mp3" data-cover="صورة مطع الصوت">اسم مقطع الصوت</span><span class="Audio_description">وصف</span></li>
       <li><span class="Audio_source" data-src="URl-Mp3" data-cover="صورة مطع الصوت">اسم مقطع الصوت</span><span class="Audio_description">وصف</span></li>
       <li><span class="Audio_source" data-src="URl-Mp3" data-cover="صورة مطع الصوت">اسم مقطع الصوت</span><span class="Audio_description">وصف</span></li>
       <li><span class="Audio_source" data-src="URl-Mp3" data-cover="صورة مطع الصوت">اسم مقطع الصوت</span><span class="Audio_description">وصف</span></li>
    </ul>
  </div>
</div> 

كود مشغل صوت باستخدام باستخدام CSS

بعد إنشاء الهيكل الأساسي، يمكنك البدء في تصميم المشغل باستخدام CSS. اجعل المشغل متناسقًا مع تصميم مدونتك باستخدام الألوان والخطوط المناسبة. يمكنك تخصيص الكود حسب رغبتك.

<style>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:800px; font-size:14px;font-family:"System-ui", sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .Audio_album{padding:20px 25px 5px;}
#simp .Audio_album .simp-cover{margin-right:20px;}
#simp .Audio_album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .Audio_album .simp-title{font-size:120%;font-weight:bold;}
#simp .Audio_album .simp-artist{font-size:90%;color:#6c7883;}
#simp .Audio_controls{padding:15px;}
#simp .Audio_controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .Audio_controls button[disabled]{color:#636469;cursor:initial;}
#simp .Audio_controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .Audio_controls .simp-prev,#simp .Audio_controls .simp-next{font-size:100%;}
#simp .Audio_controls .simp-tracker,#simp .Audio_controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .Audio_controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .Audio_controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .Audio_controls .simp-time,#simp .Audio_controls .simp-others{margin-left:10px;}
#simp .Audio_controls .simp-volume{max-width:110px;}
#simp .Audio_controls .simp-volume .simp-mute{margin-right:5px;}
#simp .Audio_controls .simp-others .simp-active{background:#242f3d;}
#simp .Audio_controls .simp-others .simp-shide button{font-size:100%;padding:0;width:30px;height:20px;display:block;}
#simp .Audio_controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .Audio_controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .Audio_controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .Audio_controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .Audio_controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#FC2C45;color:#fff;}
#simp ul li .Audio_description{font-size:90%;opacity:.5;margin-left:5px;}
#simp ul{overflow-y:auto;overflow-x:hidden; scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
@media screen and (max-width:480px) {
#simp .Audio_controls .simp-volume,#simp .Audio_controls .simp-others{display:none;}
#simp .Audio_controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}
</style>

كود JavaScript لمشغل صوت Mp3

الآن، سنضيف JavaScript لتفعيل المشغل. سنقوم بكتابة أكواد JavaScript للتحكم في تشغيل وإيقاف مقاطع الصوت، وتغيير المقطع في قائمة التشغيل.

<script>
function addEventListener_multi(element, eventNames, handler) {
  var events = eventNames.split(' ');
  events.forEach(e => element.addEventListener(e, handler, false));
}

function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRelativePos(elm) {
  var pPos = elm.parentNode.getBoundingClientRect();
  var cPos = elm.getBoundingClientRect(); 
  var pos = {};

  pos.top    = cPos.top    - pPos.top + elm.parentNode.scrollTop,
  pos.right  = cPos.right  - pPos.right,
  pos.bottom = cPos.bottom - pPos.bottom,
  pos.left   = cPos.left   - pPos.left;

  return pos;
}

function formatTime(val) {
  var h = 0, m = 0, s;
  val = parseInt(val, 10);
  if (val > 60 * 60) {
   h = parseInt(val / (60 * 60), 10);
   val -= h * 60 * 60;
  }
  if (val > 60) {
   m = parseInt(val / 60, 10);
   val -= m * 60;
  }
  s = val;
  val = (h > 0)? h + ':' : '';
  val += (m > 0)? ((m < 10 && h > 0)? '0' : '') + m + ':' : '0:';
  val += ((s < 10)? '0' : '') + s;
  return val;
}

function simp_initTime() {
  simp_controls.querySelector('.start-time').innerHTML = formatTime(simp_audio.currentTime); 
  if (!simp_isStream) {
    simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration); 
    simp_progress.value = simp_audio.currentTime / simp_audio.duration * 100; 
  }
  
  if (simp_audio.currentTime == simp_audio.duration) {
    simp_controls.querySelector('.simp-plause').classList.remove('fa-pause');
    simp_controls.querySelector('.simp-plause').classList.add('fa-play');
    simp_audio.removeEventListener('timeupdate', simp_initTime);
    
    if (simp_isNext) { 
      var elem;
      simp_a_index++;
      if (simp_a_index == simp_a_url.length) { 
        simp_a_index = 0;
        elem = simp_a_url[0];
      } else {
        elem = simp_a_url[simp_a_index];  
      }
      simp_changeAudio(elem);
      simp_setAlbum(simp_a_index);
    } else {
      simp_isPlaying = false;
    }
  }
}

function simp_initAudio() {
	simp_isLoaded = simp_audio.readyState == 4 ? true : false;
  simp_isStream = simp_audio.duration == 'Infinity' ? true : false;
  simp_controls.querySelector('.simp-plause').disabled = false;
  simp_progress.disabled = simp_isStream ? true : false;
  if (!simp_isStream) {
    simp_progress.parentNode.classList.remove('simp-load','simp-loading');
    simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
  }
  simp_audio.addEventListener('timeupdate', simp_initTime); //tracking load progress
  if (simp_isLoaded && simp_isPlaying) simp_audio.play();
  
  addEventListener_multi(simp_progress, 'touchstart mousedown', function(e) {
    if (simp_isStream) {
      e.stopPropagation();
      return false;
    }
    if (simp_audio.readyState == 4) {
      simp_audio.removeEventListener('timeupdate', simp_initTime);
      simp_audio.pause();
    }
  });
  
  addEventListener_multi(simp_progress, 'touchend mouseup', function(e) {
    if (simp_isStream) {
      e.stopPropagation();
      return false;
    }
    if (simp_audio.readyState == 4) {
      simp_audio.currentTime = simp_progress.value * simp_audio.duration / 100;
      simp_audio.addEventListener('timeupdate', simp_initTime);
      if (simp_isPlaying) simp_audio.play();
    }
  });
}

function simp_loadAudio(elem) {
  simp_progress.parentNode.classList.add('simp-loading');
  simp_controls.querySelector('.simp-plause').disabled = true;
  simp_audio.querySelector('source').src = elem.dataset.src;
  simp_audio.load();
  
  simp_audio.volume = parseFloat(simp_v_num / 100); 
  simp_audio.addEventListener('canplaythrough', simp_initAudio);
  
  simp_audio.addEventListener('error', function() {
    alert('Please reload the page.');
  });
}

function simp_setAlbum(index) {
  simp_cover.innerHTML = simp_a_url[index].dataset.cover ? '<div style="background:url(' + simp_a_url[index].dataset.cover + ') no-repeat;background-size:cover;width:80px;height:80px;"></div>' : '<i class="fa fa-music fa-5x"></i>';
  simp_title.innerHTML = simp_source[index].querySelector('.Audio_source').innerHTML;
  simp_artist.innerHTML = simp_source[index].querySelector('.Audio_description') ? simp_source[index].querySelector('.Audio_description').innerHTML : '';
}

function simp_changeAudio(elem) {
	simp_isLoaded = false;
  simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false;
  simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false;
  simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length-1 ? true : false;
  simp_progress.parentNode.classList.add('simp-load');
  simp_progress.disabled = true;
  simp_progress.value = 0;
  simp_controls.querySelector('.start-time').innerHTML = '00:00';
  simp_controls.querySelector('.end-time').innerHTML = '00:00';
  elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length-1)] : elem;
  
  for (var i = 0; i < simp_a_url.length; i++) {
    simp_a_url[i].parentNode.classList.remove('simp-active');
    if (simp_a_url[i] == elem) {
      simp_a_index = i;
      simp_a_url[i].parentNode.classList.add('simp-active');
    }
  }
  
  var simp_active = getRelativePos(simp_source[simp_a_index]);
  simp_source[simp_a_index].parentNode.scrollTop = simp_active.top;
  
  if (simp_auto_load || simp_isPlaying) simp_loadAudio(elem);
  
  if (simp_isPlaying) {
    simp_controls.querySelector('.simp-plause').classList.remove('fa-play');
    simp_controls.querySelector('.simp-plause').classList.add('fa-pause');
  }
}

function simp_startScript() {
  ap_simp = document.querySelector('#simp');
  simp_audio = ap_simp.querySelector('#audio');
  simp_album = ap_simp.querySelector('.Audio_album');
  simp_cover = simp_album.querySelector('.simp-cover');
  simp_title = simp_album.querySelector('.simp-title');
  simp_artist = simp_album.querySelector('.simp-artist');
  simp_controls = ap_simp.querySelector('.Audio_controls');
  simp_progress = simp_controls.querySelector('.simp-progress');
  simp_volume = simp_controls.querySelector('.simp-volume');
  simp_v_slider = simp_volume.querySelector('.simp-v-slider');
  simp_v_num = simp_v_slider.value; 
  simp_others = simp_controls.querySelector('.simp-others');
  simp_auto_load = simp_config.auto_load; 
  
  if (simp_config.shide_top) simp_album.parentNode.classList.toggle('simp-hide');
  if (simp_config.shide_btm) {
    simp_playlist.classList.add('simp-display');
    simp_playlist.classList.toggle('simp-hide');
  }
  
  if (simp_a_url.length <= 1) {
    simp_controls.querySelector('.simp-prev').style.display = 'none';
    simp_controls.querySelector('.simp-next').style.display = 'none';
    simp_others.querySelector('.simp-plext').style.display = 'none';
    simp_others.querySelector('.simp-random').style.display = 'none';
  }
  simp_source.forEach(function(item, index) {
    if (item.classList.contains('simp-active')) simp_a_index = index; 
    item.addEventListener('click', function() {
      simp_audio.removeEventListener('timeupdate', simp_initTime);
      simp_a_index = index;
      simp_changeAudio(this.querySelector('.Audio_source'));
      simp_setAlbum(simp_a_index);
    });
  });
  
  simp_changeAudio(simp_a_url[simp_a_index]);
  simp_setAlbum(simp_a_index);
  
  simp_controls.querySelector('.simp-plauseward').addEventListener('click', function(e) {
    var eles = e.target.classList;
    if (eles.contains('simp-plause')) {
      if (simp_audio.paused) {
        if (!simp_isLoaded) simp_loadAudio(simp_a_url[simp_a_index]);
        simp_audio.play();
        simp_isPlaying = true;
        eles.remove('fa-play');
        eles.add('fa-pause');
      } else {
        simp_audio.pause();
        simp_isPlaying = false;
        eles.remove('fa-pause');
        eles.add('fa-play');
      }
    } else {
      if (eles.contains('simp-prev') && simp_a_index != 0) {
        simp_a_index = simp_a_index-1;
        e.target.disabled = simp_a_index == 0 ? true : false;
      } else if (eles.contains('simp-next') && simp_a_index != simp_a_url.length-1) {
        simp_a_index = simp_a_index+1;
        e.target.disabled = simp_a_index == simp_a_url.length-1 ? true : false;
      }
      simp_audio.removeEventListener('timeupdate', simp_initTime);
      simp_changeAudio(simp_a_url[simp_a_index]);
      simp_setAlbum(simp_a_index);
    }
  });
  
  simp_volume.addEventListener('click', function(e) {
    var eles = e.target.classList;
    if (eles.contains('simp-mute')) {
      if (eles.contains('fa-volume-up')) {
        eles.remove('fa-volume-up');
        eles.add('fa-volume-off');
        simp_v_slider.value = 0;
      } else {
        eles.remove('fa-volume-off');
        eles.add('fa-volume-up');
        simp_v_slider.value = simp_v_num;
      }
    } else {
      simp_v_num = simp_v_slider.value;
      if (simp_v_num != 0) {
        simp_controls.querySelector('.simp-mute').classList.remove('fa-volume-off');
        simp_controls.querySelector('.simp-mute').classList.add('fa-volume-up');
      }
    }
    simp_audio.volume = parseFloat(simp_v_slider.value / 100);
  });
  
  simp_others.addEventListener('click', function(e) {
    var eles = e.target.classList;
    if (eles.contains('simp-plext')) {
      simp_isNext = simp_isNext && !simp_isRandom ? false : true;
      if (!simp_isRandom) simp_isRanext = simp_isRanext ? false : true;
      eles.contains('simp-active') && !simp_isRandom ? eles.remove('simp-active') : eles.add('simp-active');
    } else if (eles.contains('simp-random')) {
      simp_isRandom = simp_isRandom ? false : true;
      if (simp_isNext && !simp_isRanext) {
        simp_isNext = false;
        simp_others.querySelector('.simp-plext').classList.remove('simp-active');
      } else {
        simp_isNext = true;
        simp_others.querySelector('.simp-plext').classList.add('simp-active');
      }
      eles.contains('simp-active') ? eles.remove('simp-active') : eles.add('simp-active');
    } else if (eles.contains('simp-shide-top')) {
      simp_album.parentNode.classList.toggle('simp-hide');
    } else if (eles.contains('simp-shide-bottom')) {
      simp_playlist.classList.add('simp-display');
      simp_playlist.classList.toggle('simp-hide');
    }
  });
}

if (document.querySelector('#simp')) {
  var simp_auto_load, simp_audio, simp_album, simp_cover, simp_title, simp_artist, simp_controls, simp_progress, simp_volume, simp_v_slider, simp_v_num, simp_others;
  var ap_simp = document.querySelector('#simp');
  var simp_playlist = ap_simp.querySelector('.Audio-playlist');
  var simp_source = simp_playlist.querySelectorAll('li');
  var simp_a_url = simp_playlist.querySelectorAll('[data-src]');
  var simp_a_index = 0;
  var simp_isPlaying = false;
  var simp_isNext = false; //auto play
  var simp_isRandom = false; //play random
  var simp_isRanext = false; //check if before random starts, simp_isNext value is true
  var simp_isStream = false; //radio streaming
  var simp_isLoaded = false; //audio file has loaded
  var simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : {
    shide_top: false, //show/hide album
    shide_btm: false, //show/hide playlist
    auto_load: false //auto load audio file
  };
  
  var simp_elem = '';
  simp_elem += '<audio id="audio" preload><source src="" type="audio/mpeg"></audio>';
  simp_elem += '<div class="simp-display"><div class="Audio_album w-full flex-wrap"><div class="simp-cover"><i class="fa fa-music fa-5x"></i></div><div class="simp-info"><div class="simp-title">Title</div><div class="simp-artist">Artist</div></div></div></div>';
  simp_elem += '<div class="Audio_controls flex-wrap flex-align">';
  simp_elem += '<div class="simp-plauseward flex flex-align"><button type="button" class="simp-prev fa fa-backward" disabled></button><button type="button" class="simp-plause fa fa-play" disabled></button><button type="button" class="simp-next fa fa-forward" disabled></button></div>';
  simp_elem += '<div class="simp-tracker simp-load"><input class="simp-progress" type="range" min="0" max="100" value="0" disabled/><div class="simp-buffer"></div></div>';
  simp_elem += '<div class="simp-time flex flex-align"><span class="start-time">00:00</span><span class="simp-slash"> / </span><span class="end-time">00:00</span></div>';
  simp_elem += '<div class="simp-volume flex flex-align"><button type="button" class="simp-mute fa fa-volume-up"></button><input class="simp-v-slider" type="range" min="0" max="100" value="100"/></div>';
  simp_elem += '<div class="simp-others flex flex-align"><div class="simp-shide"><button type="button" class="simp-shide-top fa fa-caret-up" title="Show/Hide Album"></button><button type="button" class="simp-shide-bottom fa fa-caret-down" title="Show/Hide Playlist"></button></div></div>';
  simp_elem += '</div>'; //Audio_controls
  
  var simp_player = document.createElement('div');
  simp_player.classList.add('simp-player');
  simp_player.innerHTML = simp_elem;
  ap_simp.insertBefore(simp_player, simp_playlist);
  simp_startScript();
}
</script>

تحميل الكود ملف واحد معاينــ Preview ــة

مميزات وخصائص كود مشغل صوت مع قائمة تشغيل

• واجهة مستخدم رائعة.
• تشغيل امتدادات صوت عديدة بما في ذلك Mp3.
• سهل التخصيص يمكنك تخصيصه بسهولة وتغيير الألوان.
• متوافق مع جميع احجام الشاشات والهواتف الذكية.
• يحتوي على قائمة تشغيل Playlist للتنقل بين المقاطع الصوتية.
• أزرر لتقيم المقطع السابق والتالي.
• زر اخفاء قائمة التشغيل والوصف والصورة واسم المقطع.
• يمكنك استخدامة في اى مكان سواء في المقالات او القائمة الجانبية.

الأسئلة الشائعة حول إضافة مشغل صوت في بلوجر

ما هي أهمية إضافة مشغل صوت إلى مدونتي؟

إضافة مشغل صوت يمكن أن يعزز من تجربة المستخدم ويجعل مدونتك أكثر تفاعلاً وجذبًا للزوار. كما يمكن أن يساعد في زيادة فترة بقاء الزوار على مدونتك.

هل يمكنني تخصيص مشغل الصوت ليناسب تصميم مدونتي؟

نعم، يمكنك تخصيص مشغل الصوت باستخدام CSS لجعله يتناسب تمامًا مع تصميم مدونتك. يمكنك تغيير الألوان والخطوط والأزرار حسب رغبتك.

هل يتطلب إضافة مشغل صوت إلى مدونتي معرفة متقدمة بالبرمجة؟

لا، يمكنك إضافة مشغل صوت إلى مدونتك حتى وإن كنت مبتدئًا في البرمجة. الخطوات المذكورة في هذا المقال بسيطة ويمكن لأي شخص اتباعها.

وفي النهاية

إضافة مشغل صوت Mp3 مع قائمة تشغيل إلى مدونتك على بلوجر يمكن أن يرفع من تجربة الزوار ويجعل مدونتك أكثر تفاعلاً وجاذبًا. باستخدام HTML وCSS وJavaScript، يمكنك إنشاء مشغل صوتيات مخصص يتناسب مع تصميم مدونتك. لا تنسَ بهذه الطريقة، ستتمكن من إنشاء تجربة فريدة وممتعة لزوار مدونتك، مما يزيد من فرص التفاعل والمشاركة مع محتواك.

تعديل المقال