Live Music Map Idea

Venue Map

I’ve missed some really good shows lately, walked right past them in fact, simply because there’s so much going on in NYC.

So I’ve starting to make an app that pulls in all the local venues from Songkick, plots them on a Google Map, and lists the upcoming events. Actually, I’ve decided to parse event data to find out which artists are playing, and I’m planning to use that as the basis for venue inspired radio stations.

Source Code
Demo

Coming soon:

  • Local radio for upcoming events in a metro area and at a specific venue
  • Geolocation + search to set location (NYC only for now)
  • Create ‘venue playlists’ like Downtown Free Jazz or Brooklyn Hardcore by listing favorite venues
  • Browse other people’s venue-based playlists.

This might become a project for Dynamic Web Development, we’ll see! I had fun with Google Maps and music API’s way back at Music Hack Day 2012, happy to get back to it.

Hacking Higher Ed

Jayati, Jerllin, Tarana and I came up with some interesting ideas for our Hacking Higher Ed presentation.

One key point is that education is social, and that’s an aspect that is missing—or at least very different—in online education. The combination of Clay Shirky, my fandom class with Zoe Fraade-Blanar, and my previous experience trying to facilitate conversational spaces has inspired me to bring this approach to education. I’m interested in building a discussion forum tool/toolkit for a community of learners. I want it to be social because I believe that learning is socially motivated. I want to facilitate the type of community where people who have just learned something are motivated to turn around and share it with their fellow learners. This is both to cement what they’ve just learned and to teach in a way that experts often cannot. I think this decentralized community could be integrated into a teacher-student ‘class,’ but could also serve independent learners.

My favorite project ideas so far are…

1. Annotating videos with timestamped discussion threads

2. Browser extension for sharing and discussing online resources with a class, either public or private. Learners would tag resources with comments that are automatically posted to a discussion forum.

–> After presenting this idea in last week’s class, we learned that Mimi Yin has been working on a project kind of like this—a browser extension called http://ponder.co that allows classes to discuss web content.

3. “Am I Doing This Right?” — a Stack Exchange-inspired forum based around video Q&A’s. I’m having second thoughts about this because text has so many advantages over video, and Stack Exchange has already covered so many topics. But a video option for chat and discussion could be very valuable for certain topics.

Letters From the Book of Etiquette

Python helped me to find the poetry within Emily Post’s Etiquette.

First, I ran a script that output a dictionary of words that appear more than 10 times, sorted by how often they appear. I scanned this dictionary and grouped my favorites into lists. I also created a list of lines leading up to ‘rests’ (commas and colons) and periods so that I could control the pacing amidst the randomness. Here is a randomly generated poem from the ‘rest’ list:

greet each other by waving their arms aloft,
the names acquired in her own social life.
and ardor:
Guests.
silver buffer,
salad which is cold,
that of their intimates,
If because of illness or absence,
class),
part in it, as it is supposed to be bad luck.

I decided to create a series of mini-poems that follow a certain structure. Each starts with the word Dear…

Dear Miss Strange:
order.
The best type of young men pay few,
friends nearby.
Old-fashioned sentiment prefers that it be white,
leg in his finger
written in full,
change that has taken place. In case of a very small funeral
weather,
smaller letters than the name.

Dear Mrs. Town:
look for untruth. To
save your efforts for the next fancy dress ball,
people of position are people of position the
ground floor,
is put the salad fork, the meat
writes in something else. If she has any orders or criticisms to make,
advance–whether here or in Europe
is the first requisite in table-manners,
corridor.

Dear Sir:
order.
because of their distinction and smartness,
people strictly observe this rule.
ARE HONEST,
manner obtrudes upon her, he lifts his hat
first two go up the chancel steps and stand at the top; one on the right,
London is the home
manners,
half way when already Mlle.

Dear Mrs. Kindhart (or Martha):
always introduce:
or washing in a little tin basin,
people who deport themselves abominably, who
a crate to cross the ocean,
However, to go back to table setting: A cloth
of gold brocade,
In the world of smart society–in America
In going to inquire for sick people,
5.

