Is there a way to loop SoundManager without cache so it's forced to reload the source audio file every time? I can get it to loop, but I can't get it to not cache.
<script type="text/javascript">
soundManager.url = '../../swf/soundmanager2.swf';
soundManager.debugMode = true;
soundManager.consoleOnly = true;
soundManager.onload = function() {
soundManager.createSound({
id:'mySound1',
url:'path/to/audio.mp3',
stream: true
});
loopSound('mySound1');
}
function loopSound(soundID) {
window.setTimeout(function() {
soundManager.play(soundID,{onfinish:function(){loopSound(soundID);}});
},1);
}</script>
For now, this is a solution I came up with:
<script>
soundManager.setup({
url: '../swf/',
// optional: use 100% HTML5 mode where available
// preferFlash: false,
onready: function() {
var sound = soundManager.createSound({
id: 'mySound1',
url: 'path/to/audio.mp3',
onfinish: function() {
soundManager._writeDebug(this.id+' has finished the current track, now loading next track.');
// destroy this sound
this.unload();
soundManager.createSound({
id: 'mySound1',
url: 'path/to/audio.mp3',
});
soundManager.play('mySound1');
},
autoPlay: true
});
}
});
</script>
Changing the id: to a different one will avoid needing to clear the cache.
It seams to be that even though the path to the URL is different, if the ID is the same, the song will be replayed.
if change the:
id: 'mySound1',
so that it is unique for each unique track the new song will play.
id: 'mySound1'+id,
...
onload: function(){
if(this.readyState==2){ //ERROR HTML5 player
console.log('ERRORS readyState');
stop_play(id); // function stop play id
start_play(url); // function start play
}
},
...
Related
Audio is being heard even though no audio element seems to be put inserted in the DOM.
Scenario:
Create PeerConnection without streams
Add a stream but disable the code that adds MediaElements (audio,video) to DOM
Issue:
After the stream gets across, audio can be heard from headphones (or speakers).
What should happen:
Since I'm not attaching anything to the dom I expect no audio to be heard.
Code for replicating the scenario
// <body>
// <script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
// <button id="start">Start!</button>
// </body>
$('#start').click(function() {
var NO_MEDIA_SESSION = {video: false, audio: false, oneway: true};
var caller = new RTCMultiConnection('lets-try');
caller.session = NO_MEDIA_SESSION;
caller.dontAttachStream = true;
caller.onstream = function() { console.log("Got stream but not attaching") };
var receiver = new RTCMultiConnection('lets-try');
receiver.session = NO_MEDIA_SESSION;
receiver.dontAttachStream = true;
receiver.onstream = function() { console.log("Got stream but not attaching") };
caller.open();
receiver.connect();
receiver.onconnected = function() {
console.log("Connected!");
caller.addStream({audio: true});
}
});
I'm interested how is it possible to hear MediaStream without there being audio DOM element?
If any RTCMultiConnection specialists answering, then maybe point me how to avoid audio stream being made audible? (I want to get the stream and attach it later myself).
RTCMultiConnection creates mediaElement on the fly to make sure onstream event is fired only when media stream started flowing.
connection.onstream = function(event) {
event.mediaElement.pause(); // or volume=0
// or
event.mediaElement = null;
// or
delete event.mediaElement;
};
Updated:
Use following snippet:
var connection = new RTCMultiConnection();
connection.session = {
data: true
};
btnOpenRoom.onclick = function() {
connection.open('roomid');
};
btnJoinRoom.onclick = function() {
connection.join('roomid');
};
btnAddAudioStream.onclick = function() {
connection.addStream({
audio: true
});
};
btnAddAudioVideoStream.onclick = function() {
connection.addStream({
audio: true,
video: true
});
};
As from socket.io website
Binary streaming
Starting in 1.0, it's possible to send any blob back and forth: image, audio, video.
I'm now wondering, if this couldn't be the solution for something I'm trying to achieve recently.
I'm actually looking for a way how to broadcast live audio stream from (A - ie, mic input..) to all clients connected to a website of mine. Is something like this possible? I've been messing with WebRTC (https://www.webrtc-experiment.com/) examples but I haven't been able to manage the goal for more than few connected clients.
My idea is about something like getUserMedia or any other audio source (PCM, whatever..) on side A being chopped to chunks and provided to client and played for example by html5 audio element or anything.. I need to make that stream as much realtime as possible, no shout/ice cast services werent fast enough (indeed, they arent solution to my problem, they're meant to be used this way) and I don't really care about the audio quality. Crossplatform compatibility would be awesome.
Is something like that possible? By using socket.io as way how to provide those data to clients?
I would be very grateful for any reference, hint or source that could help me achieve this.
Thanks a lot.
This example shows you how to use the MediaRecorder to upload audio and then forward it using socket.io. This code will only broadcast after you're called mediaRecorder.stop(). You can choose to broadcast inside of ondataavailable. If you do that, you might want to pass a timeslice to mediaRecorder.start(), so that it doesn't trigger ondataavailable so often.
This solution isn't truly live, but I think it will help people who come back and find this question.
Client Code
var constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
var mediaRecorder = new MediaRecorder(mediaStream);
mediaRecorder.onstart = function(e) {
this.chunks = [];
};
mediaRecorder.ondataavailable = function(e) {
this.chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });
socket.emit('radio', blob);
};
// Start recording
mediaRecorder.start();
// Stop recording after 5 seconds and broadcast it to server
setTimeout(function() {
mediaRecorder.stop()
}, 5000);
});
// When the client receives a voice message it will play the sound
socket.on('voice', function(arrayBuffer) {
var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });
var audio = document.createElement('audio');
audio.src = window.URL.createObjectURL(blob);
audio.play();
});
Server Code
socket.on('radio', function(blob) {
// can choose to broadcast it to whoever you want
socket.broadcast.emit('voice', blob);
});
In the Client Code you can write setInterval() instead of setTimeout() and then recursively call mediaRecorder.start() so that every 5 seconds the blob will be emitted continuously.
setInterval(function() {
mediaRecorder.stop()
mediaRecorder.start()
}, 5000);
Client Code
var constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
var mediaRecorder = new MediaRecorder(mediaStream);
mediaRecorder.onstart = function(e) {
this.chunks = [];
};
mediaRecorder.ondataavailable = function(e) {
this.chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });
socket.emit('radio', blob);
};
// Start recording
mediaRecorder.start();
// Stop recording after 5 seconds and broadcast it to server
setInterval(function() {
mediaRecorder.stop()
mediaRecorder.start()
}, 5000);
});
// When the client receives a voice message it will play the sound
socket.on('voice', function(arrayBuffer) {
var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });
var audio = document.createElement('audio');
audio.src = window.URL.createObjectURL(blob);
audio.play();
});
Server Code
socket.on('voice', function(blob) {
// can choose to broadcast it to whoever you want
socket.broadcast.emit('voice', blob);
});
I changed the entire question because I didn't provide enough info's at the first run: thanks goes to #Sergio.
There are alot of things not working in IE.
When I do addEvent('domReady').... It's even more bad(it doesn't gets executed but if I refresh the page... it works).
Is there a proper way to handle that IE stuff in MooTools?
note:
working on every browser on the whole planet except IE*
edit: added the complete source code of ajax cart.
This code it correct, it's just for understanding purpose only:
ajax_cart.js
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: 'changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct'+(new Date().getTime())
},
initialize: function() {
var cart = this;
this.elem = $(this.options.elem_id);
if (this.elem) {
this.elem.addEvent(this.options.event, function() {
cart.viewCart();
});
}
},
getCart: function() {
var cart = this;
var myHTMLRequest = new Request.HTML({
url: cart.options.url,
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
//console.log(responseHTML);
if (!cart.cartDiv) {
cart.cartDiv = new Element('div', {'class':'ajax-cart'});
cart.cartDiv.fade('hide');
cart.cartDiv.inject(cart.elem);
cart.cartDiv.addEvent('mouseleave',function() {
this.fade('out');
});
}
cart.cartDiv.innerHTML= responseHTML;
cart.cartDiv.fade('in');
},
onFailure: function(xhr) {
console.log(xhr.responseText);
}
}).get();
},
viewCart: function() {
if (this.cartDiv) {
this.cartDiv.fade('in');
} else {
this.getCart();
}
}
});
This code works on every browser except IE, only after refreshing the page, it works.
in index.html
if(Browser.ie) {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
} else {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
}
In some versions of Internet Explorer (ie. IE6) a script tag might be executed twice if the content-type meta-tag declaration is put after a script tag.
The content-type should always be declared before any script tags.
See here http://mootools.net/docs/core/Utilities/DOMReady
I guess there is no solution so I had to find a workaround for this.
What I did:
Since my problems were solved by refreshing the page, I did this in meta tag.
<meta http-equiv="Expires" content="-1" />
It might help someone else, when it comes up to fixing IE refreshing bugs.
I have a strange issue with my jquery mobile application. Below screen shot from Chrome Developer Tools Snapshot.
Why does my Pages or Scripts are cached even thiugh Have added
$.ajaxSetup ({
cache: false
});
Also in every ajax call which loads my ul > li have set cache:false.
Kindly let me know how can I overcome this scenario coz of this my Mobile cache is growing on every single click driving me nuts.
Thanks
Update :
Every time I click to navigate to another page this scripts get executed :
$('body').on('click', '.menuClass', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var menuid = $(this).attr('id');
if (menuid == '100001') {
settings.get('setval', function(obj) {
if(obj.value.tableMode == "1"){
$.mobile.changePage('categories.html', {
transition : "slide"
});
return false;
}
else{
$.mobile.changePage('index.html', {
transition : "slide"
});
}
});
}
});
But for somereasons the URL for categories.html loads on every click changing the url to
below
http://localhost:8080/categories?_=1347279588477
http://localhost:8080/categories?_=1347279584203
http://localhost:8080/categories?_=1347279688227
I don't know why cache:false doesn't work but i'm adding a time created string to prevent caching of ajax pages.
Doing this by adding &ts="+ new Date().getTime() to end of url .
Here is my usage ;
$.ajax({
type: "GET",
url: "ajax.php?ajax_file=ajax_table_page&ts="+ new Date().getTime(),
success: function(data){
..................
}
});
I also use this to trace ajax errors (you may add after document is ready )
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
I'm trying to get jQuery Cycle to only run when the slideshow is being hovered (which is the opposite of the functionality that they have built in).
Here's where I'm at: http://jsfiddle.net/zSBMU/
$(document).ready(function() {
$('.slideshow').hover(
function() {
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
pause: 0
});
},
function(){
$(this).cycle('stop');
}
).trigger('hover');
});
The first time you hover, it's great, works fine. But if you try to hover the same one again, it only goes through one fade instead of looping through again.
Any ideas?
Please ignore some of the gross code, working with a pretty old theme here, trying to clean it up!
You're using "stop" and recreating the cycle, so you're adding several cycles on the object.
You've to use "pause" and "resume".
Example bellow:
var cycleConfigured = false;
$(document).ready(function() {
$('.slideshow').hover(
function() {
if(cycleConfigured)
$(this).cycle('resume');
else
{
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
pause: 0
});
cycleConfigured = true;
}
},
function(){
$(this).cycle('pause');
}
).trigger('hover');
});
The variable cycleConfigured will be used to control our cycle plugin, to check if it was already instantiated. In alternative you can create it on $(document).ready() and then pause it like this:
$(document).ready(function() {
// configure the cycle plugin
$('.slideshow').cycle({
fx: 'fade',
speed: 600,
timeout: 300,
pause: 0
});
$('.slideshow').cycle('pause'); // pause it right away.
$('.slideshow').hover(
function() {
$(this).cycle('resume'); // start playing.
},
function(){
$(this).cycle('pause'); // pause the slideshow.
}
).trigger('hover');
});
Then everything you need to do is use $(this).cycle('pause') on out and $(this).cycle('resume') on over.
Anything let me know.