الأربعاء، 21 فبراير 2018

احصل على هذة الاداة من هنا

مشغل أغاني احترافي للبلوجر



السلام عليكم ورحمة
الله وبركاته


 نعود لكم بتدوينة جديدة نقدم لكم مشغل أغاني احترافي يمكنك اضافته الى موقعك
وعرض مجموعة الأغاني المفضلة لديك ليستمع اليها
الزوار





طريقة التركيب:

    1. توجه الى التخطيط ثم اضف اداة html/javascript (سايد بار)
    2. ضع كود التالي داخل الاداة


      <style>
      #music {
        width: 360px;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
          margin: 0 auto;
        margin-top: 50px;
      }
      
      #music img {
        width: 100%;
      }
      
      .title {
        text-align: center;
        line-height: 26px;
        font-size: 14px;
      }
      
      #pause {
        display: none;
      }
      
      progress[value] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
      }
      
      progress[value]::-webkit-progress-bar {
        background-color: #f1faff;
      }
      
      progress[value]::-webkit-progress-value {
        background-color: #9ad9fd;
      }
      
      .actions {
        padding: 15px 20px;
        overflow: hidden;
      }
      
      .actions i {
        font-size: 18px;
        color: #6a7883;
        float: left;
        cursor: pointer;
      }
      
      .prev {
        margin-left: 97px;
        float: left;
      }
      
      .play {
        margin: 0 20px 0 20px;
        float: left;
      }
      
      .next {
        margin-right: 97px;
        float: left;
      }
      
      #mute {
        display: none;
      }
      </style>
      <div id="music">
          <audio src="" id="hidden-player"></audio>
          <img src="" class="coverr" alt="" />
          <div class="title"></div>
          <div class="player-song">
            <progress value="0" max="1"></progress>
            <div class="actions">
              <i class="fa fa-list-ul"></i>
              <div class="prev">
                <i class="fa fa-backward"></i>
              </div>
              <div class="play">
                <i class="fa fa-play" id="playmusic"></i>
                <i class="fa fa-pause" id="pause"></i>
              </div>
              <div class="next">
                <i class="fa fa-forward"></i>
              </div>
              <i class="fa fa-volume-up" id="sound"></i>
              <i class="fa fa-volume-off" id="mute"></i>
            </div>
          </div>
        </div><script src='//code.jquery.com/jquery-2.2.4.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script><script type='text/javascript'>/*music player*/
      var num = 0;
      var hiddenPlayer = $('#hidden-player');
      var player = $('#player');
      var title = $('.title');
      var cover = $('.coverr');
      
      function secondsTimeSpanToHMS(s) {
        var h = Math.floor(s / 3600);
        s -= h * 3600;
        var m = Math.floor(s / 60);
        s -= m * 60;
        return h + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s);
      };
      
      songs = [{
        src: "https://chenyiya.com/codepen/iron.mp3",
        title: "Woodkid - Iron",
        coverart: "https://chenyiya.com/codepen/iron-image.jpg"
      }, {
        src: "https://s4.sv-faz.xyz/mr-reese/top/august2017/Hot%20100%20Billboard%20Singles%20Chart%20-%2013%20August%202017%20-%20MP3%20320/07.%20Ed%20Sheeran%20-%20Shape%20Of%20You.mp3",
        title: "Ed Sheeran - Shape Of You",
        coverart: "https://assets.capitalfm.com/2014/41/ed-sheeran-a-visual-journey-by-ed-sheeran--phillip-butah-7-1413379822-view-1.jpg"
      }, {
        src: "https://dopefile.pk:182/d/d4wlawu3rrichaw67plmbrtjfhtpoajdo42jutidck5ayfdoflvn4bcqmucwleazpuamqojs/audio.mp3",
        title: "Eminem - River",
        coverart: "https://3.bp.blogspot.com/-PvxAJ4enN_w/Wo11tXkp2FI/AAAAAAAADEo/Q9HjT5dGS5kcOo237hZlAKPLlDAf_p0LwCLcBGAs/s1600/739045a551a0026a32298d5bee7e3b6d.jpg"
      }, ];
      
      var initSongSrc = songs[0].src;
      var initSongTitle = songs[0].title;
      var initSongCover = songs[0].coverart;
      var items = songs.length - 1;
      
      hiddenPlayer.attr("src", initSongSrc);
      title.html(initSongTitle);
      cover.attr('src', initSongCover);
      
      $('.next').on('click', function() {
        var songOrder = hiddenPlayer.attr('order');
      
        if (items == songOrder) {
          num = 0;
          var songSrc = songs[0].src;
          var songTitle = songs[0].title;
          var songCover = songs[0].coverart;
          hiddenPlayer.attr('order', '0');
          hiddenPlayer.attr('src', songSrc).trigger('play');
          title.html(songTitle);
          cover.attr('src', songCover);
        } else {
          console.log(songOrder);
          num += 1;
          var songSrc = songs[num].src;
          var songTitle = songs[num].title;
          var songCover = songs[num].coverart;
          hiddenPlayer.attr('src', songSrc).trigger('play');
          title.html(songTitle);
          cover.attr('src', songCover);
          hiddenPlayer.attr('order', num);
        }
      });
      
      $('.prev').on('click', function() {
        var songOrder = hiddenPlayer.attr('order');
      
        if (songOrder == 0) {
          num = items;
          var songSrc = songs[items].src;
          var songTitle = songs[items].title;
          var songCover = songs[items].coverart;
          hiddenPlayer.attr('order', items);
          hiddenPlayer.attr('src', songSrc).trigger('play');
          title.html(songTitle);
          cover.attr('src', songCover);
        } else {
          num -= 1;
          var songSrc = songs[num].src;
          var songTitle = songs[num].title;
          var songCover = songs[num].coverart;
          hiddenPlayer.attr('src', songSrc).trigger('play');
          title.html(songTitle);
          cover.attr('src', songCover);
          hiddenPlayer.attr('order', num);
        }
      });
      
      $("#playmusic").click(function() {
        hiddenPlayer[0].play();
        $("#playmusic").hide();
        $("#pause").show().addClass('active');
      });
      $("#pause").click(function() {
        hiddenPlayer[0].pause();
        $("#playmusic").show();
        $("#pause").hide();
      });
      
      hiddenPlayer.on('timeupdate', function() {
        var songLength = secondsTimeSpanToHMS(this.duration)
        var songLengthParse = songLength.split(".")[0];
      
        var songCurrent = secondsTimeSpanToHMS(this.currentTime)
        var songCurrentParse = songCurrent.split(".")[0];
        $('progress').attr("value", this.currentTime / this.duration);
      
        if (!hiddenPlayer[0].paused) {
          $("#playmusic").hide();
          $("#pause").show();
          $('progress').css('cursor', 'pointer');
          $('progress').on('click', function(e) {
            var parentOffset = $(this).parent().offset();
            var relX = e.pageX - parentOffset.left;
            var percPos = relX * 100 / 355;
            var second = hiddenPlayer[0].duration * parseInt(percPos) / 100;
            console.log(second);
            hiddenPlayer[0].currentTime = second;
          })
        }
      
        if (this.currentTime == this.duration) {
          $('.next').trigger('click');
        }
      });
      
      $("#mute").click(function() {
        hiddenPlayer[0].volume = 1;
        $("#mute").hide();
        $("#sound").show();
      });
      $("#sound").click(function() {
        hiddenPlayer[0].volume = 0;
        $("#mute").show();
        $("#sound").hide();
      });</script>


        1. لتغيير الأغاني ابحث في الكود عن songs = [{
        2. ثم قم بتغيير ما يلي                                                 
        3. src: "رابط الأغنية.mp3",
        4. title: "عنوان الأغنية",
        5. coverart: "صورة الأغنية"


        1. اذا واجهت اي مشكلة ضعها بتعليق



      هناك تعليق واحد


      EmoticonEmoticon