Tạo Tiện Ích Nghe Nhạc Cho Trang Web

Xin chào các bạn, lâu lắm rồi blog mới có một thủ thuật , hôm nay mình sẽ hướng dẫn tích hợp tiện ích nghe nhạc vào website để tránh sự nhàm chán của khách khi vào blog , giúp độc giả vừa đọc bài vừa giải trí . Code này mình lấy từ trang Tôi Share Blog ,không dài dòng nữa tiến hành ngay luôn nào

Các Bước Thực Hiện

Đầu tiên chúng ta tìm thẻ </head> và dán đoạn code bên dưới lên trên thẻ vừa tìm.

<link href='//wprp.bein.pp.ua/wp-content/plugins/rplayer/assets/css/wprp_style.css?ver=5.0.4' id='wprp_style-css-css' media='all' rel='stylesheet' type='text/css'/>
<style id='wprp_style-css-inline-css' type='text/css'>
.wprp_mini_wrapper,.wprp_mini_wrapper .wprp_cover_hole{background:#fff}
.wprp_mini_wrapper .wprp_cover_overlay{background:#011627}
.wprp_mini_wrapper .wprp_stroke{stroke:#011627}
.wprp_mini_wrapper .wprp_fill{fill:#011627}
.wprp_mini_wrapper .wprp_btn:hover .wprp_stroke{stroke:#669900}
.wprp_mini_wrapper .wprp_btn:hover .wprp_fill{fill:#669900}
.wprp_mini_wrapper .wprp_radio_name{color:#011627}
.wprp_mini_wrapper .wprp_title{color:#011627}
.wprp_mini_wrapper .wprp_artist{color:#485e6f}
.wprp_player_wrapper,.wprp_player_wrapper .wprp_cover_hole{background:#fafafa}
.wprp_player_wrapper .wprp_cover_overlay{background:#011627}
.wprp_player_wrapper .wprp_title{color:#011627}
.wprp_player_wrapper .wprp_artist{color:#485e6f}
.wprp_player_controll{background:#fff}
.wprp_player_controll .wprp_stroke{stroke:#011627}
.wprp_player_controll .wprp_fill{fill:#011627}
.wprp_player_controll .wprp_btn:hover .wprp_stroke{stroke:#669900}
.wprp_player_controll .wprp_btn:hover .wprp_fill,.wprp_volume.muted path{fill:#669900}
.wprp_song_list:before,.wprp_song_history .wprp_cover_hole{background:#fafafa}
.wprp_item:before{background:#fff}
.wprp_song_cover{background:#011627}
.wprp_song_history .wprp_title{color:#011627}
.wprp_song_history .wprp_artist{color:#485e6f}
.wprp_radio_list:before{background:#fafafa}
.wprp_radio:before{background:#fff}
.wprp_radio{color:#011627}
.wprp_scroll_rail .ui-slider-handle{background:#011627}
</style>
<link href='//wprp.bein.pp.ua/wp-content/themes/twentyseventeen/assets/css/blocks.css?ver=1.1' id='twentyseventeen-block-style-css' media='all' rel='stylesheet' type='text/css'/>
<!--[if lt IE 9]> <link rel='stylesheet' id='twentyseventeen-ie8-css' href='http://wprp.bein.pp.ua/wp-content/themes/twentyseventeen/assets/css/ie8.css?ver=1.0' type='text/css' media='all' /> <![endif]-->
<link href='//wprp.bein.pp.ua/wp-content/plugins/brizy/public/editor-build/editor/css/preview.css?ver=1.0.84' id='brizy-preview-css' media='all' rel='stylesheet' type='text/css'/>
<script async='' src='//wprp.bein.pp.ua/wp-includes/js/jquery/jquery.js?ver=1.12.4' type='text/javascript'>
    </script>
<script async='' src='//wprp.bein.pp.ua/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1' type='text/javascript'>
    </script>
<script async='' src='//wprp.bein.pp.ua/wp-content/plugins/rplayer/assets/js/js.cookie.js?ver=5.0.4' type='text/javascript'>
    </script>
<script async='' type='text/javascript'>
      /* <![CDATA[ */
      var wprp_ajax = {"plugin_url":"http:\/\/wprp.bein.pp.ua\/wp-content\/plugins\/rplayer\/","url":"http:\/\/wprp.bein.pp.ua\/wp-admin\/admin-ajax.php"};
      /* ]]> */
    </script>
<script async='' type='text/javascript'>
//<![CDATA[
/*global jQuery, console, Audio, wprp_ajax, clearInterval, setInterval, setTimeout, clearTimeout, document, navigator*/
/*eslint no-console: ["error", { allow: ["log", "error"] }] */
/*jslint plusplus: true */
(function ($) {
  "use strict";
  $.fn.wprp = function (options) {

    // РЎРѕР·РґР°С‘Рј РЅР°СЃС‚СЂРѕР№РєРё РїРѕ-СѓРјРѕР»С‡Р°РЅРёСЋ, СЂР°СЃС€РёСЂСЏСЏ РёС… СЃ РїРѕРјРѕС‰СЊСЋ РїР°СЂР°РјРµС‚СЂРѕРІ, РєРѕС‚РѕСЂС‹Рµ Р±С‹Р»Рё РїРµСЂРµРґР°РЅС‹
    var settings = $.extend({
      'position': 'right',
      'autoplay': false,
      'playlist' : null,
      'updateInterval': 30
    }, options);

    return this.each(function () {
      // РўСѓС‚ РїРёС€РµРј РєРѕРґ РїР»Р°РіРёРЅР° tooltip
      var
        $wrapper = $(this),
        $toggleBtn = null,
        $playbackBtn = null,
        $songHistoryBtn = null,
        $radioListBtn = null,
        $nextBtn = null,
        $prevBtn = null,
        $volumeBtn = null,
        $cover_anim = null,
        $radio_name = null,
        $song_list = null,
        $radio_list = null,
        $song_history = null,
        $blur = null,
        $radio = null,
        $scrollRail = null,
        songHistoryIceast = [],
        html = "",
        el = {
          title: null,
          artist: null,
          cover: null
        },
        currentSong = {
          index: 0,
          artist: null,
          title: null,
          cover: null,
          radioname: null,
          radiourl: null
        },
        svg = {
          play: "M2,2 13,7.5 13,7.5 2,13z M13,7.5 13,7.5z",
          pause: "M2,2 2,2 2,13 2,13z M13,2 13,13z",
          toggle_closed: "M2,12 10,2 18,12",
          toggle_openned: "M2,2 10,12 18,2",
          radio_closed: "M2,2 18,2 M2,8 18,8 M2,14 18,14",
          radio_opened: "M4,2 16,14 M10,9 10,9 M4,14 16,2",
          songs_closed: "M1,1 19,1 19,19 1,19z M4,4 10,4 M4,7 8,7 M4,10 6,10 M16,4 13,4 13,14 M10,12 10,12 M10,12 10,12",
          songs_opened: "M-2,-2 22,-2 22,22 -2,22z M-2,4 -2,4 M-2,7 -2,7 M-2,10 -2,10 M25,4 22,4 22,14 M4,5 16,17 M4,17 16,5",
          prev: "M13,2 4,7.5 13,13z M2,2 2,13",
          next: "M2,2 11,7.5 2,13z M12,2 12,13",
          volume: "M13.2,7.5l0.3-0.3c0-0.1,0-0.1,0-0.2c-0.1,0-0.1,0-0.2,0L13,7.3L12.8,7c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l0.3,0.3l-0.3,0.3c0,0.1,0,0.1,0,0.2c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0L13,7.7L13.2,8c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2L13.2,7.5z M15.2,0.3C15.1,0.1,14.8,0,14.6,0c-0.2,0-0.5,0.1-0.6,0.3l-0.1,0.1c-0.3,0.3-0.3,0.8,0,1.2c1.5,1.7,2.3,3.8,2.3,6.1c0,2.1-0.8,4.2-2.1,5.9c-0.3,0.3-0.3,0.8,0.1,1.2l0.1,0.1c0.2,0.2,0.4,0.3,0.6,0.3c0,0,0,0,0,0c0.2,0,0.5-0.1,0.6-0.3c1.7-2,2.6-4.5,2.6-7.1C18,4.9,17,2.3,15.2,0.3z M12.6,3.3C12.5,3.1,12.3,3,12,2.9c-0.2,0-0.5,0.1-0.6,0.2l-0.1,0.1c-0.3,0.3-0.3,0.8-0.1,1.1c0.7,0.9,1.1,2,1.1,3.1c0,1.1-0.3,2.1-1,3c-0.3,0.3-0.2,0.8,0.1,1.1l0.1,0.1c0.2,0.2,0.4,0.3,0.6,0.3c0,0,0,0,0.1,0c0.2,0,0.5-0.1,0.6-0.3c0.9-1.2,1.4-2.6,1.4-4.1C14.2,6,13.6,4.5,12.6,3.3z M7.5,1.3L2.7,5.5H1c-0.6,0-1,0.4-1,1v3c0,0.6,0.4,1,1,1h2l4.4,3.3C8.3,14.5,9,14.1,9,13V2C9,0.9,8.3,0.6,7.5,1.3z",
          volume_muted: "M15.9,7.5l1.9-2.1c0.4-0.4,0.3-1-0.1-1.4c-0.4-0.4-1-0.3-1.4,0.1L14.5,6l-1.8-1.9c-0.4-0.4-1-0.4-1.4-0.1c-0.4,0.4-0.4,1-0.1,1.4l1.9,2.1l-1.9,2.1c-0.4,0.4-0.3,1,0.1,1.4c0.2,0.2,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3L14.5,9l1.8,1.9c0.2,0.2,0.5,0.3,0.7,0.3c0.2,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0.1-1.4L15.9,7.5z M15,7.3C15,7.3,14.9,7.2,15,7.3C14.9,7.2,14.9,7.3,15,7.3L15,7.3C14.9,7.3,14.9,7.3,15,7.3C15,7.5,15,7.6,15,7.7c0,0.1,0,0.3-0.1,0.4c0,0,0,0.1,0,0.1l0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.1-0.1,0.2-0.3,0.2-0.5C15.1,7.6,15.1,7.4,15,7.3z M15,7C15,7,15,7,15,7c-0.1,0-0.1,0-0.1,0l0,0c0,0,0,0.1,0,0.1C14.9,7.3,15,7.4,15,7.5c0,0.1,0,0.2-0.1,0.3c0,0,0,0.1,0,0.1l0,0c0,0,0,0,0.1,0c0,0,0,0,0,0C15,8,15,8,15,8c0.1-0.1,0.1-0.3,0.1-0.5C15.2,7.3,15.1,7.2,15,7z M7.5,1.3L2.7,5.5H1c-0.6,0-1,0.4-1,1v3c0,0.6,0.4,1,1,1h2l4.4,3.3C8.3,14.5,9,14.1,9,13V2C9,0.9,8.3,0.6,7.5,1.3z"
        },
        audio = new Audio(),
        timerUpdate,
        timerReUpdate,
        rotate = 0,
        rotateInterval;
      
      // Cookies
      window.onbeforeunload = function (event) {
        var data = {
          playing: true,
          current: currentSong.index,
          volume: audio.volume
        };
        if(!audio.paused){
          Cookies.set('wprp_data', data);
        } else {
          Cookies.remove('wprp_data');
        }
      }
      
      
      function buildPlayer() {
        $wrapper.addClass("pos-" + settings.position);
        html +=
          '<div class="wprp_mini_wrapper">' +
          '  <div class="wprp_radio_info">';
        if (settings.playlist.length > 1) {
          html +=
            '    <div class="wprp_btn wprp_radio_list_btn"><svg><path class="wprp_stroke" d="' + svg.radio_closed + '" /></svg></div>';
        }
        html +=
          '    <div class="wprp_radio_name">Nghe nhạc</div>' +
          '  </div>' +
          '  <div class="wprp_cover_anim">' +
          '    <div class="wprp_cover">' +
          '      <img src="https://i.imgur.com/SUqJf57.png"/>' +
          '      <div class="wprp_cover_hole"></div>' +
          '      <div class="wprp_cover_overlay"></div>' +
          '    </div>' +
          '  </div>' +
          '  <div class="wprp_info"><div class="wprp_title">Giải trí - Nghe nhạc</div><div class="wprp_artist">Nhạc hay</div></div>' +
          '  <div class="wprp_btn wprp_playback"><svg><path class="wprp_fill wprp_stroke" d="' + svg.play + '"/></svg></div>' +
          '  <div class="wprp_btn wprp_toggle"><svg><path class="wprp_stroke" d="' + svg.toggle_closed + '"/></svg></div>' +
          '</div>' +
          '<div class="wprp_song_history">' +
          '  <ul class="wprp_song_list">' +
          '  </ul>' +
          '</div>';
        if (settings.playlist.length > 1) {
          html +=
            '<div class="wprp_radio_list_wrapper">' +
            '  <ul class="wprp_radio_list">';
          $.each(settings.playlist, function (index, value) {
            html +=
              '<li class="wprp_radio">' + value.radioname + '</li>';
          });
          html +=
            '  </ul>' +
            '</div>';
        }
        html +=
          '<div class="wprp_player_wrapper">' +
          '  <div class="blur">' +
          '    <div class="wprp_cover_anim">' +
          '      <div class="wprp_cover">' +
          '        <img src="https://i.imgur.com/SUqJf57.png"/>' +
          '        <div class="wprp_cover_hole"></div>' +
          '        <div class="wprp_cover_overlay"></div>' +
          '      </div>' +
          '    </div>' +
          '    <div class="wprp_title">Admin xin chúc bạn</div>' +
          '    <div class="wprp_artist">Nghe nhạc vui vẻ !</div>' +
          '  </div>' +
          '  <div class="wprp_player_controll">' +
          '    <div class="wprp_btn wprp_song_history_btn"><svg><path class="wprp_stroke" d="' + svg.songs_closed + '"/><circle class="wprp_fill"  cx="11" cy="14" r="3"></circle></svg></div>';
        if (settings.playlist.length > 1) {
          html +=
            '    <div class="wprp_btn wprp_prev"><svg>';
        } else {
          html +=
            '    <div class="wprp_btn wprp_prev deactivate"><svg>';
        }
        html +=
          '      <path class="wprp_fill wprp_stroke" d="' + svg.prev + '"/>' +
          '    </svg></div>';
        html +=
          '    <div class="wprp_btn wprp_playback"><svg>' +
          '      <path class="wprp_fill wprp_stroke" d="' + svg.play + '"/>' +
          '    </svg></div>';
        if (settings.playlist.length > 1) {
          html +=
            '    <div class="wprp_btn wprp_next"><svg>';
        } else {
          html +=
            '    <div class="wprp_btn wprp_next deactivate"><svg>';
        }
        html +=
          '      <path class="wprp_fill wprp_stroke" d="' + svg.next + '"/>' +
          '    </svg></div>';
        html +=
          '  <div class="wprp_btn wprp_volume"><svg><path class="wprp_fill" d="' + svg.volume + '"/></svg></div>' +
          '  </div>' +
          '</div>' +
          '<div class="wprp_scroll_rail"></div>';
        $wrapper.append(html);
      }
      
      function typeWriter(element, text, speed) {
        element.removeClass("loading");
        var len = text.length,
          i = 0,
          tTW =  null;
        element.html("");
        tTW = setInterval(function () {
          element.append(text[i++]);
          if (i === len) {
            clearInterval(tTW);
          }
        }, speed);
      }
      
      function findMatch(newarray, array) {
        var match = false;
        $.each(array, function (index, value) {
          if (value.title === newarray.title && value.artist === newarray.artist) {
            match = true;
          }
        });
        return match;
      }
      
      function getSongs() {
        var data = {
          url: currentSong.radiourl,
          action: "getLastsSong"
        };
        // РїРѕР»СѓС‡Р°РµРј РёРЅС„Сѓ Рѕ С‚СЂРµРєР°С…
        $.post(wprp_ajax.url, data, function (response) {
          var appendHtml = "", title,
            song, now, cSong;
          if (response !== "null") {
            song = JSON.parse(response);
          } else {
            //РїРѕР»СѓС‡Р°РµРј С‚РµРєСѓС‰РёР№ С‚СЂРµРє
            now = new Date(Date.now());
            cSong = {
              time: now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds(),
              artist: currentSong.artist,
              title: currentSong.title
            };
            // РїСЂРѕРІРµСЂСЏРµРј РµСЃС‚СЊ Р»Рё РѕРЅ РІ Р±Р°Р·Р·Рµ
            if (!findMatch(cSong, songHistoryIceast)) {
              // РµСЃР»Рё РЅРµС‚Сѓ, РґРѕР±Р°РІР»СЏРµРј РІ РјР°СЃСЃРёРІ
              songHistoryIceast.push(cSong);
            }
            // РїРµСЂРµРґР°РµРј РІ РјР°СЃСЃРёРІ СЃРѕРЅРі
            song = songHistoryIceast;
          }
          // РІС‹РІРѕРґРёРј СЃРїРёСЃРѕРє РїРµСЃРµРЅ
          $.each(song, function (index, value) {
            title = value.title !== "" ? value.title : "Untitled";
            appendHtml += '<li class="wprp_item">';
            appendHtml += '<div class="wprp_song_cover">';
            appendHtml += '<div class="wprp_cover_hole"></div>';
            appendHtml += '</div>';
            appendHtml += '<div class="wprp_song_info">';
            appendHtml += '<div class="wprp_title" title="' + value.artist + " - " + title + '">' + value.artist + " - " + title + '</div>';
            appendHtml += '<div class="wprp_artist">' + value.time + '</div>';
            appendHtml += '</div>';
            appendHtml += '</li>';
          });
          $song_list.html(appendHtml);
        });
      }
      
      function updateInfo() {
        var data = {
          url: currentSong.radiourl,
          action: "getCurrentSong"
        };
        // РїРѕР»СѓС‡Р°РµРј РёРЅС„Сѓ Рѕ С‚СЂРµРєРµ
        $.post(wprp_ajax.url, data, function (response) {
          clearTimeout(timerReUpdate);
          if (response !== "null") {
            var song = JSON.parse(response);
            if (currentSong.artist !== song.artist) {
              currentSong.artist = song.artist;
              typeWriter(el.artist, currentSong.artist, 25);
            }
            if (currentSong.title !== song.title) {
              currentSong.title = song.title;
              typeWriter(el.title, currentSong.title, 25);
            }
            if (currentSong.cover !== song.cover || !song.cover) {
              currentSong.cover = song.cover;
              if ($cover_anim.hasClass("change")) {
                if (currentSong.cover !== null) {
                  el.cover.find('img').attr("src", currentSong.cover);
                } else {
                  el.cover.find('img').attr("src", wprp_ajax.plugin_url + "assets/img/noimage.jpg");
                }
                $cover_anim.removeClass("change");
              } else {
                $cover_anim.addClass("change");
                setTimeout(function () {
                  if (currentSong.cover !== null) {
                    el.cover.find('img').attr("src", currentSong.cover);
                  } else {
                    el.cover.find('img').attr("src", wprp_ajax.plugin_url + "assets/img/noimage.jpg");
                  }
                  $cover_anim.removeClass("change");
                }, 650);
              }
            }
          } else {
            // РµСЃР»Рё РїРѕР»СѓС‡РёР»Рё РЅСѓР»СЊ, С‚Рѕ РІРµС€Р°РµРј РєР»Р°СЃСЃС‹ Р·Р°РіСЂСѓР·РєРё Рё РїРѕРІС‚РѕСЂСЏРµРј Р·Р°РїСЂРѕСЃ
            currentSong.artist = "Unknown artist";
            typeWriter(el.artist, currentSong.artist, 25);
            currentSong.title = "Untitled";
            typeWriter(el.title, currentSong.title, 25);
            el.cover.find('img').attr("src", wprp_ajax.plugin_url + "assets/img/noimage.jpg");
            $cover_anim.removeClass("change");
            reUpdate(5000);
          }
          getSongs();
        });
      }
      
      function reUpdate(time) {
        timerReUpdate = setTimeout(function () {
          updateInfo();
        }, time);
      }
      
      function loadedmetadata() {
        //console.log("loadedmetadata");
        // РїРѕР»СѓС‡Р°РµРј РёРЅС„Рѕ РїРѕ РїРµСЂРІРѕР№ СЂР°РґРёРѕСЃС‚Р°РЅС†РёРё
        updateInfo();
      }
      
      function error() {
        //console.log("error");
      }
      
      function play() {
        //console.log("play");
        timerUpdate = setInterval(function () {
          //console.log("timerUpdate");
          updateInfo();
        }, settings.updateInterval * 1000);
        
        $wrapper.addClass("playing");
        rotateInterval = setInterval(function () {
          if (rotate >= 360) {
            rotate = 0;
          }
          el.cover.find("img").css({
            transform: 'rotate(' + rotate + 'deg)'
          });
          rotate++;
        }, 10);
        
        if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
          $playbackBtn.find("path").attr("d", svg.pause);
        }
      }
      
      function pause() {
        //console.log("pause");
        clearInterval(timerUpdate);
        $wrapper.removeClass("playing");
        clearInterval(rotateInterval);
        if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
          $playbackBtn.find("path").attr("d", svg.play);
        }
      }
      
      function loadRadio(index, playing) {
        //console.log("loadRadio");
        clearInterval(timerUpdate);
        clearInterval(rotateInterval);
        audio.pause();
        audio.src = settings.playlist[index].radiourl;
        currentSong.radioname = settings.playlist[index].radioname;
        currentSong.radiourl = settings.playlist[index].radiourl;
        audio.preload = "metadata";
        audio.load();
        typeWriter($radio_name, currentSong.radioname, 25);
        
        if (playing) {
          audio.play();
        }
        // РїРѕРґРєР»СЋС‡Р°РµРј СЃРѕР±С‹С‚РёСЏ РґР»СЏ Р°СѓРґРёРѕ
        audio.addEventListener("loadedmetadata", loadedmetadata, false);
        audio.addEventListener("error", error, false);
        audio.addEventListener("play", play, false);
        audio.addEventListener("pause", pause, false);
      }

      function scrollCreate($wrapper) {
        //РµСЃР»Рё СЃРѕР·РґР°РЅ СЃР»Р°Р№РґРµСЂ СѓРЅРёС‡С‚РѕР¶Р°РµРј РµРіРѕ
        if ($scrollRail.slider()) {
          $scrollRail.slider("destroy");
          $wrapper.off("scroll");
        }
        if ($wrapper.find("ul").height() > $wrapper.height()) {
          var scrollHeight = $wrapper.find("ul").height() - $scrollRail.height() + 20;
          $scrollRail.slider({
            orientation: "vertical",
            min: 0,
            max: scrollHeight,
            value: scrollHeight,
            change: function (event, ui) {
              $scrollRail.find(".ui-slider-handle").css({
                "margin-bottom": -(20 / 100) * ((ui.value * 100) / scrollHeight) + "px"
              });
              $wrapper.scrollTop(scrollHeight -  ui.value);
            },
            slide: function (event, ui) {
              $scrollRail.find(".ui-slider-handle").css({
                "margin-bottom": -(20 / 100) * ((ui.value * 100) / scrollHeight) + "px"
              });
              $wrapper.scrollTop(scrollHeight -  ui.value);
            }
          });
          $wrapper.scroll(function () {
            $scrollRail.slider({value: scrollHeight - $wrapper.scrollTop()});
          });
        }
      }
      
      function hasOpen() {
        // РїСЂРѕРІРµСЂСЏРµРј РЅРµ РѕС‚РєСЂС‹С‚ Р»Рё СЃРїРёСЃРѕРє С‚СЂРµРєРѕРІ, РµСЃР»Рё РґР° С‚Рѕ Р·Р°РєСЂС‹РІР°РµРј РµРіРѕ
        if ($songHistoryBtn.hasClass("active")) {
          $songHistoryBtn.removeClass("active");
          $song_history.removeClass("open");
          $blur.removeClass("on");
          
          if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
            $songHistoryBtn.find("path").attr("d", svg.songs_closed);
            $songHistoryBtn.find("circle").attr("cx", 11);
          }
        }
        // РїСЂРѕРІРµСЂСЏРµРј РЅРµ РѕС‚РєСЂС‹С‚ Р»Рё СЃРїРёСЃРѕРє СЂР°РґРёРѕ, РµСЃР»Рё РґР° С‚Рѕ Р·Р°РєСЂС‹РІР°РµРј РµРіРѕ
        if ($radioListBtn.hasClass("active")) {
          $radioListBtn.removeClass("active");
          $radio_list.removeClass("open");
          $blur.removeClass("on");
          
          if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
            $radioListBtn.find("path").attr("d", svg.radio_closed);
          }
        }
        $scrollRail.fadeOut();
      }
      
      function init() {
        buildPlayer();
        //РѕР±СЊСЏРІР»СЏРµРј РїРµСЂРµРјРµРЅРЅС–Рµ
        $radio_name = $wrapper.find(".wprp_radio_name");
        $toggleBtn = $wrapper.find(".wprp_toggle");
        $playbackBtn = $wrapper.find(".wprp_playback");
        $songHistoryBtn = $wrapper.find(".wprp_song_history_btn");
        $song_history = $wrapper.find(".wprp_song_history");
        $radioListBtn = $wrapper.find(".wprp_radio_list_btn");
        $volumeBtn = $wrapper.find(".wprp_volume");
        $radio_list = $wrapper.find(".wprp_radio_list_wrapper");
        $nextBtn = $wrapper.find(".wprp_next");
        $prevBtn = $wrapper.find(".wprp_prev");
        $cover_anim = $wrapper.find(".wprp_cover_anim");
        $song_list = $wrapper.find(".wprp_song_list");
        $blur = $wrapper.find(".blur");
        $radio = $wrapper.find(".wprp_radio");
        $scrollRail = $wrapper.find(".wprp_scroll_rail");
        el.artist = $wrapper.find(".wprp_artist");
        el.title = $wrapper.find(".wprp_title");
        el.cover = $wrapper.find(".wprp_cover");
      
        //Р·Р°РіСЂСѓР¶Р°РµРј РїРµСЂРІС‹Р№ Р»РёРЅРє
        //РµСЃР»Рё РІРєР»СЋС‡РµРЅРѕ Р°РІС‚РѕРІРѕРїСЃСЂРѕРёР·РІРµРґРµРЅРёРµ
        if (settings.autoplay) {
          if(settings.current != null){
            currentSong.index = settings.current;
          }
          loadRadio(currentSong.index, true);
        } else {
          loadRadio(currentSong.index, false);
        }
        
        
        
        // РІРµС€Р°РµРј СЃРѕР±С‹С‚РёСЏ
        
        $volumeBtn.on("click", function () {
          $volumeBtn.toggleClass("muted");
          audio.muted = !audio.muted;
          
          if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
            if (audio.muted) {
              $volumeBtn.find("path").attr("d", svg.volume_muted);
            } else {
              $volumeBtn.find("path").attr("d", svg.volume);
            }
          }
          
        });

        $songHistoryBtn.on("click", function (e) {
          e.preventDefault();
          // РµСЃР»Рё РѕС‚РєСЂС‹С‚РёРµ
                  
          if (!$songHistoryBtn.hasClass("active")) {
            // РїСЂРѕРІРµСЂСЏРµРј РЅРµ РѕС‚РєСЂС‹С‚ Р»Рё СЃРїРёСЃРѕРє СЂР°РґРёРѕ, РµСЃР»Рё РґР° С‚Рѕ Р·Р°РєСЂС‹РІР°РµРј РµРіРѕ
            if ($radioListBtn.hasClass("active")) {
              $radioListBtn.removeClass("active");
              $radio_list.removeClass("open");
              $blur.removeClass("on");
              if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
                $radioListBtn.find("path").attr("d", svg.radio_closed);
              }
            }
            
            //РѕС‚РѕР±СЂР°Р¶Р°РµРј СЌР»РµРјРµРЅС‚С‹, РјРµРЅСЏРµРј Р·Р°РіРѕР»РѕРІРѕРє, СЃРѕР·РґР°РµРј СЃРєСЂРѕР»Р»
            $scrollRail.fadeIn();
            typeWriter($radio_name, "null", 25);
            scrollCreate($song_history);
          } else {
            $scrollRail.fadeOut();
            typeWriter($radio_name, settings.playlist[currentSong.index].radioname, 25);
          }
          $songHistoryBtn.toggleClass("active");
          $song_history.toggleClass("open");
          $blur.toggleClass("on");
          
          if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
            if ($songHistoryBtn.hasClass("active")) {
              $songHistoryBtn.find("path").attr("d", svg.songs_opened);
              $songHistoryBtn.find("circle").attr("cx", 23);
            } else {
              $songHistoryBtn.find("path").attr("d", svg.songs_closed);
              $songHistoryBtn.find("circle").attr("cx", 11);
            }
          }
        });
        
        // РІРµС€Р°РµРј СЃРѕР±С‹С‚РёСЏ
        $radioListBtn.on("click", function (e) {
          e.preventDefault();
          // РµСЃР»Рё РѕС‚РєСЂС‹С‚РёРµ
          if (!$radioListBtn.hasClass("active")) {
            // РїСЂРѕРІРµСЂСЏРµРј РЅРµ РѕС‚РєСЂС‹С‚ Р»Рё СЃРїРёСЃРѕРє С‚СЂРµРєРѕРІ, РµСЃР»Рё РґР° С‚Рѕ Р·Р°РєСЂС‹РІР°РµРј РµРіРѕ
            if ($songHistoryBtn.hasClass("active")) {
              $songHistoryBtn.removeClass("active");
              $song_history.removeClass("open");
              $blur.removeClass("on");
              if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
                $songHistoryBtn.find("path").attr("d", svg.songs_closed);
                $songHistoryBtn.find("circle").attr("cx", 11);
              }
            }
            
            //РѕС‚РѕР±СЂР°Р¶Р°РµРј СЌР»РµРјРµРЅС‚С‹, РјРµРЅСЏРµРј Р·Р°РіРѕР»РѕРІРѕРє, СЃРѕР·РґР°РµРј СЃРєСЂРѕР»Р»
            $scrollRail.fadeIn();
            typeWriter($radio_name, "Select Radio", 25);
            scrollCreate($radio_list);
          } else {
            $scrollRail.fadeOut();
            typeWriter($radio_name, settings.playlist[currentSong.index].radioname, 25);
          }
          $radioListBtn.toggleClass("active");
          $radio_list.toggleClass("open");
          $blur.toggleClass("on");
          
          if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
            if ($radioListBtn.hasClass("active")) {
              $radioListBtn.find("path").attr("d", svg.radio_opened);
            } else {
              $radioListBtn.find("path").attr("d", svg.radio_closed);
            }
          }
        });
        
        $toggleBtn.on("click", function (e) {
          e.preventDefault();
          $wrapper.toggleClass("open");
          hasOpen();
          if ($.browser.safari || $.browser.mozilla || $.browser.msie || document.documentMode || /Edge/.test(navigator.userAgent)) {
            if ($wrapper.hasClass("open")) {
              $toggleBtn.find("path").attr("d", svg.toggle_openned);
            } else {
              $toggleBtn.find("path").attr("d", svg.toggle_closed);
            }
          }
        });
        
        $playbackBtn.on("click", function (e) {
          e.preventDefault();
          if (audio.paused) {
            audio.play();
          } else {
            audio.pause();
          }
        });
        
        $nextBtn.on("click", function (e) {
          e.preventDefault();
          if (currentSong.index < settings.playlist.length - 1) {
            currentSong.index = currentSong.index + 1;
          } else {
            currentSong.index = 0;
          }
          el.artist.html("").addClass("loading");
          el.title.html("").addClass("loading");
          $cover_anim.addClass("change");
          loadRadio(currentSong.index, true);
          //Р·Р°РєСЂС–РІР°РµРј РѕС‚РєСЂС‹С‚С‹Рµ РІРєР»Р°РґРєРё
          hasOpen();
        });
        
        $prevBtn.on("click", function (e) {
          e.preventDefault();
          if (currentSong.index > 0) {
            currentSong.index = currentSong.index - 1;
          } else {
            currentSong.index = settings.playlist.length - 1;
          }
          el.artist.html("").addClass("loading");
          el.title.html("").addClass("loading");
          $cover_anim.addClass("change");
          loadRadio(currentSong.index, true);
          //Р·Р°РєСЂС–РІР°РµРј РѕС‚РєСЂС‹С‚С‹Рµ РІРєР»Р°РґРєРё
          hasOpen();
        });
        
        $radio.on("click", function (e) {
          e.preventDefault();
          $radioListBtn.removeClass("active");
          $radio_list.removeClass("open");
          $blur.removeClass("on");
          scrollCreate($radioListBtn, $radio_list, null);
          
          currentSong.index = $(this).index();
          el.artist.html("").addClass("loading");
          el.title.html("").addClass("loading");
          $cover_anim.addClass("change");
          loadRadio(currentSong.index, true);
        });
      }
      init();
    });

  };
})(jQuery);
//]]>
</script>
<script async='' type='text/javascript'>
//<![CDATA[
      jQuery(document).ready(function ($) {
        if (Cookies.get('wprp_data')) {
          var data = Cookies.getJSON('wprp_data');
          var autoplay = data.playing;
          var current = data.current;
        } else {
          var autoplay = false;
          var current = null;
        }
        $('.wprp_wrapper').wprp({
          position: 'right',
          autoplay: autoplay,
          current: current,
          updateInterval: 30,
          playlist:
[{"radioname":"Giải trí - Nghe nhạc","radiourl":"http://www45.zippyshare.com/music/WGUGkxFz/0/nhachay.mp3"},
]
        });
      });
//]]>
    </script>

Tiếp theo tìm thẻ </body> và dán đoạn code phía dưới trên nó

<div class='wprp_wrapper pos-left' style='z-index: 9999'>
</div>

Chú ý : để thay đổi nhạc , các bạn vào Zippyshare úp nhạc lên và thay đổi http://www45.zippyshare.com/music/WGUGkxFz/0/nhachay.mp3 thành link nhạc mà bạn vừa úp.
Chúc các bạn thành công

Tạo Tiện Ích Nghe Nhạc Cho Trang Web

Các Bước Thực Hiện

Cùng chuyên mục:

7 comments:

Categories

Đọc nhiều tuần qua

Về BlogShareTips.Net

Bình luận mới

Liên kết bạn bè