Web audio and images
Stuart Allen
I'm trying to bring the web version of JACL up to scratch with regards
to multimedia but I think it's going to take a bit of work. At the
moment I've got basic image and sound commands working. They are used
like this:
image filename <optional CSS class>
sound filename MIME type (eg, "audio/ogg")
The sound command uses the new HTML 5 <audio> tag so it needs a
reasonably new browser to work.
In order to get audio working reliably with the Ajax mode of the web
interface I've added the JQuery library so I can easily remove all old
audio tags from the page before processing the command and then
trigger any new ones to play if they exist. This part just happens
automatically from the authors perspective though if you are using
webinterface.library. I should probably add it to the built in
interface now I think about it...
Stuart
Stuart Allen
in your game's .media file if you want to test locally:
/include/jquery-1.7.min.js application/javascript include/
jquery-1.7.min.js
Also, the 'image' command used to do nothing on the web so if you want
the old behaviour you need to wrap those commands in an 'if
interpreter = GLK" clause.
Stuart
Stuart Allen
tag with any command and have that script executed by the browser
(only in Ajax mode). This script can do pretty much anything such as
update the DOM (using JQuery) to modify the header or pop up and alert
box, for example.
Stuart
Thomas Schwarz
great things you are doing here! Can you give an example how the <script> tag returned with a command is working?
I have no experiences at all with the JQuery library...
Thanks!
Thomas
Stuart Allen
I'll work on some example code tomorrow and check it into Subversion.
To give you a bit of background now though, once a web page is loaded
browsers create something called the Document Object Model (DOM).
http://en.wikipedia.org/wiki/Document_Object_Model This model can be
read and modified by using Javascript. jQuery is a cross-browser
JavaScript library designed to simplify the client-side scripting of
HTML. For example, here is the code that looks for an audio tag in the
maintext scrolling window and deletes it so that if the new command
prints one, there will be only the latest one:
$("#maintext audio").remove();
THe $("") part is a jQuery search. ie it looks through the DOM for an
audio tag in a tag with the ID of maintext. The # before says it is an
ID, a "." would say it is a class. This is the same syntax as CSS.
Object in the DOM also have functions you can call like other
programming languages and these functions depend on the type of
object. In HTML, all tags have a DOM object associated with them, even
simple things like a paragraph tag. This is the code that the new
webinterface library uses to play any sound output by the last
command.
var sound = $("#maintext audio")[0];
if (sound != null) { sound.play(); }
It searches for a new audio tag in the maintext div - if there is one
it must have been output during the last command as any existing ones
were deleted just before the command was processed - and then call the
play() method on it.
A script tag (as opposed to an audio tag) could do anything you can
dream up. It can change CSS styles dynamically, it can change the
contents of a heading tag to change the title of the game etc all
without refreshing the page and staying in Ajax mode.
There are a few things I still need to sort out the more I think about
it. The first is that when you use Javascript to modify say the title
of the game, you need to make sure that the JACL game also reflects
that change so if the game is saved and restored or the browser
manually refreshed everything will come back as it should be.
Also, if the game is restored, the browser will need to be forced to
refreshed somehow as restoring a game won't re-run all those little
bit of Javscript the way the walkthru command does for example.
Anyway, as I was saying, I'll getting an example working that shows
the best way to go about these things that people can just copy if
they want to use these techniques.
Regards,
Stuart
Thomas Schwarz
thank you very much for this good explanation!
And I already thought you started concentrating on your musics and would leave JACL a little bit at the side or even behind.
I think I was wrong! :-)
I'll have a look at your examples!
Thomas
Stuart Allen
that demonstrates the use of jQuery from within a JACL game to modify
other parts of the page while still staying in Ajax mode. The missing
piece of the puzzle at the moment is getting the 'restore' command to
do a full browser refresh once it is run. Shouldn't be too hard, just
isn't implemented yet.
Regards,
Stuart
On Nov 27, 7:38 pm, Thomas Schwarz <schwarz.tho...@gmail.com> wrote:
> Hi Stuart,
>
> thank you very much for this good explanation!
>
> And I already thought you started concentrating on your musics and would
> leave JACL a little bit at the side or even behind.
> I think I was wrong! :-)
>
> I'll have a look at your examples!
>
> Thomas
>
> On Sun, Nov 27, 2011 at 8:57 AM, Stuart Allen <stuartallen1...@gmail.com>wrote:
>
>
>
>
>
>
>
> > Hi Thomas
>
> > I'll work on some example code tomorrow and check it into Subversion.
>
> > To give you a bit of background now though, once a web page is loaded
> > browsers create something called the Document Object Model (DOM).
> >http://en.wikipedia.org/wiki/Document_Object_ModelThis model can be
> > On 26 November 2011 07:48, Thomas Schwarz <schwarz.tho...@gmail.com>
> > wrote:
> > > Hi Stuart,
>
> > > great things you are doing here! Can you give an example how the <script>
> > > tag returned with a command is working?
> > > I have no experiences at all with the JQuery library...
>
> > > Thanks!
> > > Thomas
>
> > > On Wed, Nov 23, 2011 at 6:39 AM, Stuart Allen <stuartallen1...@gmail.com
>
> > > wrote:
>
> > >> One last thing. I've also now added the ability to return a <script>
> > >> tag with any command and have that script executed by the browser
> > >> (only in Ajax mode). This script can do pretty much anything such as
> > >> update the DOM (using JQuery) to modify the header or pop up and alert
> > >> box, for example.
>
> > >> Stuart
>
> > >> On 23 November 2011 15:51, Stuart Allen <stuartallen1...@gmail.com>