Making Standalone Player as Web Page

Difficulty: everyone
Category: sharing, tool

The "HTML Maker" is a tool which makes standalone player with HTML components across browsers. The exported player bundle contains a specific disk, and can be played without installing any browser plugin.

It's very similar to Making Standalone Player as Executable Binary, so common usages are omitted in this page.

Experimental

The maker solution is still experimental, features might be changed in future.

Getting the HTML Maker

The "HTML Maker" is implemented as a regular disk. Subscribe to the disk on Workshop, then it will be mounted in your BASIC8 environment.

Making

See Making Standalone Player as Executable Binary for common usages.

Besides, check "WASM" for a WebAssembly exporting.

Exported directory will be put under the container directory of the source disk.

The content of the source disk will be packed into the "b8p.data" file.

Distributing

The "HTML Maker" disk is a freeware. You can do whatever you want to with exported bundles, including copying, sharing with others, re-selling to marketplaces, etc.

Exported bundle contains a simple HTML page, JavaScript program, packed disk and optional WebAssembly code, and runs across browsers.

All the "b8p.*" files in the "html" directory are required for further distributing, the "play.html" is a simple shell page, you can customize it as you wish.

Use the prebuilt:

https://paladin-t.github.io/b8/builds/b8p.js

instead of the relative path:

b8p.js

for a minimum asm.js build (not for WebAssembly).

Running

It requires HTML5 capability to run exported (asm.js) player; and or requires WebAssembly capability according to your exporting option. Modern browsers offer good support for it.

Some browsers don't allow CORS (Cross-Origin Resource Sharing[en.wikipedia.org]) from a local storage URL, this technology is used to load the exported "b8p.data" file. Therefore you might get a blank or infinite loading screen with such browsers when running it directly from local disk. There are several solutions:

• Enable the developer tool (menu, panel or whatever), then "Disable Cross-Origin Restrictions", this works for Safari, etc.
  
• Try out some other browsers that support it instead
  
• Host the exported content on a web server, for instance the portable Mongoose[cesanta.com] server, or any actual cloud server

Storage

Web based player also supports file accessing, persistence, etc. But it works as a sandbox rather than having the right to access your hard drive directly.

Notice that web based only saves persistence data by the PERSIST statement when:

1. Losts focus (switch to other application or browser tab)
   
2. Passes every few seconds periodically

Limitations

An exported web based player can either run through pure JavaScript (asm.js) or WebAssembly, the former offers better compatibility, the latter is often smaller and runs faster but some old browsers don't support this technology.

Some features are limited in the web based player for speed maximization and target size minimization. Including:

• Supports up to 2 gamepads
  
• Archive (ZIP), DATABASE, IMAGE, IO, JSON, NETWORK, WEB libraries are not implemented
  
• OPEN_FILE_DIALOG, OPEN_FILE_DIALOG, PICK_DIRECTORY_DIALOG functions are not implemented
  
• SAY, REGEX functions are not implemented
  
• USE_SOUND_FONT is implemented but no built-in SoundFont asset was included, you need to copy desired "*.sf2" file into the "content" directory of your disk, and use USE_SOUND_FONT("example.sf2", false) to use it
  
• PLAY is implemented but might take CPU consumption
  
• Other native dedicated functions such as clipboard, are implemented under the limitation of JavaScript sandbox

Web based player only supports automatic updating mode, set by the UPDATE_WITH function, it must be invoked once per program. Manual SYNC won't affect rendering. Unlike native players, web based runs in single thread at 60 FPS.

As the running environment is massively different from native executables, it's recommended to continually export and test your program for best appearance and behaviour, if browser is supposed to be the main target.