Can't figure this out - I simply want it to carrying on playing the next track when a song is finished.. autoplay set to true.. can't see what's throwing this out?
http://bavanandan.co.uk/press/
(I know, it's old, but I was just searching for a solution myself and stumbled upon this.)
How about
var myPlaylist = new jPlayerPlaylist( {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1" },
[],
{
swfPath: "wolf-jplayer/assets/js/src",
wmode: "window",
ended: function() {
// continouos play
var i = i+1;
myPlaylist.play(i);
}
}); //jPlayerPlaylist
Related
I am testing a Tab Capture API to record audio of web page that contains a text to speech flash object. while recording a web page the playback audio disappear but sounds OK in the recorded file.
I am using the following MediaStream constraint to record video and audio.
var MediaStreamConstraint = {
audio: true,
video: true,
videoConstraints: {
mandatory: {
chromeMediaSource: 'tab',
minWidth: 640,
maxWidth: 640,
minHeight: 420,
maxHeight: 420
}
}
};
am i missing something in the stream constraint or there is some other solution to the problem?
As others have said, playing the audio from the captured MediaStream in the callback works:
chrome.tabCapture.capture(MediaStreamConstraint, gotStream);
function gotStream(stream) {
window.audio = document.createElement("audio");
window.audio.src = window.URL.createObjectURL(stream);
window.audio.play()
}
Keep in mind to grant permissions in manifest file
"permissions": [
"tabCapture",
"activeTab",
...
],
The background.js should be something like this:
var recorder = new MRecordRTC();
function handleCapture(stream) {
recorder.addStream(stream);
recorder.mediaType = { video: true, audio: true };
recorder.startRecording();
}
var MediaStreamConstraint = {
audio: true,
video: true,
videoConstraints: {
mandatory: {
chromeMediaSource: 'tab',
minWidth: 640,
maxWidth: 640,
minHeight: 420,
maxHeight: 420
}
}
};
function captureCurrentTab() {
chrome.tabCapture.capture(MediaStreamConstraint, handleCapture);
}
function stopCapturing() {
// stops the recording and save audio and video
}
If these are not the case, could you please attach more related codes since the codes you attached look good with me.
In your background script's handleCapture function, try this to continue playback:
var audio = new Audio(window.URL.createObjectURL(stream));
audio.play();
only add the next lines
window.audio = document.createElement("audio");
window.audio.src = window.URL.createObjectURL(stream);
window.audio.play()
I am noticing that my masonry page is creating overlap and unequal spacing. This isn't consistent and seems to happen sometimes, while at other times it works fine. In every scenario if I resize my window slightly, the mason() function kicks in and fixes it. I originally thought that it was an issue with having to wait for the images to load (around 30 at a time are loading), but I have already implemented imagesLoaded and see no difference. Can anyone point out my mistake?
<script>
function mason() {
var $container = $('#dealcontainer').masonry({
itemSelector: '.outerdeal',
columnWidth: '.outerdeal'
});
$container.imagesLoaded(function(){
$container.masonry();
});
}
function colorize()
{
$('.dealfilterli').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('li').addClass("colorize");
} else {
$(this).closest('li').removeClass("colorize");
}
});
});
}
function InitInfiniteScroll(){
$('#dealcontainer').infinitescroll({
navSelector : "div.pagination",
nextSelector : "div.pagination li a",
itemSelector : "#deals div.outerdeal",
loading:{
finishedMsg: '',
img: 'http://www.example.com/img/icons/site/spinner.gif',
msgText: '',
speed: 'fast',
},
},function(newElements) {
var $newElems = $( newElements );
$('#dealcontainer').masonry( 'appended', $newElems );
mason();
});
}
$( document ).ready(function() {
InitInfiniteScroll();
colorize();
});
$(window).resize(function() {
InitInfiniteScroll();
mason();
}).resize();
</script>
I was having the exact same issue despite using imagesLoaded, and after a lot of trial and error I found that the problem can be solved with a setTimeout function. Here is an example from my project:
setTimeout(function() {
masonryContainer.imagesLoaded(function() {
masonryContainer.prepend(newPost);
masonryContainer.masonry('prepended', newPost);
});
}, 500);
The 500ms timeout is arbitrary, so I would play around with that on your page to find the lowest possible value that still fixes your issue. Hope that helps!
Cheers,
Jake
You should use:
$container.masonry('reloadItems');
on mason() function and everything will be replaced in the correct position.
I've weirdest problem where I can successfully play 1 shoutcast station and cannot some other using jplayer. This is strange as information of shoutcast server hints on similar configuration:
http://198.27.79.224:9770/
http://108.61.73.119:8128/
I must also note that flash version of jplayer plays both, but html version only plays first one.
Jplayer js looks like this
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"#1 Stream",
mp3:"http://108.61.73.119:8128/;stream/1"
},
{
title:"#2 Stream",
mp3:"http://108.61.73.118:8128/;stream/1"
},
{
title:"#3 Stream",
mp3:"http://108.61.73.117:8128/;stream/1"
},
{
title:"#4 Stream",
mp3:"http://198.27.79.224:9770/;stream/1"
},
], {
swfPath: "jplayer",
supplied: "mp3",
wmode: "window",
preload: "none",
//solution: "flash, html",
smoothPlayBar: true,
keyEnabled: true
});
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
});
//]]>
</script>
Any ideas?
It seems flash version plays all of the streams, but html5 version only selected few. I never got to the bottom of the problem.
So I'm trying to add animations/transitions using YUI and I'm wondering why on earth it uses fixed heights?
http://yuilibrary.com/yui/docs/transition/transition-basic.html
What's the deal with that?
The examples you mean? They do not have to, they are just poor examples. YUI Transition can use all possible values, it even support completely dynamic animations like so:
// Will create a slideDown effect on #thing
Y.one('#thing').transition({
height: function(node) {
return node.get('scrollHeight') + 'px';
},
duration: 0.1,
easing: 'ease-out',
on: {
start: function() {
var overflow = this.getStyle('overflow');
if (overflow !== 'hidden') { // enable scrollHeight/Width
this.setStyle('overflow', 'hidden');
this._transitionOverflow = overflow;
}
},
end: function() {
if (this._transitionOverflow) { // revert overridden value
this.setStyle('overflow', this._transitionOverflow);
delete this._transitionOverflow;
}
}
}
});
This example will expand an element that was previously 0px high to its expected height.
I use jplayer in my page and when clicked a link I want to play the clicked one. However every time test1.mp3 is played. How can I solve it? The code is below:
the page is as follows if needed:
http://www.dilyurdu.com/audio.htm
function listen(mp3_index){
var mp3_file;
mp3_file="test"+mp3_index+".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: mp3_file,
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});
}
links are as follows:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<a href="javascript:listen(1);" class="jp-play" >play 1</a><br /><br />
<a href="javascript:listen(2);" class="jp-play" >play 2</a><br /><br />
<a href="javascript:listen(3);" class="jp-play" >play 3</a>
Hey you can do the following.
I instantiate the player on page load:
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
Then inside a listener, which will be unique for every item,
you need to:
A) Fetch track name/URL, I guess you should be able to figure this out.
B) Pass the track to the setMedia
jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3: "http:xxxx.rackcdn.com/"+track+".MP3"
});
C) Play the track
jQuery("#jquery_jplayer_1").jPlayer("play");
To get the track Id you need to install listeners on your playable items(maybe a a playable class?) and get the track from that one.
i am also looking for a solution for this.
Just created it in jsfiddle visit http://jsfiddle.net/vijayweb/A5LQF/2/
It plays only one song. any help will be grateful.
I found a relevant solution...still play only the first default song.
multiple mp3 links in a single page with jplayer
HTML:
<a class="ChangePath" data-key="1" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="2" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="3" href="javascript:void(0);">Song1</a>
jQuery:
$(function () {
$('.ChangePath').on('click', function () {
$("#jquery_jplayer_1").jPlayer("destroy");
var link = "test" + $(this).data('key') + ".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});
player.jPlayer("play", 0);
});
});
If you are using ajax:
$(function () {
$('.ChangePath').on('click', function () {
$.ajax({
$("#jquery_jplayer_1").jPlayer("destroy");
var link = "test" + $(this).data('key') + ".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});
player.jPlayer("play", 0);
});
});
});
Depending on your project you might need to change the hyperlinks to something else, but the jQuery will work.
$('.reproducirContenedor').on('click',function(e){// click en el elento a reproducir
e.preventDefault();//para que cuando el usuario haga click en el icono de play no salte la pagina
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
var url_destino=$(this).attr('data-demo');// obtengo la ubicacion del archivo de audio para reproducirlo
jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3:url_destino
});
jQuery("#jquery_jplayer_1").jPlayer("play");
});