I am currently working with jPlayer to give the user some audio playback, if they wish to hear an audio sample, there is a slight complication in that the user first all creates a search, that can return a variable amount of audio files on the results page.
I have looked at the docs for jPlayer and it looks like you need to create a jPlayer instance for each audio file you wish to play, their examples are hard coded, which is great if you know that you will get the same number of results everytime you search for a sample. However for me 1 search could return 1 clip while another search could return 60 clips.
I have tried to implement multiple instances of jplayer like this, but to no avail as I get no audio output.
$('.jp-audio').each(function(index) {
var count = index+1;
$(this).attr("id", "jp_container_"+count)
$(".jp-stop").hide();
$("#jquery_jplayer_"+index+1).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:$(this).find('a.jp-play').attr('rel'),
wav:$(this).find('a.jp-play').attr('rel')
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "/media/js/jPlayer",
solution: "flash, html",
supplied: "mp3, wav",
wmode: "window",
preload: "auto"
});
$('body').append("<div id='jquery_jplayer_"+count+"' class='jp-jplayer'></div>");
});
How can I create a new jplayer instance for each of my audio clips? Below is the example from the Docs,
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function(event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
$("#jquery_jplayer_2").jPlayer("play", 0);
});
}
},
swfPath: "../js",
supplied: "m4a, oga",
wmode: "window"
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function(event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {
$(this).jPlayer("play");
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function() {
$("#jquery_jplayer_1").jPlayer("play", 0);
});
}
},
swfPath: "../js",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_2",
wmode: "window"
});
$("#jquery_jplayer_3").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
play: function() { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../js",
supplied: "m4a, oga",
cssSelectorAncestor: "#jp_container_3",
wmode: "window"
});
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
$("#jplayer_inspector_3").jPlayerInspector({jPlayer:$("#jquery_jplayer_3")});
taken from the source at,
http://jplayer.org/latest/demo-03/
in your case you only need one instance of jPlayer. If your Search Results HTML looked like this:
<ul>
<li data-m4a-path="http://www.example.com/track.m4a">Artist - Track</li>
< ... >
</ul>
then you could add this javascript to play the track:
$("li[data-m4a-path]").click(function () {
$("#jquery_jplayer_1").jPlayer("setMedia", {m4a: $(this).attr("data-m4a-path")});
});
use this: http://kolber.github.io/audiojs/
i have this on my portfolio website i'm working on and it's working very fine until now
and i need this a lot on a soundtrack portfolio
hope it helps
Related
So I've setup a fancybox with boxslider.
I have some problems with the boxslider when opening the fancybox again after closing it the first time.
website (please note that the onclick is only applied to the first block (top row, most left))
The fancybox is called by the code below:
<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">
This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.
Any suggestions on how to fix this?
Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.
$(document).ready(function() {
// Attach fancybox to every .image-spacer div
$("img-spacer").fancybox({
href : '#portfolio-1',
width: 1040,
margin: 0,
padding: 0,
closeBtn: false,
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
// On clicking a .img-spacer div, attach a bxSlider
$(".portfolio").click(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false
});
});
});
And for the HTML
<div class="img-spacer"></div>
Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.
I am using the following code for a gallery in AngularJS but if I try to use it without AngularJS it doesn't seems to work. If I run it with AngularJS then it will open the images properly but if I run it normally it will open the image as Can anyone to explain to me the difference?
app.js (AngularJS)
app.controller('GalleryController', function() {
var gallery = $('#gallery'),
gallery1 = $('#gallery1');
console.log("init gallery");
$('#gallery').photobox('a', {
thumbs: true,
loop: false
}, callback);
$('#gallery1').photobox('a', {
thumbs: true,
loop: false
}, callback);
function callback(){
console.log('image has been loaded');
}
console.log("GALLERY CONTROLLER BEGIN");
});
gallery.html (jQuery)
(function() {
'use strict';
var gallery = $('#gallery'),
gallery1 = $('#gallery1');
console.log("init gallery");
$('#gallery').photobox('a', {
thumbs: true,
loop: false
}, callback);
$('#gallery1').photobox('a', {
thumbs: true,
loop: false
}, callback);
function callback(){
console.log('image has been loaded');
}
console.log("GALLERY CONTROLLER BEGIN");
});
I'm trying to attach a Play/Pause functions of jPlayer to a custom css button.
Function:
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: server
}).jPlayer("play");
},
swfPath: "js/",
wmode: "window",
solution: "flash,html",
supplied: "mp3",
preload: "none",
volume:0.75,
cssSelectorAncestor: "",
cssSelector: {
play: "#play",
pause: "#pause"
}
});
$("#jquery_jplayer_1").bind($.jPlayer.event.pause, function(event) {
$(this).jPlayer("clearMedia");
$(this).jPlayer("setMedia", {
mp3: server
});
});
Controlers in jPlayer.min.js:
play:".jp-play",pause:".jp-pause",stop:".jp-stop"
Button:
<script type="text/javascript">
$(document).ready(function(){
$('#button').on('click', function(){
$(this).toggleClass('on');
});
});
</script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<section>
<a class="cssbutton" href="#" id="button"></a>
<span></span>
</section>
How do i go about adding these functions to the button?
Either give your button the ID play or change the CSS selector of your play button to your current ID:
$("#jquery_jplayer_1").jPlayer({
...
cssSelector: {
play: "#button",
...
}
});
Remember, the selectors that you refer to when constructing $("...").jPlayer({...}); should map to elements on your page, as explained in the Docs.
How can I show a confirm box after sound end? I use jPlayer HTML5 Audio player to play sound. I have something like:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://mysite.com/sound.mp3"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});
});
use ended event:
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: "http://mysite.com/sound.mp3"
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3",
ended: function() {
confirm('The sound ended?');
}
});
});
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/