Wami audio recorder, callback functions not called - javascript

I am using Wami Recorder
https://code.google.com/p/wami-recorder/
The problem is that the callback function don't execute when the playing of audio get finished.
Here is the code that I am using :
function startPlaying()
{
Wami.startPlaying(playBackUrl, startfn, finishedfn, failedfn );
}
function startfn()
{
alert('start');
}
function finishedfn()
{
alert('finish');
}
function failedfn ()
{
alert('failed');
}
Initially I am calling the startPlaying(), which starts to play the audio file.
Even when the audio get over the finishedfn does not get called. Is there a bug in Wami Recorder ?
I have even tried by changing the definition of function like.
var finishedfn = function ()
{
alert('finish');
}
But this has not helped me either.
There is hardly any help available for Wami on Google/Stackoverflow. :(

Wami includes the helper function Wami.nameCallback to allow you to pass callbacks. As Garland noted, the flash object actually takes strings. You can use the nameCallback function to convert your callbacks into strings. If you look at the included gui.js file you'll see this in action.
Here's sample usage:
Wami.startRecording('/myUrl', Wami.nameCallback(function () {
alert('started recording');
}));

I know this is a pretty late response, but I just came across the same problem and thought I should share, on the off chance you still need to know, and hopefully to save anyone else a bit of time.
The JS function Wami.startPlaying() calls the same function inside the Flash WAMI object, which takes the following parameters:
url:String,
startedCallback:String = null,
finishedCallback:String = null,
failedCallback:String = null
As you can see the 3 callback functions actually take strings (not raw functions), so to successfully get the callback you need to pass call
Wami.startPlaying(playBackUrl, "startfn()", "finishedfn()", "failedfn()");

Related

How to conceptualize multiple callbacks, a.k.a. how do you think through code like this?

For example, take this code (source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
// --file.js--
function getJSON(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback(this.responseText)
};
xhr.open('GET', url, true);
xhr.send();
}
export function getUsefulContents(url, callback) {
getJSON(url, data => callback(JSON.parse(data)));
}
// --main.js--
import { getUsefulContents } from 'file';
getUsefulContents('http://www.example.com', data => {
doSomethingUseful(data);
});
I often come across a situation where I need to build something like this, or read it, and Im always so slow at it, so, is there a better way to conceptualize this pattern?
Heres my thought process currently (how I read the above) :
Ok, we have 2 files, one is getting a function imported from the other. (easy peasy)
The imported function is getting called, and passed a URL and callback function. (easy peasy lemon squeezy). This callback function takes 1 parameter ('data') and passes it to doSomethingUseful(data). (I believe were blocking at this point)
In file.js, getUsefulContents was called and passed the URL and callback.
getJSON is called, and passed the URL and a callback... Did everything just pass right through getUsefulContents? Why do we need it? (Confused back and forth)
...Ok whatever, getJSON now has the URL and callback. It creates a xhr object, reacts to an onload event by calling the callback (finally!) passing this.responseText to it (thats the data).
the callback runs, which runs doSomethingUseful(data) and were done.
This takes me quite a while to analyze on a regular basis. Are there any conceptual tricks or better ways to analyze this?
Not really any tricks to conceptualizing it all together, but that goes against one of the main tricks we use as programmers.
That trick is to break the program down into functions to hide what they're doing inside. Instead of trying to understand everything as one big long flow, just understand that getUsefulContents() gives you some useful contents. Don't worry about how it's doing it, unless you're working on changing getUsefulContents().
In general, you can think of each function as a black box. You feed it a, it spits out b. That's as much as you usually need to understand about it (unless you're mucking around inside it).
If you need to understand the whole program in minute detail, it's going to take take to understand. It's a lot to understand. That's why we use functions at like we do.
With callbacks, it looks a little different, but it's still the same. For a function that accepts a callback, you give it a and something to call when it's done. It calls that something and spits out b. Beyond that, you don't usually need to worry about it.

