Knirdy

I’ve really wanted to write something for my iPhone for awhile, but just never got around to it.  Finally dug in tonight and wrote just about the simplest app you can think of: a UIWebView app.  It’s pretty much just a branded version of the native Safari browser, but it’s somewhere to start.  dBlog has a really good tutorial here.  It literally took all of 10 minutes to get the simplest app going.

One thing not mentioned in the tutorial though

I’ve been wanting to develop something, anything really, for my iPhone since pretty much the day I got it.  I just never got around to it, until today that is.  I recently saw a presentation about how simple iPhone WebViews were to implement and thought I’d give it a shot. At their simplest, WebViews are really nothing more then a branded browser, but they gave me the opportunity to dip my toe into the water, and something I’m working on may just benefit from it.

dBlog posted a really good tutorial here.  It was literally about 10 minutes from starting the project to getting it running in the simulator, and I’ve never really used xCode for anything more then a diff viewer before.  The one thing I’ll mention that wasn’t brought up in the tutorial above is how to add a custom icon:

1. Use photoshop wizardry to cram as much amazing content into a 57×57 PNG as you can
2. Drag it into the resources folder in xCode. There may be some other menu options to import it there as well, but I don’t know them off hand
3. Open the plist file in your resources directory and look for the row labeled “Icon File”  Change this to the name of your PNG file (No directory name, just icon.png will do)
4. Build, run, and gaze in awe upon your amazing new app.

Resources

• iPhone SDK Tutorial: Build your very own Web Browser! | dBlog.com.au
• When you are using Xcode to make an iPhone app, how do you change the app’s icon?

For some time I’ve been beating myself up over having pretty much zero web presence, with the exception of a few things I would rather disappeared.  At the same time I’ve been looking for some motivation to start fucking around with a bunch of the newer HTML5 stuff that is pretty much absolutely useless in my everyday life.  Enter a new blog!  I’ll (hopefully) be using this space to post some small personal projects that I’ve had kicking around in my head for awhile, or otherwise test drive some other fun bit of code.

So, first up: A jQuery UI plugin I wrote for Mozilla’s new audio API.  For now it only works in FireFox4 which is still in Beta, but if something a little more standard starts being supported in other browsers I’d like to adopt it.  You can check out the demo here. It’s pretty simplistic so far, just mixes down the stereo audio to mono and does a really simple visualization, but it’s CSS stylable (and thanks to some nagging from Criso, supports the styles changing out from under it.)

Using it is pretty simple, as long as your familiar with jQuery.  Just include the jquery audiovisualizer plugin file, plus jquery core and jquery ui.  Once that’s there you just need to have an <audio/> tag and a div:

<audio id="audioTest" controls="true" onaudiowritten="audioWritten(event);">
    <source src="Revolve.ogg" type="audio/ogg"></source>
</audio>
<div id="audioOut1"></div>

After that you just need 1 line of JS and you’re good to go:

$("#audioOut1").waveform({audioElement: $("#audioTest")});

A few styling options are supported at this point: background, color, width, and height.  All these will be picked up from the DOM though if they aren’t set explicitly.  Also, if you don’t set them explicitly you get the added advantage of the visualization resizing with the DOM.  While we’re talking about styling, transparent backgrounds are supported. This means you can in theory layer this over something else like an image, or compost it with other animations, etc.

There’s definitely a bunch of stuff I need to fix, but I’ve got kids, a house, etc and those can get in the way:

• Support displaying channel specific waveforms in separate divs
• Keep track of time. Currently it’s just displaying the audio data as it gets it, and has no concept of where the playhead currently is at.  Plus, the wider the div containing the visualization, the better chance that the display is behind since the canvas commands are not the fastest things in the world.  You can see this for yourself by setting the width of the div somewhere around 1000 and hitting play.  Wait a few seconds and pause the audio, the animation will play catch-up for a few dozen frames.
• Support visualizations wider then the frame buffer.  I have to dig around some more, but I think this is always 1024 samples/channel/buffer, thus stretching the div wider then 1024 results in a gap on the left hand side of the visualization.
• Speed up the canvas  operations by eliminating some of the calls, possibly reusing existing data on the canvas and shifting it left or right rather then redrawing on each event.  This is dependent on fixing the above bullet though.
• Implement, or steal, a JS implementation of an FFT so I can support adding equalizer visualizations.  Also, once this is in place I could probably add support for audio filters which would be fun, but probably way out of my league in the math department.

Feel free to download the source of the demo here.

References:

• http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/
• http://videos.mozilla.org/serv/blizzard/audio-slideshow/