Dear Mrs. Brown:
give most of their time to their grown and growing
melting-pot,
servant’s right hand;
those at the bridge tables. They all say,
(instead of the fruit knife and fork
Other pet offenses are drumming on the table with one’s fingers,
five o’clock,” “Mrs. Jones will be home
trunks,
everywhere.

Poetry with Python 001: Cruelty

In Reading & Writing Electronic Text, we’ll be writing Python scripts that take text as input, and output poetry.

I searched Project Gutenberg for ‘Manners’ which led me to two public domain books. First, I found Manners and Rules of Good Society (Or Solecisms To Be Avoided), by a Member of the Aristocracy, 1916. I also found Military Manners and Customs by James Anson Farrer, 1885.

I began trying to figure out what words appear a lot, by only printing lines that contained certain words or character strings using line.find(“____”);

Decontextualizing “cruelty” from Military Manners and Customs produced interesting results: cruelty4.txt

But I wanted to incorporate other words, so I created sets for interesting characters that kept popping up like “scurvy” “men” or “man” and “Chr.” Then I wanted to randomize their order, and realized I had to use list() instead of set() and imported random. I further subdivided the Cruelty set into long and short lines to giv control over the rhythm/pacing. I created an order for the random.choice()’s so that the poem, and I preset the first and last lines to  make it feel more like a composition.

Here’s the Python script: cruelty6_fin.py

Here’s the resulting poem: cruelty6.txt*

*The earlier version at the top is actually my favorite.

Fanlike Activity: Jazzercise

This week’s assignment was to perform a fanlike activity for something that we are not a fan of.

I chose Jazzercise. Jazzercise is group aerobic dance to popular music. I am not a fan of any of those things, but my girlfriend is a jazzercise instructor, and I am a fan of her, so this seemed like a good excuse to see what Jazzercise is all about my participating in a 60-minute session. Otherwise, I would’ve felt very awkward because I was the only male in the room. Also, Jazzercise has a different reputation than when it was founded in 1969, for example here is an example of another aerobics fitness group—Jazzercise’s target market—making fun of “the 80’s fad.” I think there is a lot of potential to make Jazzercise cool again, I also convinced my Fandom classmate Tessa to join in this activity, and here’s some evidence that we were there:

jazzr

Continue reading →

Web Audio Editor (update)

webaudioeditorTitle

Web Audio Editor: A simple audio editor that works in the browser, designed for kids age 7+ (URL // source code)

Description

I teach music workshops at an afterschool program where kids build their own sample libraries from scratch. They find the default audio editor (Audacity) really frustrating, and I’m with them! So I decided to build an audio editor that does all the stuff that kids like to do (like reverse sounds, change the speed, and add reverb). I wanted an easy way to make good sounds, and learn about sound in the process.Even though it was designed for an audience who has never worked with digital sound before, the Web Audio Editor can be of use to anyone who wants effects or just a quick edit. I wanted to do this in the browser, rather than as a standalone application, after researching music education software’s transition to the web through my Technology for Music Education course (at Steinhardt). I also drew inspiration from Pixlr, the online photo editor that I choose over Photoshop for quick little edits. Web audio is still in its early stages, so the pieces necessary to build this weren’t available until very recently. But HTML5, the WebAudio API, and Canvas open up a lot of potential for audio playback and visualizations.

Much of the Web Audio Editor’s functionality comes from SoX, a command line utility that has been around for over 2 decades. Shawn Van Every introduced me to SoX in CommLab Web, and helped me set it up on my server so that I can call it with PHP. The frontend is built off of Wavesurfer, a JavaScript library that visualizes the waveform in a JavaScript Canvas. I also added a Canvas to visualize the frequency spectrum, inspired by ICM and Marius Watz’ Sound as Data workshop. I am continuing to develop this project and would be thrilled to present it at the ITP show.

Personal Statement

My primary inspiration was seeing kids struggle to use Audacity. I wanted to see if I could build something simpler that functions in the browser. I developed the idea in a course at Steinhardt called ‘Technological Trends in Music Education: Designing Technologies and Experiences for Making, Learning and Engagement.’ I made it a project in CommLab Web (just to get the PHP / SoX running) and ICM (to visualize the sound data and build a user interface).

Background

My course at Steinhardt included readings from MIT’s Lifelong Kindergarten group, and I became very interested in Scratch, a visual programming environment for kids. Scratch very effectively teaches programming concepts by giving a space to create and readymade pieces, like lego blocks. Scratch has an audio editor that has been inspirational for this project.On a more technical level, I’ve found several attempts to build a Web Audio Editor, including plucked.js, a thesis project called Audiee (http://www.stud.fit.vutbr.cz/~xmyler00/audiee/#), and a thesis project by Ryan Viglizzo here at ITP. I’ve been in touch with Ryan. I have dug deep into PHP, SoX, CSS, HTML5 / JavaScript / Web Audio / Canvas to figure out how to do a lot of things I had never done before.

The Web Audio Editor was designed for kids in my after-school workshop, so 2nd-8th graders who have short attention spans and haven’t necessarily worked with digital audio before. But I think it’s of use to anybody who needs to make a quick audio edit, or add some fun effects.
I’ve learned a ton! I had never heard of SoX and was new to PHP. Initially I thought I’d be able to use Processing.js and Minim to visualize and scrub through the audio. But I quickly learned that Minim uses JavaSound, and Java is going out of fashion for web browsers. I also learned more about how Processing.JS works and why it won’t really be able to help me in this case. So I dug into HTML5/JavaScript, where I discovered that much of what works in Processing can be recreated in a Canvas, and the WebAudio API works a bit like Minim. I’ve also learned a lot about user testing with different audiences, including the kids in my after-school program as well as my classmates at ITP.

References

Built with SoX, and Waveform.JS a library by Katspaugh. Other libraries include Bootstrap and jquery. The frequency spectrum visualization draws from Boris Smus’ Web Audio API ebook (O’Reilly 2013). Many thanks to Shawn Van Every, Daniel Shiffman, Alex Ruthmann, Sam Brenner, Sam Lavigne, Luisa Pereira, Ryan Viglizzo, Danne Woo, Beam Center and everyone else who has helped me figure out how to do this!

Audio Transformer update

Audio Transformer, the Web Audio Editor, is online in a functional demo mode. It’s not ready for public testing until I prepare my server, and there are many features (and bug fixes) yet to come. But if you’d like to check it out, here it is (source code here)…

webaudioeditor

 

I had the chance to user-test with my ICM class, and observed that graduate students tend to start by pressing the button on the left and moving to the right. Only those who really knew what they were doing with audio editing would jump straight to the fun stuff (effects). A few people also thought to press Spacebar for play/pause, but most didn’t think to do that, so I added a “spacebar” text hint to this button. At that point, there was a button to place markers at a spot on the waveform, and everyone wanted click’n’drag to select an area, so I’ve begun to implement this. I also added Loop mode, with a symbol that shows up when loop is on, though if I have the time I’d like to develop my own buttons that look like physical buttons.

“Speed Up/Down” has little effect on the waveform, so there needs to be a way to show that the length of the file is changing, otherwise it doesn’t look like those buttons do anything. I added a timer in the top-right but would like to visualize this more clearly by showing the full waveform in a skinny timeline at the top, and the selected area in the bottom. As the file shortens, the zoom-level stays the same, so the selected area will grow in proportion to the full file. This’ll make a lot more sense if I can just show you what I mean. Other comments were that the frequency spectrum colors didn’t seem to correlate to the waveform colors, and if the colors that represent sound should be link.

Before presenting this to kids in my workshop, I need to indicate when WAE is processing audio, and grey out the buttons so that they can’t freeze the program by overloading the “speed up” button.

I am subbing for my friend’s Scratch video-game workshop, and I had the chance to work on sound effects using the Scratch interface:
Scratch_2.0_Sound_Editor

 

Scratch has been a big influence on my approach to “designing for tinkerability”, as has a lot of the projects and research coming out of MIT Media Lab’s Lifelong Kindergarten Group. Its audio editor has a concise, efficient design. They don’t overload the user with too many parameters, for example, they leave things as “louder” and “softer” rather than a volume slider. This is the way I’ve implemented my effects, though I think that in the name of tinkerability, I should not only provide a preset starting point, but also provide an advanced mode for users who wish to dig deeper.

Scratch gives kids three options for sounds: 1. record your own, 2. choose from preset sounds, 3. upload a sound. The kids wanted to try each of these. One group wanted to record their own voices saying “crap!” Another went to YouTube trying to figure out a way to bring the Dr Who theme into their project. And others explored the library of existing sounds. I think that offering all of these starting points would strengthen the web audio editor.

Designing for kids as young as 2nd grade is difficult because they aren’t all able to read at the same level. This applies to words, but it also applies to symbols. For example, when I asked the kids to play a sound in Scratch, some didn’t know what button to press. They hadn’t all been exposed to a sideways triangle symbol as a play button. Even if it said “play” they might not know what it means to “play” a sound. I don’t know if there’s a better way to convey the meaning of these abstract audio concepts, but I think that using the most simple, conventional names and symbols will help establish meaning that will stick with them later in life.

As my Physical Computing teacher Tom Igoe says, there’s no such thing as ‘intuitive’, just learned behavior. So in an educational setting for kids who’ve never worked with audio before, it will be necessary to point out some things.

Just this morning, I had the opportunity to present this project to a 5-year old. At first, thanks to her guide pointing out the foam chair, she was more interested in picking up the foam chair than in working with the Audio Transformer. When she sat down, I gave a short explanation that this is a way to listen to sounds and change the way they sound. I showed her how to click and drag a file from a desktop folder into the browser, then pressed buttons to change the sound. She was much more interested in dragging the sounds than in modifying them. Click’n’drag is a difficult skill for novice computer users, but she told me she’s been working on it with her dad, and she seemed intent on mastering it now. The dragging distance proved too far for her to manage, so I helped load the sound and then encouraged her to try pressing the buttons. She didn’t understand which button to press to play the sound until I pointed it out, and from there she successfully slowed down and reversed the sound and played it back. She was on a tour of ITP so my project had a lot of competition for her time, but afterwards she said that the project was “fun.” I asked if there was anything that wasn’t fun and she said no. I think this is a good sign, but I’d like to try to make it easier to load readymade sounds—perhaps within the browser itself the way Scratch does—without the need to click and drag.

As things stand, I have several features I hope to implement:

  • Don’t afford the ability to press buttons while audio is processing (because it causes errors)  (but could be done more elegantly)
  • Allow Edits w/ better highlighting of selected area
  • Zoom mode w/ additional waveform view update, highlight selection
  • Spiff up interface with symbols that can help bridge a child’s current level of understanding with audio-related symbols that’ll carry meaning later on in life.
  • Allow Record (WebRTC?) https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP   (but stops recording properly [gets glitchy] after ~three recording sessions or if a file is played until the end…why??)
  • More options for starting sounds (preload a range of cool sounds and waveforms)
  • Oscilloscope ( http://stuartmemo.com/wavy-jones/ ) because the wavesurfer plugin isn’t as preceise to illustrate the concept of a sine wave, triangle wave etc they just look like big blocks of sound…
  • Better Undo/Redo (download page with all files at end of session then delete them?) ///// on close, delete all of the files. Filesize limit. These are important before making the website public so as not to overload my server.
  • “Advanced Mode” allowing user to tweak effect parameters. Audacity has too many parameters, Scratch has too few, WAE should provide a simple starting point but allow tinkering for those who wish to dig deeper and explore

[ Dec 7th update: crossed two items off the list)