HOW TO: Adobe Animate - gotoAndStop(); on a button click

I have created a project in .fla that was exporting to .swf however I now require it in HTML5 format. So I change the file conversion type and now require my ActionScript3 to be converted to JavaScript. However, This is not my strong suit.
I am currently trying:
this.stop();
this.close1_btn.addEventListener("click", function (closebtn)
{
this.gotoAndPlay(1);
});
this.store1_btn.addEventListener("click", function (store1_btn)
{
this.gotoAndPlay(11);
});
this.store2_btn.addEventListener("click", function (store2_btn)
{
this.gotoAndPlay(12);
});
this.store3_btn.addEventListener("click", function (store3_btn)
{
this.gotoAndPlay(13);
});
OVERVIEW: trying to listen to a symbol e.g close1_btn for clicks. when clicked it will link to and stop at a specified frame.
I expect a few bits to be wrong *maybe near the function () part?
Its a fairly simple map so shouldn't be too hard for someone who knows what they are looking at! Thanks so much for any help you can give!
I believe the issue is the function scope, which is a common mistake.
The addEventListener method has no implied scope, so the functions will get called on window. If you output this in your console when those buttons are clicked, you will probably see Window. To solve this, you can:
Bind your methods (docs)
Example:
this.close1_btn.addEventListener("click", function (closebtn)
{
this.gotoAndPlay(1);
}.bind(this));
Use the CreateJS on shortcut, which takes a 3rd parameter (docs)
Example:
this.close1_btn.on("click", function (closebtn)
{
this.gotoAndPlay(1);
}, this);
One important note is that if you play frame 0 again, that frame script will run again, adding another listener to each button each time, resulting in the functions called multiple times when a button is clicked. I recommend something this this:
if (!this.inited) {
// Your code
this.inited = true;
}
Thanks for your response.
I am now using the code you provided:
this.stop();
if (!this.inited) {
// Your code
this.close1_btn.addEventListener("click", function (closebtn)
{
this.gotoAndPlay(1);
}.bind(this));
this.store1_btn.addEventListener("click", function (store1btn)
{
this.gotoAndStop(11);
}.bind(this));
this.inited = true;
}
However, I get this in the output
WARNINGS:
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (5)
Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.
Any further advice you could give would be appreciated...
cheers for your continued assistance!
The preview doesn't work when it opens in my browser, is this just because I haven't exported it fully and hosted it online?
So I can ignore these errors?
^^ if that's all cleared up. Do you have recommended way to export and host it on a webpage?
Thanks again buddy, appreciate it!

IE11 script onload not working (sometimes)

I am currently working on a data-intensive web application that frequently communicates with an external API and retrieves JSONP data when returned. The script depends upon a library called head.js v1.0.3. http://headjs.com/ to accomplish this. However, I noticed that in IE 11 for some reason, the onload event for the script sometimes, but not always, fires before the script has actually loaded into the browser. The behavior is demonstrable whether using head.js or not. Alternatively, I may create a script element with the onload event set to capture the returned data. Sometimes it works, and sometimes not. Even more weird is that once it happens the first time, it seems to keep happening for the duration of the browser session.
Any ideas for a workaround?
Here is some example code:
//somejson.js
/*
window["queryResult"] = {blah:'blah'}
*/
function loadScript() {
head.load("/somejson.js", afterScriptLoad)
}
function afterScriptLoad() {
var result = queryResult
//Throws error because window.queryResult is sometimes undefined
}
After a little bit of research, it seems the only way around this bug is to modify the API so that once the variable holding the JSONP is initialized, the script itself triggers the callback. Unfortunately, this would not work as a solution for others if they do not have access to modify whatever API is in use, but it does solve the problem for me.
//somejson.js
/*
window["queryResult"] = {blah:'blah'}; scriptCallback()
*/
function loadScript(callback) {
var c = new afterScriptLoad(callback)
window["scriptCallback"] = c
head.load("/somejson.js", c)
}
function afterScriptLoad(callback) {
var retrieved = false
return function () {
if (!retrieved) {
retrieved = true
callback(queryResult)
}
}
}
function myCallback(response) {
//do something
}

