Can't get audio to play in my Flash / HTML5 / Canvas project - javascript

Having lots of problems getting my sounds to play in a Flash-based Canvas project. I'm using the base example here (http://createjs.com/Docs/SoundJS/classes/Sound.html) in order work and all I get is a black screen and the following errors:
SyntaxError: missing ) after argument list
Which in my JS file is the following:
createjs.Sound.on("fileload", createjs.proxy(this.loadHandler, (this));
So I add the extra ) but now another error:
TypeError: createjs.Sound is undefined
Which is this:
createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.FlashAudioPlugin]);
What's going on here? Why can't I just get this to play?
Here's the complete code:
createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.FlashAudioPlugin]);
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.on("fileload", createjs.proxy(this.loadHandler, (this)));
createjs.Sound.registerSound("sounds/LaGrange.mp3", "sound");
function loadHandler(event) {
// This is fired for each sound that is registered.
var instance = createjs.Sound.play("sound"); // play using id. Could also use full source path or event.src.
instance.on("complete", createjs.proxy(this.handleComplete, this));
instance.volume = 0.5;
}

Well that's embarrassing. The example does have 2 errors. The first is the missing ")", which you caught and corrected. The second is that the FlashAudioPlugin is not completely setup. You need to add this line to set the path to the FlashAudioPlugin.swf before you register the plugins:
createjs.FlashAudioPlugin.swfPath = "../src/soundjs/flashaudio";
Thanks for catching this. I've pushed up a fixed version of this to github. Also, all the of the demos are well tested if you want more working examples to test from.
Hope that helps.

If you are testing locally (ie, not on a webserver - remote or local), then WebAudio can not play, since it uses XHR to load it, which does not work cross-domain (using file:/// is considered unsafe as well)
Change it to only use HTMLAudio when testing, and it should work.

Related

Unity js script not working

I have recently taken an interest into unity, and as I guide a chose a playlist from youtube. I have installed the
Unity 5.6.4
16 Oct, 2017
version as well.
Now, I encounter an error when I try to add a script to an object.
In the tutorial:
here
, this happens from 11:40 to 13:40.
Basically, as a summary, he is writing a script in js and then attaches it to an object. Now, I have followed the exact steps as him, but it does not work for me.
I write the same script as him, in JS:
then add the script to the object. But then, on the object, I should get a target option, like he does:
However, I don't get this option on my object:
The error I get in the console is this:
Assets/Scripts/PickUp.js(1,386): BCE0044: unexpected char: 0xFEFF.
And this is the actual script:
var target : Transform;
function Update () { }
function OnMouseDown ()
{
this.transform.position = target.position;
this.transform.parent = GameObject.Find("FPSController").transform;
this.transform.parent = GameObject.Find("FirstPersonCharacter").transform;
}
function OnMouseUp ()
{
this.transform.parent = GameObject.Find ("FPSController").transform;
this.transform.parent = null;
}
Now, I've heard that it is not the most efficient, but at this point, I don't really care about that, I just want it to work.
Try to save your script using UTF8 - no BOM (ByteOrderMark). If that does not help, save as Ansi and try that - or read up what unity wants :)
Unity3d Issue Tracker: textassets-encoding-prefab-with-utf8-bom-encryption-is-corrupted it might be related.
This UTF-8 as default in Unity3D new script? was not solved unfortunately.

Unable to get property 'style' of undefined or null reference but works in another server

I have a classic asp project. In one of my pages i have to call a javascript function. That call does not have any problem and works fine on my test server (not localhost, just a server to test he project). But when i deploy it to the actual server, that function does not work. I call this function in onload event.
That function has this type of lines (i cannot write the whole code, because of the company that i work for, does not allow it)
document.getElementById("R6C2_1").style.display = 'block'
document.getElementById("R6C2_2").style.display = 'none'
....
When I try to debug it on IE10, i got "Unable to get property 'style' of undefined or null reference" error. After that, the elements in javascript function are not load. They are not seen on the page.
My main problem is, as i mentioned before differences between servers. I do not understand why it works on one server, but not on another server.
While it's not possible to determine the issue from this information alone, you should look into:
Whether the elements you're looking for actually exist when the code is invoked (use browser debug / breakpoints to look at the page the moment the code is invoked).
If they exist, check if they have the ID you expect (e.g R6C2_1) - if not, why? who creates these IDs? could be a server configuration issue.
Do a debug using the app from each server, and look at the page / DOM, see if there are differences or check if the code is invoked at different times.
These could lead you to pinpoint the issue. Good luck!
In case the elements just take time to be created, you can just wait until they are present:
function ExecuteWhenExists() {
var R6C2_1 = document.getElementById("R6C2_1");
var R6C2_2 = document.getElementById("R6C2_2");
if (R6C2_1 && R6C2_2) {
R6C2_1.style.display = 'block';
R6C2_2.style.display = 'none';
} else {
window.setTimeout(ExecuteWhenExists, 100);
}
}
ExecuteWhenExists();
This will not crash when the elements do not exist, and will just keep trying to execute in a non-blocking way (polling every 0.1 seconds) until they exist.

CreateJS - Type not recognized error thrown during sound registration

