Jplayer playlist div id not showing - playlist not working - javascript

I have jplayer working perfectly with PHP MYSQLi with audio tracks displaying, but challenge comes when I want to display the current playing file on top of the player with <div id="playlist"></div> but when applied using javascript, the whole playlist disappears, but when i remove the triggering code from the javascript, the playlist appears. Here is my code
Before current item playing - code (playlist shows, player working fine)
<script type="text/javascript">
$(document).ready(function () {
var cssSelector = { jPlayer: "#playlist_1", cssSelectorAncestor: "#playlist_container" };
var playlist = <?php echo $playlist;?>;
var options = { swfPath: "assets/jplayer/jquery.jplayer.swf", supplied: "<?php echo $supplied;?>", smoothPlayBar: true, autoPlay: true, keyEnabled: true, shuffleOnLoop: true, wmode: "window", free: Boolean, };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>
Playlist shows - Image
With current item playing - code(playlist disappears)
<script type="text/javascript">
$(document).ready(function () {
var cssSelector = { jPlayer: "#playlist_1", cssSelectorAncestor: "#playlist_container" };
var playlist = <?php echo $playlist;?>;
var options = { swfPath: "assets/jplayer/jquery.jplayer.swf", supplied: "<?php echo $supplied;?>", smoothPlayBar: true, autoPlay: true, keyEnabled: true, shuffleOnLoop: true, wmode: "window", free: Boolean, };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
$("#playlist_1").on($.jPlayer.event.ready, function (event) {
var current = myPlaylist.current;
var playlist = myPlaylist.playlist;
$.each(playlist, function (index, obj) {
if (index == current) {
$("#playing").html("<span class='artist-name'>" + obj.artist + "</span>" + "<br>" + "<span class='track-name'>" + obj.title + "</span>");
}
});
});
</script>
Playlist disappears - Image
Output html
<div id="playlist_container" class="jp-audio">
<div id="jplayer"></div>
<div class="jp-content jp-type-playlist">
<div id="playlist_1" class="jp-jplayer"></div>
<div id="playing"></div>
<ul class="jp-controls">
<li><img class="img-responsive" src="images/player/3.png" alt="Image"></li>
<li><img class="img-responsive" src="images/player/5.png" alt="Image"></li>
</ul>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
<b></b>
</div>
</div>
</div>
<div class="jp-current-time"></div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li> </li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
Anything am not doing

Related

How to add pause and play function on responsive slide

I have to add a slide to my project with pause and play functions.I cannot find any code for pause and play functionality. Why it is not working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
var forcePause = false;
// You can also use "$(window).load(function() {"
$(function () {
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if (!forcePause) // new line
// Restart
startCycle();
}
};
$('.pause_slider').click(function (e) {
e.preventDefault();
forcePause = true;
$(this).hide()
$('.play_slider').show();
clearInterval(rotate);
});
$('.play_slider').click(function (e) {
e.preventDefault();
forcePause = false;
$(this).hide();
$('.pause_slider').show();
restartCycle();
});
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.
Thanks,

Start jPlayer from a text link

I have a jPlayer streaming a radio channel and I'd like to trigger the audio from a text link, besides the "Play" button. Eg: "Let's play some music", where play some music triggers the action of the jPlayer "Play" button.
Here's my HTML markup
<p>Let's play some music</p> <!-- This line will trigger the play button -->
<!-- START JPLAYER -->
<div id="startpage_jplayer" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
<div class="jp-info-bar">
</div>
</div>
<!-- END JPLAYER -->
and this is the JavaScript code
$(function(){
var stream = {
title: "",
mp3: "http://localhost:8000/blurfm"
},
ready = false,
eurlattempts = 0;
$("#startpage_jplayer").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
//$.dbg('ready');
},
playing: function(event) {
eurlattempts = 0;
$('#jp_container_1 .jp-info-bar').text('');
},
pause: function() {
$(this).jPlayer("clearMedia");
$(this).jPlayer("setMedia", stream);
//$.dbg('pause');
},
error: function(event) {
if (ready && event.jPlayer.error.type == $.jPlayer.error.URL && eurlattempts<5) {
var self = this;
eurlattempts++;
setTimeout(function(){
$(self).jPlayer("setMedia", stream).jPlayer("play");
},1000);
} else if (ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
} else {
eurlattempts = 0;
$('#jp_container_1 .jp-info-bar').text('Error: '+event.jPlayer.error.message+' '+event.jPlayer.error.hint+' ('+event.jPlayer.error.type+' context '+event.jPlayer.error.context+')' + ( event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET ? 'Y':'N') );
}
},
//solution: "flash,html",
swfPath: "/demo/",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
Thanks in advance!
OK, so try this:
You have to add an id attribute to your <a> element first:
<p>Let's play some music</p>
id can be anything, I just named it 'playSomeMusic' for test
then in your javascript add an click event for the <a> element and call the play method for jPlayer like this:
$("#playSomeMusic").click(function(){
$("#startpage_jplayer").jPlayer("play");
});
that's it. this code should work fine. please give it a try and update us on the result

jQuery scroll to previous

I need some help, theres a selection list and now you can scroll to next "shop" by clicking to the right. But cant get the left button to go to previous "shop". Theres a list of shops and you can scroll horizontal between each shop.
This is right button:
$(function() {
var scrollerwidth = 0;
var scroller = $("#scroller");
$("#scroller li").each(function() {
scrollerwidth += $(this).width() + 1;
});
$("#scroller").width(scrollerwidth);
$("#scroller li:first-child").attr('id', 'current');
var iscroll = new IScroll('#countylist', {
eventPassthrough: true,
scrollX: true,
scrollY: false
});
$("#scrollnext").click(function() {
current = document.getElementById("current");
current.id = "";
//var next = $("#current").next();
var next = current.nextSibling.nextSibling;
next.id = "current";
iscroll.scrollToElement(next);
});
}
)
HTML:
<div id="scrollnext" class="scrollnav next">
<span>ยป</span>
</div>
<div id="countylist">
<div id="scroller">
<ul>
<? foreach ($counties as $i => $c): ?>
<li>
<a id="county_<?=$i?>" href="javascript:" class="stopped"><span><?=utf8_decode($c)?> (<?=count($stores_by_county[$c])?>)</span></a>
</li>
<? endforeach ?>
</ul>
What do I need to get it for previous?

Jquery 2.0 - Reanimate animation on click

I have bit of a problem. Animation is working just first time is clicked, second time when it is clicked, it is refusing to work - when I click right and back it is working, but when I want to go right again it is not working. Code:
var main_container = $('.main_container'),
menu = $('.home_navigation_text'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
menu.hover(
function(){
var $this = $(this),
page = $this.find('a').attr('href');
second_page.empty().load(page);
},
function(){
}
);
menu.on('click', function(e){
main_container.animate({
right: '+=' + body_width
}, 600, 'linear', function() {
go_back();
});
return false;
});
function go_back()
{
var back = second_page.find('.back');
back.on('click', function(e){
main_container.animate({
left: '+=' + body_width
}, 600, 'linear', function() {
});
return false;
});
}
HTML Code:
<div class="main_container clearfix">
<section class="home_page clearfix">
<header class="home_header container">
<div class="grid_3 alpha omega" id="home_logo">
<img class="" src="<?php echo IMG ?>resources/jbs_cc_logo.png" alt="JBS Logo">
</div>
<div class="grid_9 alpha omega">
</div>
</header>
<!-- END OF HEADER -->
<div class="home_main container">
<nav class="home_navigation clearfix">
<ul class="clearfix">
<?php foreach ($menu as $mn): ?>
<li class="home_navigation_text">
<a class=home_navigation_link href="<?php echo base_url($mn['slug']) ?>"><?php echo $mn['title'] ?></a>
</li>
<?php endforeach ?>
</ul>
</nav>
</div>
</section>
<section class="second_page">
</section>
</div>
As you're loading content, I'm guessing the menu is somehow replaced, and is as such dynamic. Delegating to the main_container would probably work, but it's hard to say as there is no markup posted and I have no idea how it looks ?
var main_container = $('.main_container'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
main_container.on({
mouseenter: function() {
second_page.empty().load( $(this).find('a').attr('href') );
},
click: function(e) {
e.preventDefault();
main_container.animate({
right: '+=' + body_width
}, 600, 'linear');
}
}, '.home_navigation_text');
main_container.on('click', '.back', function(e){
e.preventDefault();
main_container.animate({
right: '-=' + body_width
}, 600, 'linear');
});

issue with multiple instances of jPlayer in FF and IE

i have a page that calls for multiple instances of jplayer. everything works fine in Chrome/Safari, but in FF and IE, the first instance of the player loads the 'play' button and progress bar, but the audio doesn't work.
for the 2nd and 3rd instance, the 'play' button is there, but there's no progress bar, and no audio. i'm 90% sure this is an issue with my js file, which looks like this:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/demo.mp3"
});
},
ended: function (event) {
$(this);
},
supplied: "mp3"
}).bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Commercial Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/English_Narration_Demo.mp3"
});
},
ended: function (event) {
$(this);
},
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
and heres the html:
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer">
</div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress2">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
</div>
</div>
</div>
i've removed some of the inline styling and other extraneous things like Download buttons, but can add the full code if this is too confusing/ugly (i'm sure theres an extra in there somewhere).
Neither Firefox nor IE will play an MP3 file unless you supply a valid swfPath.
You are supplying a .jp-interface element as the CSS Ancestor but this is incorrect - you need to supply "the cssSelector of an ancestor of all cssSelectors" (see the docs)
try the changes to your code i made in this Fiddle - see if it works for you.
the new HTML markup looks like this
<div class="players">
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div id="jp_container_2" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="players">
<div id="jp_container_3" class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_3" class="jp-jplayer"></div>
<div id="jp_interface_3" class="jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and the new Javascript:
$("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
supplied: "mp3"
});
$("#jquery_jplayer_2").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2664_1315685834.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
cssSelectorAncestor:"#jp_interface_2",
supplied: "mp3"
});
$("#jquery_jplayer_3").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.freesfx.co.uk/rx2/mp3s/3/2660_1315685820.mp3" });
},
play: function () { $(this).jPlayer("pauseOthers"); },
cssSelectorAncestor:"#jp_interface_3",
supplied: "mp3"
});
FF doesn't actually play MP3 files but instead plays OGG files. If the demo songs in the above corrected example code from Lloyd works but when you change the MP3 path to an MP3 file on your server and it doesn't work then make sure your server has the MIME type "application/ogg" (without quotes). The server will see the MP3 file in the code and play it as if it were an OGG application file. I'm not sure why this works on my server. This is not my discovery but rather a tip I found on the Internet. Hope it works for you.
Also make sure the HTML head has Lloyd's new Javascript and is wrapped like this:
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
Lloyd's javascript code goes here
});
//]]>
</script>
</head>
Tip: Click on Lloyd's "fiddle" link - the "Play" links work.
i don't know why it dosn't work in ie... but opera and ff don't play mp3 file
swfPath: "js",
supplied: "mp3",
wmode: "window"
In order to play them, there is Jplayer.swf file in js folder. You should write swfPath: "write the track of Jplayer.swf"...

Categories