How to play html5 game offline? - html

I wanted to save some html5 games on the laptop for my little brother to play when he's out of wifi range. I downloaded all the files and changed the paths so that no erros appear.
Now when I open index.html a blank page oppen with a loader gif and nothing else loads. I dont understand why? No errors are thrown. The only error is the one that it cannot find ads (when loadvoyager is called). I tried to comment it, still nothing positively happends.
This is an archive of the game: https://www.dropbox.com/s/5x3dk7w693j3os1/caca.rar?dl=0
Thank you!

Solution
Go to this site:
http://scotty-staging.softgames.de/assets/api/voyager.js
or use this mirror i created:
File only : http://www.mediafire.com/download/4b8uhvm75fbqtwy/voyager.js
Full game: http://www.mediafire.com/download/y8ocia4rr5552jx/html5Game.7z
Save the javascript file in assets and than you can play the game.
update ( problem )
var displayLoadScrn = function(){
var body = SG.d.getElementsByTagName('body')[0];
if( typeof body != "undefined" ){
if( SG.d.getElementById('sg-loadscrn') == null ){
SG.debug && console.log('show load-screen: complete');
body.appendChild(loadScrn);
}
SG.loadVoyager(); //<---- This is where it goes wrong //
}
else{
if(SG.debug) console.log('show load-screen: body-tag not ready. retrying in '+SG.loadScrnTimer+'ms');
setTimeout(displayLoadScrn,SG.loadScrnTimer);
}
};
displayLoadScrn();
var displayImage = function(){
var body = SG.d.getElementsByTagName('body')[0];
if( typeof body != "undefined" ){
body.appendChild(loadScrn);
SG.loadVoyager(); //<---- This is where it also goes wrong //
}
else{
if(SG.debug) console.log('show load-screen: body-tag not ready. retrying in '+SG.loadScrnTimer+'ms');
setTimeout(displayImage,SG.loadScrnTimer);
}
};
displayImage();
The problem is that you didnt provide the voyager resource script in the assets folder, but it needs to be loaded
loadVoyager : function(){
var sgc = document.createElement('script'); sgc.type = 'text/javascript'; sgc.async = true;
var random = Math.floor((Math.random()*100000000)+1);
//sgc.src = 'http://scotty-staging.softgames.de/assets/api/voyager.js';
sgc.src = 'assets/voyager.js?_='+random; //<-- this line //
//sgc.src = '//localhost:3000/assets/api/voyager.js';
sgc.onload = SG.boot;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sgc, s);
},
You see the middle "sgc.src = 'assets/voyager.js?='+random;" , that is still trying to load, what I did is removing the commented out lines, I kept the "sgc.src = 'assets/voyager.js?='+random;" uncommented and downloaded the voyager file and placed it in the assets folder.
You cannot comment out the loadvoyager, because it needs to be loaded. Otherwise your page will be loading all the time, with not response

Looks like a file named voyager.js is missing from the assets folder. Open the console in the browser for this detail(F12 in Chrome).
And just to be on the safer side try opening this game through a local-server this way you don't have to worry about all the things the browser is concerned about when running the game.

Related

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

I'm using the jspsych.js module, and when using it, I look at the console and I'm getting this error:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
and it takes me to this lines of code:
core.webaudio_context = (typeof window !== 'undefined' && typeof window.AudioContext !== 'undefined') ? new AudioContext() : null;
I don't get where the mistake is.
You need to a user-events to initiate audio.
Can you check the error lines again? Probably you are trying to start audio automatically but it's not possible.
add button your page:
<button class="play">Play</button>
Then add function to use your audio source the following;
play.onclick = function() {
audioSource.start(0);
//or another function to use audio source
}

Audio API: Fail to resume music and also visualize it. Is there bug in html5-audio?

