Nhúng nhạc vào Blogspot với Code cực kỳ mới lạ- Tôi Share

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.mutedpath{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 !

...

Nội dung chính