Nhúng nhạc vào trang web với code hoàn toàn mới lạ

Nhúng nhạc vào trang web với code hoàn toàn mới lạ

Start Tiến IT đã đăng
Hiện có lượt xem và 0 bình luận
Chi tiết Liên quan Nhận xét Tác giả Hướng dẫn
  • Xem toàn trang
  • Chào các bạn hôm nay mình sẽ hướng dẫn các bạn cách làm nhúng nhạc vào 1 trang web theo phong cách hoàn toàn mới

    Hướng dẫn cách dùng:

    Bước 1 : Tìm thẻ </head> và thêm code này lên trên nó
    <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>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    Bước 2 : Thêm đoạn code dưới đây lên trên thẻ </body>
    <!-- Play music -->
    <div class='wprp_wrapper pos-left' style='z-index: 9999'>
    </div>
    Lưu ý : Tìm http://www45.zippyshare.com/music/WGUGkxFz/0/nhachay.mp3 và thay thành nhạc bạn muốn nghe và code này chỉ chạy với nhạc có dạng .mp3. Nếu ko có nhạc định dạng .mp3 như bạn cần thì bạn có thể up lên zippyshare.com
    Chúc các bạn thành công !
    Mục Lục Nội Dung

      Minh Tiến IT

      Pass giải nén mặc định: truongblogger
      Chắc bạn cũng đã nhiều lần gặp những link của 123link dạng 123link.co tại những trang web chia sẻ nội dung số. Nhưng bạn không biết cách nào để truy cập vào đúng link gốc của nội dung mà mình muốn truy cập. Bài viết này sẽ giúp bạn làm điều đó.
      Đầu tiên bạn truy cập vào một link 123link. Khi bạn truy cập xong thì nội dung bạn thấy sẽ tựa như hình ở dưới.
      Trang 123link
      Trang 123link
      Đánh dấu check vào vô “I’m not a robot”. Sau đó sẽ có một bảng captcha hiện ra. Bạn trả lời theo câu hỏi của captcha rồi bấm Verify để xác nhận.
      I’m not a robot
      I’m not a robot
      Verify
      Verify
      Sau khi xác nhận captcha thành công thì bấm chọn nút “Click here to continue” để sang bước tiếp theo.
      Click here to continue
      Click here to continue
      Ở trang tiếp theo, bạn sẽ thấy một đồng hồ đếm ngược, thường thì nhiều nhất sẽ là 7 giây. Bạn đợi cho thời gian đếm ngược chạy hết.
      Bạn đợi cho thời gian đếm ngược chạy hết
      Bạn đợi cho thời gian đếm ngược chạy hết
      Khi thời gian đếm ngược chạy hết, bạn sẽ thấy nút Get Link hiện ra. Bạn bấm vào nút đó để truy cập đến đường link đã được rút gọn bởi 123link.
      Get Link
      Get Link
      Bạn cứ yên tâm là link từ 123link sẽ không có ẩn chứa những mối nguy hiểm như virus, các pop-up quảng cáo không lành mạnh và phiền toái khi bạn đang thao tác các bước để tới link đích.
      HIỆN CÓ 0 BÌNH LUẬN