I am trying to load sounds through the SoundJS sound registration, and getting the following error:
createjs.js:15 Uncaught Error: Type not recognized.
I figure that the soundjs library is having issues either locating my files or having trouble with the file extensions, but I am using .ogg, which is inline with all the examples I've seen.
Here is my code:
createjs.Sound.alternateExtensions = ["mp3", "ogg"];
createjs.Sound.on("fileload", function(event) {
console.log(event);
}, this);
for (var i = 0; i < soundManifest.length; i++) {
soundManifest[i].loaded = false;
console.log("loading " + soundManifest[i].src);
createjs.Sound.registerSound(soundManifest[i].src, soundManifest[i].id)
}
soundManifest is an array of objects with a source item giving the path to the .ogg files, and an id. I've double and triple checked the path names, so pretty sure that's not it. Any ideas? I am developing on Chrome.
Thanks for posting a github link. It was helpful. Fortunately, I have a super simple answer for you.
Rename the "Object" class you made in Main.js, and you should be good to go.
-- The long answer --
I tossed a breakpoint the error that is thrown, and it showed that when SoundJS tries to create a LoadItem, it fails. This is because it should be treating the LoadItem it receives as an Object, but the line below is failing:
} else if (value instanceof Object && value.src) {
// This code should be executed
}
At first I thought there was a bug in SoundJS that we had somehow missed in the last 2 years, but closer inspection showed that object prototypes in your application are messed up. If you open any browser window, and hit the console, this will return true:
({}) instanceof Object
// true
However while running your app, it returns false.
The issue became clear when I removed all your other classes other than CreateJS and main, and then tried this:
new Object();
// Throws an error that includes info about "Victor"
In main.js, you are defining an "Object" class, which extends a CreateJS Shape. It is global because there is no method closure around the code, so it overwrites the global Object class/prototype.
The reason I included this explanation, is because I couldn't figure out what was going on until I had my steps to show that prototypes were broken in the app mostly written out before the reason dawned on me. I thought it might be of some interest :)

Ace Editor: Uncaught ReferenceError: window is not defined

I have been looking for a solution to below described issue for a few days but I couldn't find anything helping...
I am using Ace editor on 6 different DIVs on a webpage (so I have 6 editors).
Basically everything works fine, I am able to create them, set them up (language mode, soft tabs, etc.) and manage their content once the user is done.
BUT I keep having the same error message in the console "Uncaught ReferenceError: window is not defined". I get it 6 times, 1 per Ace editor on the page.
Here is the JS I am using. divIdsArray is an array containing the 6 DIVs Ids.
function initAceEditorFields()
{
$(document).ready(function(){
for (var i = 0 ; i < divIdsArray.length ; i++){
var l_arr_splitted = divIdsArray[i].split("_");
var l_str_code = l_arr_splitted[2];//Each div id contains either "js" or "html" which i am retrieving here
var l_ace_editor = ace.edit(divIdsArray[i]);
l_ace_editor.setShowPrintMargin(false);
l_ace_editor.getSession().setUseSoftTabs(false);
l_ace_editor.getSession().setTabSize(4);
l_ace_editor.$blockScrolling = Infinity;
if(l_str_code == "js"){
l_ace_editor.getSession().setMode("ace/mode/javascript");
}else{
l_ace_editor.getSession().setMode("ace/mode/html");
}
}
});
}
I am loading the files: ace.js, mode-javascript.js and mode-html.js from the ace package.
I have tried with ace editor builds: "src-min" and "src-min-noconflict" from the github repo and I tested with Chrome, Mozilla and MS Edge but I always get the same error message.
It is strange as everything seems to be working fine (or at least as I want it too). I just don't want to leave these messages in the console when I go to production.
Any help will be greatly appreciated.
Thank you!
Your ace editor must be using web workers somewhere, then some function called inside a web worker is trying to access "window". The code you've shown us has no references to window. Scrutinize your other interactions with ace to see if you ever pass in a function that references "window" or jquery, or any other dependency in the global scope. If not, then the error in the console is outside your control I suspect.

Raphael JS - paper.remove

Just getting started with Raphael.
Now I'm finding that paper.remove() is generating a script error:
"SCRIPT5009: 'removed' is undefined
Is this a script bug?
My variable paper is initialized thus:
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
My HTML body has:
<div id="canvas_container"></div>
This is more info --
I am using Raphael 2.0 which I just downloaded again. Running IE9. Following is the Raphael JS function that is highlighted as the problem:
R.prototype.remove = function () {
eve("remove", this);
this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
for (var i in this) {
this[i] = removed(i);
}
};
the line ... removed(i) is highlighted --> SCRIPT5009: 'removed' is undefined
BTW I am new to this forum. Is there a way to respond to a thread other than "Answer Your Question"?
I've run across this a couple of times. The line 4443 method as suggested by sudoko-san does work in browsers but not backwards compatible with IE-7 & 8 (the whole point of using raphael).
Another work around is to implement the following code in your javascript:
try{
paper.remove();
}
catch (error) {
// this catches the error and allows you to proceed along nicely
}
That's it!
I don't know if you've supplied enough information to answer this question.
What version of Raphael are you using?
On what browser?
Is it being loaded up correctly - can you create any Raphael objects?
If all you're doing is deleting the paper, see the fiddle below.
JSFiddle
It seems to work fine for me with Raphael 1.5.2
Hope that helps (even slightly).

Categories