I have a button. Every time it is clicked, a music is played. When it's clicked the second time, the music resumes. I also want to visualize the music.
So i begin with html5 audio (complete code in http://jsfiddle.net/karenpeng/PAW7r/):
$("#1").click(function(){
audio1.src = '1.mp3';
audio1.controls = true;
audio1.autoplay = true;
audio1.loop = true;
source = context.createMediaElementSource(audio1);
source.connect(analyser);
analyser.connect(context.destination);
});
But when it's clicked more than once, it console.log error:
Uncaught Error: INVALID_STATE_ERR: DOM Exception 11
Then i change to use web audio API, and change the source to:
source = context.createBufferSource();
The error is gone.
And then, i need to visualize it.
But ironicly, it only works in html5 audio!
(complete code in http://jsfiddle.net/karenpeng/FvgQF/, it does not work in jsfiddle cuz i dont know how to write processing.js script properly, but it does run on my pc)
var audio = new Audio();
audio.src = '2.mp3';
audio.controls = true;
audio.autoplay = true;
audio.loop=true;
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
var freqData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqData);
//visualization using freqData
when i change the source to :
source = context.createBufferSource();
it does not show anything.
So is there way to visualize it and yet without error and enable it to resume again and again?
Actually, I believe the problem is that you're trying to create a SECOND web audio node for the same media element. (Your code, when clicked, re-sets the SRC, controls, etc., but it's not creating a new Audio().) You should either hang on to the MediaElementAudioSourceNode you created, or create new Audio elements.
E.g.:
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
var source = null;
var audio0 = new Audio();
$("#0").click(function(){
audio0.src = 'http://www.bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3';
audio0.controls = true;
audio0.autoplay = true;
audio0.loop = true;
if (source==null) {
source = context.createMediaElementSource(audio0);
source.connect(analyser);
analyser.connect(context.destination);
}
});​
Hope that helps!
-Chris Wilson
From what I can tell, this is likely because the MediaElementSourceNode may only be able to take in an Audio that isn't already playing. The Audio object is declared outside of the click handler, so you're trying to analyze audio that's in the middle of playing the second time you click.
Note that the API doesn't seem to specify this, so I'm not 100% sure, but this makes intuitive sense.

HTML5/websockets/javascript based real-time logfile viewer?

Im looking for the equivalent of "tail -f" that runs in a browser using html5 or javascript.
A solution would need a client side code written in HTML5/websockets/javascript and a back-end server side application. Im looking for one in c# but i'm willing to rewrite it from php or python.
This is the only thing that i've seen that comes close is
http://commavee.com/2007/04/13/ajax-logfile-tailer-viewer/
However, modern browsers have WebSockets which makes the problem much simpler.
http://www.websocket.org/echo.html
Ideally, I would like to have some of the capabilities of BareTail
http://www.baremetalsoft.com/baretail/
Such as Color Coding of lines, sorting and multi-file tabbing.
I have located a similar posting where someone is looking for windows based log file programs
https://stackoverflow.com/questions/113121/best-tail-log-file-visualization-freeware-tool
Anyone have any suggestions?
It is not exactly like tail but the live logs feature of https://log4sure.com does allow you to monitor your client side logs realtime. You would have to setup and do the logs appropriately as you would do for tailing, but you can see all the logs with extra information about your client, example browser, os, country etc. You can also create your own custom logs to log stuff. Checkout the demo on the site to get a better idea.
The setup code is really easy, and the best part is, its free.
// set up
var _logServer;
(function() {
var ls = document.createElement('script');
ls.type = 'text/javascript';
ls.async = true;
ls.src = 'https://log4sure.com/ScriptsExt/log4sure-0.1.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ls, s);
ls.onload = function() {
// use your token here.
_logServer = new LogServer("use-your-token-here");
};
})();
// example for logging text
_logServer.logText("your log message goes here.")
// example for logging error
divide = function(numerator, divisor) {
try {
if (parseFloat(value) && parseFloat(divisor)) {
throw new TypeError("Invalid input", "myfile.js", 12, {
value: value,
divisor: divisor
});
} else {
if (divisor == 0) {
throw new RangeError("Divide by 0", "myfile.js", 15, {
value: value,
divisor: divisor
});
}
}
} catch (e) {
_logServer.logError(e.name, e.message, e.stack);
}
}
// another use of logError in window.onerror
// must be careful with window.onerror as you might be overwriting some one else's window.onerror functionality
// also someone else can overwrite window.onerror.
window.onerror = function(msg, url, line, column, err) {
// may want to check if url belongs to your javascript file
var data = {
url: url,
line: line,
column: column,
}
_logServer.logError(err.name, err.message, err.stack, data);
};
//example for custom logs
var foo = "some variable value";
var bar = "another variable value";
var flag = "false";
var temp = "yet another variable value";
_logServer.log(foo, bar, flag, temp);
While I wish it had better JSON object prettification for live tailing and historical logs, the following JS client works and supports your server-side requirement also:
https://github.com/logentries/le_js/wiki/API
<html lang="en">
<head>
<title>Your page</title>
<script src="/js/le.min.js"></script>
<script>
// Set up le.js
LE.init('YOUR-LOG-TOKEN');
</script>
</head>
.....
<script>
// log something
LE.log("Hello, logger!");
</script>
Personally to get the above code to work however, I've had to add the following line of code just above LE.init('YOUR-LOG-TOKEN'):
window.LEENDPOINT = 'js.logentries.com/v1'
.. Alternatively, Loggly may be a fit as well: https://www.loggly.com/docs/javascript/

