Sounds are problematic, splitting images is not

In my latest widget, the Reaction Game, I wanted to have some sounds.

The basic idea of the game is that some lights will turn on and you have to click on them... sometimes you may have to click on the same light more than once. This might be a bit confusing, as when you click on the light and it doesn't turn off you might think "wtf, why did it stay on?"

This is why I wanted to add different beep sounds for each of the lights.

There are few options to do it:
- Use a .swf file which can play sounds (See my post here)
- Use the object tag
- Use the embed tag
- Use the Audio object in JavaScript


The .swf file which can play sounds...
This one used to work. I don't know if it was Opera 9.01 or 9.02 which broke the functionality, though. It still works outside widgets, though.

The object tag...
works outside widgets but inside widgets causes them to freeze.

The embed tag...
does the same as the object tag

The Audio object...
the same as the two above


There are so many alternatives, yet none works. Why? Get to fixin' it, Opera Software!



In the other news, I've again released a bunch of new widgets.

I'll describe one here because it has a pretty intresting approach to doing some things...

The Puzzle Creator widget lets you create a jigsaw puzzle of any picture on the internet. You just give it the URL of the image and stuff like how many columns and rows of pieces you want.


As you might know, JavaScript doesn't really have any image manipulation functions, so you can't just take an image and split it in smaller pieces. The trick employed here is the CSS clip property!

You can use the clip property in CSS to define the area of an element you want to display... so, to get small pieces of an image we just calculate the size and position of the part we want to show and use the clip property. Pretty neat, even if I say so myself.

This, however has a small problem again... if you clip an image, the image's width and height will still be the same and the parts outside the clip area won't show but they are there, so the area inside the clip rectangle will be offset from the corner.

To fix this, the widget just calculates the offset and saves it to each piece with setAttribute.


For those of you who aren't using Opera (why?!), here's a non-widget version of the puzzle creator


There might be one additional approach to doing this with JS. Both Firefox and Opera have an element called "canvas". This can be used to draw graphics, a bit like GDI for example.

As I don't have much experience in using the canvas, I can't say this for sure, but you could just put the image on the canvas and draw white on top of parts you want to hide. I'm pretty sure you can use images on the canvas like that, so it should be quite possible.

With this approach, however, you would have to code in various things like click events and such. When using separate html elements, changing the places of the pieces is as simple as changing different left and top attributes.


That's all for now.