It's been a quiet summer here on the blog, but I've been multimedia-ing away in the background and finally have something to show for it. I've been working on my (previously meager) programming chops for the past 6-7 months, which means that JavaScript (a programming language used for controlling web pages) is less of a mystery to me than it once was.
About four years ago, I put together a series of "integrated listening guides" for my own teaching - they allow the user to click through the landmarks of an analytical outline to jump instantly back and forth within an embedded score and video (or audio). The JavaScript I used was mostly copied and pasted from other sites I'd found online. I often understood very little about how the code worked, but kept applying virtual duct tape until I got the results I wanted, and indeed, I found these guides very useful in the classroom. They made it so easy to navigate a large musical structure on the fly as there's no time wasted turning pages or cueing up a video to the right point.
But there were plenty of drawbacks, especially in terms of cross-platform compatibility. Reliance on some flash elements meant the guides wouldn't work on iPads and the like, and reliance on the quirky Scribd platform for embedding the scores caused some limitations and made things look kind of clunky.* And, basically, it seemed like every six months or so, some web standard had changed so that the guides didn't work properly until I applied more virtual duct tape.
Anyway, over the past few weeks, I finally got around to updating these guides, and they now work much more elegantly, with a variety of improved features, including:
- Pages now turn automatically with the music!
- The outline automatically updates to highlight the section being played at the moment.
- Two of the guides (Brahms and Mozart) feature running captions that describe the music.
- Pages resize nicely according to the size of the browser window.
- The guides work pretty smoothly across a range of browsers and on iPads! (I assume they work fine in Android devices as well as long as the screen is big enough. They more or less work on my smallish Kindle Fire HD, though it's not a great user experience.)
- In the two Beethoven symphony guides, one can instantly jump back and forth within the first and second times though the repeated Exposition sections.
- The Beethoven "Eroica" guide includes the option of switching orchestras on the fly! The two performances (Järvi and Bernstein) feature very different tempi, but they nevertheless stay closely synced.
- Just for fun, you can speed up or slow down the performances.
In short, they do most of the things I'd want them to do, and I'm also gratified to say that I now understand 98% of how the JavaScript is working. In fact, much of the code is written from scratch. The guides available now include:
- Beethoven: Symphony No. 3 "Eroica," 1st mvt.
- Beethoven: Symphony No. 5, all four movements
- Beethoven: Piano Sonata, Op. 111, 2nd mvt.
- Brahms: Symphony No. 4, 4th mvt.
- Mozart: The Marriage of Figaro, Act II Finale
- Mendelssohn: Violin Concerto, 1st mvt.
I began referring to these guides a few years ago as "musical manipulatives" by analogy to the kinds of hands-on physical objects used to help teach math concepts. The idea here is that, for the student, grasping the structural relationships within a large-scale work can be daunting. These guides provide a framework for visualizing the structure as a whole and examining the components instantly. This makes it easy, for example, to compare various appearances of a theme in different keys and contexts. I've found this to be a great way to help explain the tonal features of sonata form. In the variation movements (Brahms and Beethoven Op.111), one can easily sample individual variations to see how they relate to each other. (Designing the guide for Op.111 helped me make sense of how the last few variations begin departing from the thematic structure.)
I've written before about the concept of storyboarding a piece by listening only to a few seconds of each segment to get a quick overview of the shape of things. In the new Beethoven "Eroica" guide, if you click on the "Big Bangs" link, you'll hear a relatively seamless performance that condenses 15.5 minutes to exactly 60 seconds of sforzando milestones.
A few years ago, commenter dfan wrote here:
A few years ago, commenter dfan wrote here:
I remember as a little kid when I suddenly realized that I actually could hold the whole structure of the first movement of Beethoven's 5th in my head and follow it from beginning to end, and that it actually made logical semantic sense in the same way that a long sentence does, rather than just being a continuous stream of arbitrary music that happened to end at some point. It was a real epiphany.That is the kind of perspective I hope these guides can help to provide. (Listening to the "Eroica" at double-speed, though kind of silly, is also an interesting way to get a bird's-eye perspective, a concept I explored here: listening at 10x!)
I realize I'm not the first to design something like this, though I think my design has some nice advantages over what I've seen before. The San Francisco Symphony's excellent "Keeping Score" series has an "Eroica" guide. (Warning: music starts playing right away. Bad design.) It certainly has more detail at some levels and a cleaner (though ugly) looking score, with a vertical bar that awkwardly lurches ahead every measure to show exactly where the music is. It also, most frustratingly, only includes excerpts, and never provides a structural view of an entire movement.
Touchpress's amazing Beethoven 9 app includes four perfectly synced performances, plus cool bells and whistles like a manuscript view, a little light-up orchestra simulation, tons of background information, and a constantly scrolling score (which I find a bit disconcerting). It's not easy to view the entire score at once, although a cool "curated score" option shows only the most "important" instruments at a given time to save space. Again, I feel what it does least well is keep a focus on the large-scale structure, as there's no option of viewing an outline while the music plays. It also has the notable disadvantage of only working on iOS devices. I've thought before about getting into mobile app development, but it's more gratifying in some ways to design a single site that works equally well on desktops, laptops, and tablets.
Of course, not everything is perfect about this project. The most glaring problem is that I don't own rights to any of the recordings I'm encouraging you to manipulate. Most are still available on YouTube as well, so it's not like I'm the first to throw them into the wild. Here's an expansion of my Unfrozen Caveman Blogger defense from 2011:
I'm just a caveman. I don't really understand how this whole brave new world wide web works - your free-flowing videos and mixed media messages frighten and confuse me. When I see a big symphony orchestra playing pretty tunes on this smooth, flat, glowing rock, I think, 'Oh no, did an evil fairy shrink them?' I don't know. Because I'm a caveman. I don't understand what's right or what's wrong when it comes to posting media. But what I do know is this: Paavo Järvi knows how to bring out the prehistoric in historic music - and Stefan Jackiw, at age 14, plays the Mendelssohn concerto as beautifully as it can be played.A project for the future is to build guides like this that use embedded YouTube videos, so I don't have to worry about how it got posted. (I know the basics of how to do that as demonstrated here and here.) This introduces more complications as some videos don't allowing embedding outside of YouTube and there are ads to contend with. (Yes, I understand that watching ads is a fair trade-off for getting free content.)
So, I'm just referring to these as prototypes for now - evidence of what can be done. I'm certainly not making any money from them, but I would encourage people to give them a try, especially in the classroom. I'd love to get feedback on what works and what doesn't. If you do use them in a class or with students, I'd love to know about that as well. I'll do my best to keep them functioning well. If you've visited any of the guides before, it's always a good idea to refresh the page to be sure you get the most recent version as I'm still tinkering with page-turn timing and like - and more features might still be added.
The best place to go to access the guides is thedoctorinspiteofhimself.com/guides**.
Oh, and I have the demo video above (full-screen, HD viewing recommended) which samples the two Beethoven symphonies, the Brahms symphony, and the Mozart opera.
Spread the word!
* If you're curious, here's what things looked like with the Scribd platform, although this version has the auto-page turning enabled, which wasn't true back in 2011. An odd aesthetic principle I've discovered as my design has improved is that the simpler and more elegant things look, the less it seems like there's any significant work behind the scenes. I actually had a strange feeling of being a bit disappointed at a stage when the "virtual duct tape" stopped showing so much and it all just looked like these pages must be easy to throw together.** I've also recently debuted a new landing page for thedoctorinspiteofhimself.com, which used to point to information about an edition of a Gounod operetta I prepared, but now serves as a gateway to a range of multimedia creations.
No comments:
Post a Comment