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

  1. Cho em hỏi là làm sao để úp nhạc lên có link dạng mp3 ạ em úp toàn ra html thôi ạ

    ReplyDelete
  2. chất nhưng mà tải trang nặng quá

    ReplyDelete
    Replies
    1. Muốn chất thì phải đầu tư thôi anh

      Delete
  3. h ai cũng dùng temp này ta :D

    ReplyDelete
  4. Cảm ơn tác giả đã chia sẽ, mình cũng giới thiệu về danh sách các khách sạn trên toàn quốc.
    đồng phục thể theo
    khách sạn TP Hồ Chí Mình
    khách sạn đồ sơn

    ReplyDelete