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 menyelamatkannya, sobat bisa mengikuti tutorial di bawah ini.

Instruksi Penggunaan :
Langkah 1 : Temukan tag </head> dan tambahkan kode berikut ini dia atasnya.


<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 kode </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 bentuk .mp3. Jika sobat tidak memiliki music dengan format .mp3, Sobat bisa mengunggahnya ke zippyshare.com

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

4 Responses to "Cara Menyematkan Music di Halaman Situs Web Dengan Gaya Baru"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close