Merhabalar,
mesela play butonuna bastım diyelim ve sayfalarda gezinirken radyonun çalmasını nasıl sağlarım?
html kodları :
<!-- Player Button -->
<div class="player-button-frame">
<!-- Player Button - Share -->
<div class="player-button share">
<!-- Share -->
<a rel="nofollow" class="player-share facebook" data-popup-width="550" data-popup-height="300" data-popup-url="https://www.facebook.com/sharer.php?u=<?=$site?>" data-popup-url-extra="" title="Facebook'da Paylaş">
<i class="zmdi zmdi-facebook"></i>
</a>
<a rel="nofollow" class="player-share twitter" data-popup-width="550" data-popup-height="300" data-popup-url="https://twitter.com/share?text=" data-popup-url-extra="Radyo V5 &url=<?=$site?>" title="Twitter'da Paylaş">
<i class="zmdi zmdi-twitter"></i>
</a>
<i class="zmdi zmdi-share"></i>
</div>
<!-- Player Button - Play -->
<div id="playerstatusbutton" class="player-button play paused">
<i id="btnplay_" class="zmdi zmdi-play"><audio class="radio-element" controls preload="none"> <source src="<?php echo $refcek['link']; ?>"> </audio></i>
<i id="btnstop_" class="zmdi zmdi-pause"></i>
</div>
<!-- Player Button - Mute -->
<div class="player-button mute">
<i class="zmdi zmdi-volume-off"></i>
<i class="zmdi zmdi-volume-up"></i>
</div>
</div>Js Kodları:
$(function() {
setInterval(function(){checkOnline()}, 2000);
function checkOnline(){
$.ajax({
url: '/static',
success: function (response) {
},
complete: function () {
// clearTimeout(sTimeOut);
}
});
}
var radioElement = $(".radio-element");
$(".fixed-player").addClass("loaded");
$("body").addClass("player-loaded");
if(radioElement[0].paused){
$("#playerstatusbutton").addClass("paused");
} else {
$("#playerstatusbutton").removeClass("paused");
}
radioElement.trigger("pause");
$inputRange = $('input[type="range"]');
var inputValue = 1;
var lastValue = 1;
$inputRange.rangeslider({
polyfill: false,
onSlide: function(position, value) {
if (value == "0") {
inputValue = value;
$(".player-button.mute").addClass("muted");
radioElement.prop("volume", value)
} else {
inputValue = value;
lastValue = value;
$(".player-button.mute").removeClass("muted");
radioElement.prop("volume", value)
}
$(".player-volume-value").text(value*100);
}
});
$(".player-button.mute").click(function() {
if ($(this).hasClass("muted")) {
var value = 1;
$(".player-volume-value").text(value*100);
radioElement.prop("volume", value);
$inputRange.val(100).change();
$(this).removeClass("muted");
} else {
var value = 0;
radioElement.prop("volume", value)
$(this).addClass("muted");
$(".player-volume-value").text(0);
$inputRange.val(0).change();
}
});
$(".player-button.share").click(function() {
if ($(this).hasClass("shared")) {
$(this).removeClass("shared");
} else {
$(this).addClass("shared");
}
});
$(".player-button.play").click(function() {
if ($(this).hasClass("paused")) {
var playerSrc = radioElement.find("source")[0].src;
radioElement.find("source")[0].src = "";
radioElement.find("source")[0].src = playerSrc;
radioElement[0].load();
radioElement.trigger("play");
$(this).removeClass("paused").addClass("");
} else {
radioElement.trigger("pause");
$(this).removeClass("").addClass("paused");
}
});
$(".player-share").click(function() {
var getPopupWidth = $(this).data('popup-width'),
getPopupHeight = $(this).data('popup-height'),
getPopupUrl = $(this).data('popup-url'),
getPopupUrlExtra = $(this).data('popup-url-extra');
centeredPopup(getPopupWidth, getPopupHeight, getPopupUrl, getPopupUrlExtra);
});
var artistImageElement = $('.player-info-image img'),
artistNameElement = $('.player-info-title .name'),
artistTitleElement = $('.player-info-title .title'),
artistNextNameElement = $('.player-info-title.next .next-name');
function getPlayerInfo() {
$.ajax({
url : '/action/radioinfo',
cache : true,
success : function(data) {
artistNextNameElement.text(data);
}
}).fail(function (jqxhr, textStatus, error) {
artistImageElement.attr('src', artistImageElement.data('default-image'));
artistNameElement.text(artistNameElement.data('default-name'));
artistTitleElement.text(artistTitleElement.data('default-title'));
});
}
var artistImageElement = $('.player-info-image img'),
artistNameElement = $('.player-info-title .name'),
artistTitleElement = $('.player-info-title .title'),
artistNextNameElement = $('.player-info-title.next .next-name');
function getPlayerInfo() {
$.ajax({
url : '<?php echo $return_json; ?>',
cache : true,
dataType : 'json',
success : function(data) {
var songerName = data.songer,
songName = data.song,
songerImage = data.song_image,
nextSongName = data.next['songer'] + ' - ' + data.next['song'];
if (songerName == 'Anons \ Reklam') {
artistImageElement.attr('src', artistImageElement.data('default-image'));
artistNameElement.text(artistNameElement.data('default-name'));
artistTitleElement.text(artistTitleElement.data('default-title'));
console.log('Anons/Reklam');
} else {
artistNameElement.text(songerName);
artistTitleElement.text(songName);
artistImageElement.attr('src', songerImage);
var mainDiv = $('.marquee');
if(mainDiv.length == 1){
mainDiv.html(songerName + ' - ' + songName );
}
}
if (data.next['songer'] == '') {
$('.player-info-title.next').hide();
}else {
$('.player-info-title.next').show();
artistNextNameElement.text(nextSongName);
}
}
}).fail(function (jqxhr, textStatus, error) {
artistImageElement.attr('src', artistImageElement.data('default-image'));
artistNameElement.text(artistNameElement.data('default-name'));
artistTitleElement.text(artistTitleElement.data('default-title'));
});
}
getPlayerInfo();
setInterval(getPlayerInfo, 15000);
$(document).pjax('.pjax-href', '#radyo7pjax', {
fragment: '#radyo7pjax',
timeout: 5000
});
$('#radyo7pjax').on('pjax:start', function() {
song.pause();
$('.top-music-player-button').removeClass('playing').text('DİNLE');
$('.page-progress').removeClass('inActive').addClass('stage-one');
$('.site-cover-slider-frame').addClass('wrapped');
$('body').removeClass('mobile-menu-active');
galleryInfinite = $('.photo-gallery-detail');
if (galleryInfinite.length !== 0) {
galleryInfinite.infiniteScroll('destroy');
}
})
getPlayerInfo();
setInterval(getPlayerInfo, 15000);
$(document).pjax('.pjax-href', '#radyoanacontain', {
fragment: '#radyoanacontain',
timeout: 5000
});
$('#radyoanacontain').on('pjax:start', function() {
// song.pause();
$('.top-music-player-button').removeClass('playing').text('DÄ°NLE');
$('.page-progress').removeClass('inActive').addClass('stage-one');
$('.site-cover-slider-frame').addClass('wrapped');
$('body').removeClass('mobile-menu-active');
galleryInfinite = $('.photo-gallery-detail');
if (galleryInfinite.length !== 0) {
galleryInfinite.infiniteScroll('destroy');
}
}).on('pjax:end', function() {
galleryInfinite = $('.photo-gallery-detail');
$('.page-progress').addClass('stage-two');
setTimeout(function () {
$('.page-progress').addClass('inActive').removeClass('stage-one stage-two');
$('.site-cover-slider-frame').removeClass('wrapped');
}, 1000);
$.getScript('');
$.getScript('');
var radioElement = $(".radio-element");
console.log(radioElement[0].paused);
if(radioElement[0].paused){
$("#playerstatusbutton").addClass("paused");
} else {
$("#playerstatusbutton").removeClass("paused");
}
});
});
function infiniteGalleryInitPjax() {
// Get Infinite Scroll
$.getScript('js/_infinite-scroll.pkgd.min.js');
// Define Infinite Scroll
$('.photo-gallery-detail').infiniteScroll({
path: ".pagination__next",
append: '.js-gallery-item',
status: '.scroller-status',
scrollThreshold: 200,
}).on('load.infiniteScroll', function(event, response, path) {
// Define Current Page
currentPage = galleryInfinite.data('infiniteScroll').pageIndex;
// Gallery
// Last Image Control
if(currentPage >= $('#totalImage').val()) {
galleryInfinite.infiniteScroll( 'option', {
loadOnScroll: false
});
} else {
galleryInfinite.infiniteScroll( 'option', {
loadOnScroll: true
});
}
}).on( 'history.infiniteScroll', function() {
// Google Analytics
});
}
$(document).ready(function(){
$("#player-info-title").load(" #player-info-title");
$("#player-info-image").load(" #player-info-image");
setInterval(function(){
$("#player-info-title").load(" #player-info-title");
$("#player-info-image").load(" #player-info-image");
}, 5000);
});