Uploads from Schill, tagged soundmanager2

Casette Tape UI Prototype - Screenshot

nobody@flickr.com (Schill) — Mon, 01 Oct 2012 14:59:51 -0700

Schill posted a photo:

It occurred to me that I never posted a screenshot of the final product - so here it is. (See more for details and the lamp project.)

Patterns

nobody@flickr.com (Schill) — Mon, 14 Mar 2011 23:32:17 -0700

Schill posted a photo:

Fiddling with reading data from WAV files via PHP, started making a waveform "sprite" and noted the inherent patterns in rhythm.

In this case, Cypress Hill's "Boom Biddy Bye Bye" (top) and Westside Connection (Ice Cube)'s "Bow Down", which is quite loud.

Turntable UI prototype: Progress

nobody@flickr.com (Schill) — Sun, 06 Feb 2011 13:57:38 -0800

Schill posted a photo:

Now scaled up to a 500-pixel-wide version.. Via Flickr image search (yay!), I found this line drawing of a turntable tonearm made by a designer/creative type. It was made for a friend who was having a tattoo of said design!

I've asked for permission to use the tonearm image for this UI, and will be working something like this into the design. The top-down view and line drawing was exactly what I was looking for.

iPad + iPhone / iOS 4 Audio() stress / smash testing

nobody@flickr.com (Schill) — Wed, 08 Sep 2010 21:40:44 -0700

Schill posted a video:

This fascinating 10-second clip (sarcasm) shows an example of SoundManager 2 + HTML5 audio stress test pages running side-by-side on an iPad and iPhone. I'm trying to figure out when and what may cause the dreaded "cannot play movie" error dialog sometimes shown.

The process roughly involves new Audio().src = 'foo.mp3?rnd='+Math.random() being assigned, and then at onfinish(), the process is repeated until the browser (or device) barfs with "cannot play movie" after running out of memory(?) or other resources.

The buttons are provided as a way of starting the sound create-play loop again, should it stop for some reason. On iOS4, sound playback must be user initiated and if new sounds are to be created and/or played, they must be chained via the prior sound's finish event.

The point is to try to determine what kind of limits (RAM, number of objects, amount of requests/loads) are eventually being hit and causing the strange error.

The iPad made it to 135 plays in this case, and the iPhone (a 3GS with iOS 4.1) has finally appeared to have crapped out (albeit the sound stopped, but no error dialog) at 279. Starting playback again via tapping a button gave out at 291, no dialog.

With the iPad, once failed, subsequent reloads of the page immediately fail to play audio and show the modal error dialog. The iPhone seemed to clean up after itself and was responsive after a reload of the page.

Cassette Tape Web UI Prototype - 07/22/2012

nobody@flickr.com (Schill) — Mon, 23 Jul 2012 09:01:57 -0700

Schill posted a photo:

Side-project of the moment: Making a web UI (HTML + CSS + JS) for playing MP3s, based on classic cassette tape designs like the TDK MA-R90. This ties into SoundManager 2 for the audio controls, and uses CSS animations as you might imagine.

I've had some design help on this one from Brian Scates, who's provided renderings of the tape reels, spokes, body texturing and highlights. A number of skin/theme and design ideas are being played with, and this one looks to be going in a good direction.

There is a lot of border-radius and percentage-based positioning and dimensions in use, with the intent of having a possibly-fluid UI. It's a fun little work in progress.

360° + spectrum UI (WebKit Audio Data API Tests)

nobody@flickr.com (Schill) — Sat, 30 Jun 2012 19:42:17 -0700

Schill posted a photo:

A quick hack using the new/experimental getByteFrequencyData() and getByteTimeDomainData() methods to effectively recreate the visualizations I've traditionally done via Flash 9's computeSpectrum() method.

You can see the regular, production version over yonder.

Check the video for an idea of this UI in action with the Audio Data API (warning: some really loud bits.)

360° + spectrum UI (Webkit Audio Data API-based Visualizations)

nobody@flickr.com (Schill) — Sat, 30 Jun 2012 19:42:15 -0700

Schill posted a video:

Screencast: A quick test using the new/experimental getByteFrequencyData() and getByteTimeDomainData() methods to effectively recreate the visualizations I've traditionally done via Flash 9's computeSpectrum() method.

Warning: There are some really loud bits.

"The Wheels Of Steel" Browser-based turntable prototype

nobody@flickr.com (Schill) — Sun, 17 Apr 2011 14:59:24 -0700

Schill posted a photo:

Finally! The UI I've wanted to build for years, mostly-realized.

A work in progress which began with a simple <div> - CSS 3's border-radius allows for circles, overflow:hidden lets us have clipped (ie., circular) background images - you can see where this is going.

This is experimental and very dependent on hardware acceleration, but it runs pretty smoothly under Safari on OS X.

SoundManager 2 under the hood, along with a number of other technologies. Release and documentation TBD.

The "Wheels Of Steel" make a spontaneous debut at Bayjax

nobody@flickr.com (Schill) — Wed, 30 Mar 2011 09:25:05 -0700

Schill posted a photo:

I gave a presentation on HTML5 Audio at a Yahoo!-internal front-end summit event, and finished up things with a demo of this turntable prototype I've been working on. It started with basic CSS, and then grew to be more graphical.

A public Bayjax event followed the internal conference, and I ended up doing a spontaneous DJ set while people waited for the pizza to arrive. Fun!

This thing will be live and on the SoundManager 2 site (and github) once I fix some bugs and finish off the last bits of the UI. It's highly-dependent on hardware acceleration and is experimental, but I think people will get a kick out of it.

