| Respuesta: Duda jquery mp3 player
si, probe pero nada...
por lo que ando viendo en mi codigo me parece que tengo un conflicto de librerias, creo...
En el <HEAD> estoy llamando a
Código:
<script type="text/javascript" src="js/combined.js"></script>
para utilizar un scroll, que es la funcionalidad mas importante de la pagina.
En el <body>, abajo de todo, llamo a las siguientes librerias
Código:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.serialScroll.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
y luego el script
(agregue " $.noConflict();" por que lei que evita problemas entre librerias, pero no se si lo estoy utilizando bien...seguramente no)
Código:
<script type="text/javascript">
$.noConflict();
function contactUp () {
var h = $("#ajax").outerHeight();
$("#contact-wrap").animate({top:"-" + h + "px"}, 500, "easeInOutCubic", function () {
$("#tab").css("backgroundPosition","0 0");
document.contactToggle = false;
});
$("#overlay").fadeOut(500);
}
function contactDown () {
$("#overlay").css("opacity","0").show().fadeTo(300,0.5);
$("#contact-wrap").animate({top:"0"}, 500, "easeInOutCubic", function () {
document.contactToggle = true;
$("#tab").css("backgroundPosition","0 -27px");
});
}
if (!ie) {
$(document).ready(function() {
$("#globalPlayer").jPlayer( {
ready: function () {
this.element.jPlayer("setFile", "mp3/welcome.mp3").jPlayer("play");
},
swfPath: 'js/'
});
var multwidth = $('#scroll-container > #scroller-list > .scroller-item ').size();
$("body").append("<div id='overlay'></div>")
var h = $("#ajax").outerHeight();
$("#contact-wrap").children("#ajax").show().parent().css("top", "-" + h + "px");
$('#scroll-container > #scroller-list').width((multwidth*950) + 'px');
var offset = $('.nav > li:eq(0)').position(); //Position of navigation list item
var objwidth = $('.nav > li:eq(0)').outerWidth(); //Width of navigation list item
var width = $(window).width(); //Width of window
//Explination
//((offsetOfNavItem - ((widthOfWindow - fixedContainerWidth)/onlyOnOneSide)) + (widthOfNavItem/theCenter) - halfTheImageWidth)
var scroll = ((offset.left - ((width-950)/2)) + (objwidth/2) - 5);
$('#scroll-arrow').css('backgroundPosition','' + scroll + 'px 0');
$('.nav li a:not(:last)').each(function(){
var link = $(this).html();
$(this).attr("href","#" + link);
});
$('#main').serialScroll({
target:'#scroll-container',
items:'li.scroller-item', // Selector to the items (relative to the matched elements)
prev:'.lft-arrow',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
next:'.rgt-arrow',// Selector to the 'next' button (absolute too)
//axis:'y',// The default is 'y' scroll on both ways
navigation:'.nav li a',
duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
easing:'easeInOutCubic',
//queue:false,// We scroll on both axes, scroll both at the same time.
//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
//stop:false,// Each click will stop any previous animations of the target. (false by default)
//lock:true, // Ignore events if already animating (true by default)
//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )
//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
//interval:1000, // It's the number of milliseconds to automatically go to the next
constant:false, // constant speed
onBefore:function( e, elem, $pane, $items, pos ){
/**
* 'this' is the triggered element
* e is the event object
* elem is the element we'll be scrolling to
* $pane is the element being scrolled
* $items is the items collection at this moment
* pos is the position of elem in the collection
* if it returns false, the event will be ignored
*/
//those arguments with a $ are jqueryfied, elem isn't.
e.preventDefault();
if( this.blur )
this.blur();
//Sliding arrow
var offset = $('.nav > li:eq(' + pos + ')').position(); //Position of navigation list item
var objwidth = $('.nav > li:eq(' + pos + ')').outerWidth(); //Width of navigation list item
var width = $(document).width(); //Width of window
//Explination
//((offsetOfNavItem - ((widthOfWindow - fixedContainerWidth)/onlyOnOneSide)) + (widthOfNavItem/theCenter) - halfTheImageWidth)
var scroll = ((offset.left - ((width-950)/2)) + (objwidth/2) - 5);
$("#scroll-arrow").animate({backgroundPosition:"(" + scroll + " 0)"}, 700, "easeInOutCubic");
},
});
document.contactToggle = false;
$("#tab").click(function(){
if (document.contactToggle) {
contactUp();
} else {
contactDown();
}
return false;
});
$("#overlay").click(function(){
if (document.contactToggle) {
contactUp();
}
return false;
});
if (self.document.location.hash.match("wpcf7"))
{
contactDown();
}
$("#video").click(function(){
$("#globalPlayer").jPlayer("stop");
$(".jp-pause").hide();
$(".jp-play").show();
});
});
}
</script>
<div class="audio_player" id="globalPlayer"></div>
<script type="text/javascript">
$(document).ready(function() {$(".jp-pause").click(function(){
$("#globalPlayer").jPlayer("pause");
$(".jp-pause").hide();
$(".jp-play").show();
}).hide();
$(".jp-stop").click(function(){
$("#globalPlayer").jPlayer("stop");
$(".jp-pause").hide();
$(".jp-play").show();
});
var jpPlayTimedemo1 = $("#jplayer_play_timedemo1");
var jpTotalTimedemo1 = $("#jplayer_total_timedemo1");
$("#jplayer_playdemo1").click(function(){
$(".jp-pause").hide();
$(".jp-play").show();
$("#globalPlayer").jPlayer("volume", 80);
$("#globalPlayer").jPlayer({
ready: function () {
$("#globalPlayer").jPlayer("setFile", "mp3/Agua y arena - JPG.mp3").jPlayer("play");
},
})
.jPlayer("setFile", "mp3/Agua y arena - JPG.mp3").jPlayer("play")
.jPlayer( "cssId", "loadBar", "jplayer_load_bardemo1" )
.jPlayer( "cssId", "playBar", "jplayer_play_bardemo1" )
.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTimedemo1.text($.jPlayer.convertTime(playedTime));
jpTotalTimedemo1.text($.jPlayer.convertTime(totalTime));
});
$("#jplayer_pausedemo1").show();
});
var jpPlayTimedemo2 = $("#jplayer_play_timedemo2");
var jpTotalTimedemo2 = $("#jplayer_total_timedemo2");
$("#jplayer_playdemo2").click(function(){
$(".jp-pause").hide();
$(".jp-play").show();
$("#globalPlayer").jPlayer("volume", 80);
$("#globalPlayer").jPlayer({
ready: function () {
$("#globalPlayer").jPlayer("setFile", "mp3/test1.mp3").jPlayer("play");
},
})
.jPlayer("setFile", "mp3/test1.mp3").jPlayer("play")
.jPlayer( "cssId", "loadBar", "jplayer_load_bardemo2" )
.jPlayer( "cssId", "playBar", "jplayer_play_bardemo2" )
.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTimedemo2.text($.jPlayer.convertTime(playedTime));
jpTotalTimedemo2.text($.jPlayer.convertTime(totalTime));
});
$("#jplayer_pausedemo2").show();
});
var jpPlayTimedemo3 = $("#jplayer_play_timedemo3");
var jpTotalTimedemo3 = $("#jplayer_total_timedemo3");
$("#jplayer_playdemo3").click(function(){
$(".jp-pause").hide();
$(".jp-play").show();
$("#globalPlayer").jPlayer("volume", 80);
$("#globalPlayer").jPlayer({
ready: function () {
$("#globalPlayer").jPlayer("setFile", "mp3/test2.mp3").jPlayer("play");
},
})
.jPlayer("setFile", "mp3/test2.mp3").jPlayer("play")
.jPlayer( "cssId", "loadBar", "jplayer_load_bardemo3" )
.jPlayer( "cssId", "playBar", "jplayer_play_bardemo3" )
.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTimedemo3.text($.jPlayer.convertTime(playedTime));
jpTotalTimedemo3.text($.jPlayer.convertTime(totalTime));
});
$("#jplayer_pausedemo3").show();
});
});</script>
|