How do i execute a callback in a jQuery Plugin code

This may sound really like a newbie .. But i used the jQuery Boilerplate on this page - http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ and created a plugin. Everything works fine, except now i want to add a callback. I want to execute this -
$.Alerter({'message':'this is a test','onSuccess':function(data) { alert(data); } });
The onSuccess is a callback function which is added to the defaults.
My question is – how do i send the output to the onSuccess. I want it to return back a TRUE or FALSE value after certain steps have been executed in the init()
Something like this:
plugin.result = null;
plugin.init = function() {
// do stuff
...
// save _result in public variable result
plugin.result = _result;
}
If you are writing this plugin for dom operations, you could also use it like plugin.data('result',_result);
Since I don't know anything else I can't give further insight.
Hope this will help you.

javascript include once, declare function once, bind once

Is there a way to include a javascript file only once or declare a function only once? The issue I am having is that I have an HTML module that contains a javascript include. Well this module is loaded in a loop, and therefore that file is loaded multiple times. I've worked out most of the kinks, but what bothers me is that I know the same function is getting created multiple times, and this look can be as many as 30 iterations. To me, I don't like the fact that the same function is getting created over and over. Should I care? Is there a way I can prevent this? I know I can detect when a function exists, can I put the function declaration in between an if statement?
Update
I've tried out one of the suggestions:
if(typeof btnSendInvite_click != 'function')
{
function btnSendInvite_click()
{
alert("#invite_guest_" + $(this).attr("event_id"));
return false;
}
}
but that doesn't work. I've also tried
if(!btnSendInvite_click)
{
function btnSendInvite_click()
{
alert("#invite_guest_" + $(this).attr("event_id"));
return false;
}
}
but it doesn't work. What happens is that I have this line:
$(document).ready(function()
{
$(".btnSendInvite").bind("click", btnSendInvite_click);
});
and when the button gets clicked, that functions is executed six times, which is the amount of times that the file was included which tells me that the function is being created multiple times... I think.
Update
So after a lot of struggling, this problem is turning into something different than what I thought. The bind is being called multiple times, so it's getting bound multiple times, and therefore calling the function multiple times. I guess my next question is, is there a way to bind a function to a control only once? I've tried the jquery "one" already and it doesn't work.
Yes, you can (run on jsfiddle).
if (!window.myFunction) {
window.myFunction = function() {
//...
}
}
Edit: In your case it would be:
if (!window.btnSendInvite_click) {
window.btnSendInvite_click = function() {
alert("#invite_guest_" + $(this).attr("event_id"));
return false;
}
}
The call to bind() also has to be somewhere in that conditional block.
Note: The following variant won't work, at least not on all browsers:
if (!window.myFunction) {
function myFunction() {
//...
}
}
Edit 2: For your update:
Declare a variable when you call bind.
if (window.iBoundThatStuff!=true) {
iBoundThatStuff=true;
//call bind() here
}
Having JS included in a loop is ridiculous. Move your JS out of the loop.
JS can tell if function was defined but fixing bad server side loop in JS is definitively a bad practice.
Yes you should worry about not including your script file several times and not to declare the function several times...
For the first part, you may want to look into changing your html structure so the js file is only included once (even though js files are cached by the browser, and the second time may not actually go to the server -- depending of several factors... there's still a penalty)
Now as for declaring your function only once, remember that functions are also object (1st class citizens) in js, so you can test if a function is already define as if you were testing an object.... if(!window.myFunc) { window.myFunc = function(){} }...
You may want to look a bit into functions and scoping in js.. here are some links
http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/
http://www.yuiblog.com/blog/2010/02/24/video-crockonjs-3/
http://www.slideshare.net/douglascrockford/crockford-on-javascript-act-iii-function-the-ultimate

Categories

Resources