Derek Garthright has another shot of the UI in action.

Ever-so-slightly off-brand.

nobody@flickr.com (Schill) — Sat, 05 Mar 2011 22:58:54 -0800

Schill posted a photo:

Cheap Canadian knock-offs. ;)

What dial-up looks like

nobody@flickr.com (Schill) — Tue, 18 Jan 2011 21:10:32 -0800

Schill posted a video:

In the midst of making a joke aboot Canadian Internet in 2011, someone posted an audio clip of an analog modem handshake - "the sound the modem makes when it's connecting." I was thinking it might be interesting to visualize via SM2 + JS + canvas, so that's what this is.

Blue = raw waveform, green = frequency spectrum (starting at 12:00 and going clockwise, range 0-20 KHz)

Sound credit (CC sampling plus license): www.freesound.org/samplesViewSingle.php?id=16475 by jlew, freesound.org

This visualization is part of the SoundManager 2 API; see 360° UI demos for live examples.

A Year of SoundManager 2 Development, visualized with Gource

nobody@flickr.com (Schill) — Wed, 29 Dec 2010 23:18:35 -0800

Schill posted a video:

A visualization of source code changes made during the course of 2010 on Github, compressed to 90 seconds. It's no Flickr codebase, but it's neat to see core files continuously changing vs. intermittent large batches of demo + documentation updates. The audio is a random home-brew drum machine creation.

Created via gource --multi-sampling --viewport 1024x768 --output-framerate 30 --seconds-per-day 0.15 --auto-skip-seconds 0.15 --user-scale 0.6 --hide progress

Reminder to self: Math can be beautiful (2/2)

nobody@flickr.com (Schill) — Sun, 10 Oct 2010 18:24:49 -0700

Schill posted a photo:

A screenshot of the SoundManager 2 360° player UI in action, visualizing the waveform (blue) and frequency spectrum (mostly-green here.) I'm lousy at math, but even simple patterns can make pretty things.

Reminder to self: Math can be beautiful (1/2)

nobody@flickr.com (Schill) — Sun, 10 Oct 2010 18:22:48 -0700

Schill posted a photo:

A screenshot of the SoundManager 2 360° player UI in action, visualizing the waveform (blue) and frequency spectrum (black). I'm lousy at math, but even simple patterns can make pretty things.

The moire effect seen in the denser areas of the blue graph is quite interesting.

Tinkering with transform and transition CSS

nobody@flickr.com (Schill) — Sat, 04 Sep 2010 22:26:03 -0700

Schill posted a video:

-webkit-transform and -moz-transform in Firefox 4 (beta 4), combined with JS whileplaying() setting angle based on play progress. (SoundManager 2 prototype stuff.)

A bit excessive, but it was fun to see that it worked in Safari and Firefox 4 - and in theory, it should work in Opera 10.5+, too.

SoundManager 2 + HTML5 Audio on iPhone OS 4.0 (beta)

nobody@flickr.com (Schill) — Fri, 28 May 2010 13:17:47 -0700

Schill posted a photo:

I'd heard that the new HTML5-enabled stuff works on the new iPhone OS, playing inline like on the desktop and the iPad with firmware 3.2; this screenshot from a friend confirms it. Nice!

SoundManager 2.96a.20100520 (+HTML5) source, run through Wordle

nobody@flickr.com (Schill) — Wed, 26 May 2010 21:38:48 -0700

Schill posted a photo:

A screenshot of running soundmanager2.js through Wordle, revealing basic patterns in the code.

It appears that JS keywords false, return, null, function, else and true are quite common, as is the ".wD" (writeDebug) shorthand method in the full, commented, debug version of the code.

Compare with August 2008 and July 2009.

Hacking audio on the iPad with @rharmes at Epicenter Cafe

nobody@flickr.com (Schill) — Sat, 22 May 2010 17:50:57 -0700

Schill posted a photo:

Trying to get SoundManager 2 working for a particular case playing M4A files; he might have found a bug. TBD.

(Edit): Nope, I forgot.. Turns out you can't automatically have new Audio('annoying-sound.mp3').play() start, Apple thought of that; the user must initiate/start playback of the audio, via click on a link or something similar. You can call load() however without requiring user interaction.

Additionally, the iPad will only play one sound at a time.

SoundManager 2 + HTML5 Audio() on the Apple iPad

nobody@flickr.com (Schill) — Fri, 21 May 2010 00:12:03 -0700

Schill posted a video:

Finally released as an experimental feature, a month or two in development: HTML5 Audio() support for my JavaScript Sound API, with SoundManager V2.96a.20100520. (Progress from the prior dev version.)

This is the first time this API has had the capability to be 100% Flash-free, and I have to say, it's a rather liberating thought. It's shown here working on the iPad; it may be playback or wifi that's a bit sluggish to get going. The Palm Pre also works, which is a good indication of where mobile devices are going with this stuff.

There are some bugs and inconsistencies in support across differing browsers and platforms, but I expect those to be ironed out over time. This is part of the reason why the feature is experimental, not to mention the fact that user testing in the real world is part of where I get some of the most, and best, bugs found and fixed. ;)

Also on the Githubs:
github.com/scottschiller/SoundManager2/

SoundManager 2 + HTML5 Audio() on the iPad

nobody@flickr.com (Schill) — Thu, 22 Apr 2010 14:24:10 -0700

Schill posted a video:

Seen here, (mostly) working on Ross' iPad - ie., sans-flash. Noice.

This is from the v2.95.20100323+dev branch, a work-in-progress.