How to use navigateToUrl to access html files relative to the site root?

I try to make an intro animation inside a website, and when the animation is done or when you push the Skip button, it navigates to the index.html file from the site root.
So I have in my site root the folder Flash, where the intro.swf is, and within the intro.swf I called the navigateToURL(new URLRequest("..\index.html"), "_self"); method. Now it's not working. Can you tell how to define the URL request please?
Thanks.
Have you tried this:
navigateToURL(new URLRequest("../index.html"), "_self");
Is using a backslash just a typo?
You know, I once had a weird scoping issue in Flex. The solution was to force an absolute URL by parsing the loaderInfo.loaderURL manually. A simple version might be:
function getAbsoluteURL( pathFromSwf:String, swfURL:String ):String
{
// if pathFromSwf is already a URL, then just return that.
if( pathFromSwf.match( /^(http.{3}[^\/]{5,})\/(.*)$/ ) ) return pathFromSwf;
// this may need to be customized based on your extension/server settings.
var basePath:Array = swfURL.substr( 0, swfURL.indexOf( ".swf" ) ).split( "/" );
basePath.pop(); // clear out the swf's name.
var altPath:Array = pathFromSwf.split( "/" );
for( var i:int = 0; i < altPath.length; i++ )
{
// ".." subtracts from the path/
if( altPath[ i ] == ".." ) basePath.pop();
// otherwise append
else basePath.push( altPath[ i ] );
}
return basePath.join( "/" );
}
location of your swf file:
loaderInfo.loaderURL

how to find URL of the page where the Flash file is embedded

I am writing a Flash app in Flex Builder 3.
I have a problem. I need the URL of the place where the Flash app has been embedded.
mx.core.Application.application.url
This gives me the address of the original swf file, but I actually need the URL of the HTML file where this SWF has been embedded.
is there a way ???
thanks!
Ali
You have 2 options.
in flex:
private function initApp():void {
browserManager = BrowserManager.getInstance();
browserManager.addEventListener(BrowserChangeEvent.URL_CHANGE, showURLDetails);
browserManager.init("", "Welcome!");
}
and the listener
private function showURLDetails(e:BrowserChangeEvent):void {
var url:String = browserManager.url;
baseURL = browserManager.base;
fragment = browserManager.fragment;
previousURL = e.lastURL;
fullURL = mx.utils.URLUtil.getFullURL(url, url);
port = mx.utils.URLUtil.getPort(url);
protocol = mx.utils.URLUtil.getProtocol(url);
serverName = mx.utils.URLUtil.getServerName(url);
isSecure = mx.utils.URLUtil.isHttpsURL(url);
}
That code works both on the server and on Local host.
if that does not work for you (upload the error here first) but you can also create a JS function that will return the URL and have flex call this function.
my comment is unreadable so here it is as an answer.
The code inside SWFObject makes flash act alittle wacky when it comes to the browser manager.
the solution is inside history.js (first attach it to the HTML if you didn't)
Then, comment out these lines of code.
if (players.length == 0 || players[0].object == null) {
var tmp = document.getElementsByTagName(‘embed’);
players = tmp;
}
And this one
if (player == null || player.object == null) {
 player = document.getElementsByTagName(‘embed’)[0];
 }
This should solve your problem.