wb_sunny

Breaking News

2020/02/24

Cara Menyematkan Music di Halaman Situs Web Dengan Gaya Baru


Cara Menyematkan Music di Halaman Situs Web Dengan Gaya Baru - Hallo sobat blogger, pada kesempatan ini saya akan membagikan tutorial tentang cara menampilkan pemutar music di situs web atau blog dengan gaya baru. Jika biasanya pembaca akan bosan ketika membaca artikel di blog kita, dengan adanya pemutar music ini pembaca akan ada sedikit hiburan dan lebih kerasan berlama-lama membaca artikel di blog kita. Untuk memasangnya, sobat bisa mengikuti tutorial di bawah ini.

Cara Memasang Music di Blog atau Situs Web :
Langkah 1 : Temukan tag </head> dan tambahkan kode berikut ini sebelum tag </head>.

<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 () {
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">Mendengarkan Music</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">Hiburan - Mendengarkan Musik</div><div class="wprp_artist">Artis Tanpa Nama</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">Music Ceria</div>' +
' <div class="wprp_artist">Artis Tanpa Nama </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":"Musik Hiburan","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>


Langkah 2 : Letakan kode di bawah ini sebelum Tag </body>

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

Lalu ganti http://www45.zippyshare.com/music/WGUGkxFz/0/nhachay.mp3 dengan URL music yang anda inginkan dan kode ini hanya berfungsi dengan music dalam Format MP3. Jika sobat sudah memiliki Music dengan format .MP3 Dan ingin memasangnya di blog, Sobat bisa mengunggahnya terlebih dahulu ke zippyshare.com Dan mengambil URL nya untuk dipasang di blog.

Demikian artikel dari saya tentang Cara Menyematkan Music di Halaman Situs Web Dengan Gaya Baru, Semoga artikel diatas bermanfaat bagi sobat semua. Terima kasih dan Terima kasih

Tags :

bm
@anaz_arblit

Hanya Seorang Blogger dan Content Writer

Post a Comment