All Articles Audio Software
Javascript meet mp3 : New ways to distribute and market music online
Andrew Turner on Sun, March 6th | 0 comments
Musicians have documented their compositions on sheet music for possibly thousands of years. In the age that we live in, I feel that the format best suited to modern sheet music is JavaScript. Honestl

Musicians have documented their compositions on sheet music for possibly thousands of years. In the age that we live in, I feel that the format best suited to modern sheet music is JavaScript. Honestly, since Myspace was introduced, musicians have enlisted social media in order to project their material for the world to see and hear. Learning JavaScript is another way to stay competitive and current on the internet.  Although learning JavaScript may not seem like any fun at all, I have to tell you that it really makes it possible for an artist to truly harness the true potential of all the software tools that he or she has probably spent a ton of time and money on.

The future is bright

Imagine if it were possible for you to bypass the process of uploading your mp3, posting the link on your blog, promoting your blog across myriad other blogs, twitter, and even signing up for an iTunes distribution service. Instead, your music would live in the browser, recreated in the browser, and be made available right alongside subscription services like rhapsody, napster, and emusic. Even modern music resources such as pandora, last.fm, and grooveshark all share one common ideal: that the best-case scenario for the musician and music collector is the ubiquitous availability of music at the press of a button. What would stop your mobile device's browser, whether on an android, iOS, desktop, tablet or notebook device, from simply streaming music from your webpage, without having all the issues of plugins like flash, silverlight, java, etc?  Better still, what if music came to you just as your rss feed comes, in an easily accessible and intuitively visual interface?

Modern browsers such as firefox 4 can in fact generate audio from JavaScript. There is even an online guitar tablature player that I have read about. It doesn't sound all that great, but the point is that the quality will improve very soon, and the interactive nature of webpages makes for a fun tool to use. This is not to say that browsers would stream digital audio, even old netscape navigator could do that;  this means that the audio comes from the browser itself based on code. Web pd is a perfect example of the ability of the browser, via html 5 and javascript, to present a modern-day jukebox without any plugins or downloads.

What I would propose to you is that in order to stay competitive online as a musician, it is both an opportunity in pushing the envelope of aesthetic expression as well as a beneficial way to improve your music's availability when you utilize the web as a platform to play your music for the masses. The web is just waiting for a truly immersive and interactive successor to radio and television.

Max & Javascript

Figure 1: a little max patch containing a JavaScript object. The composer is inside!!!

Figure 1 shows a picture of a Max patch that contains a Javascript object. The grey bubble at top left is telling the javascript object to repeat 4 times and put 1 second of silence between the chords (1000 milliseconds is the same as a second). This JavaScript object, when expanded, shows a text file that is written exactly the same way as files that are used to generate most web pages today, including this one (thank you for that, by the way).

The numbers, arranged in pairs of 3, show the pitch, velocity, and duration of the notes. Instead of generating text or layout, this program generates sound. When you think about it, that is nothing new at all. A computer program making a sound has been around since before I was born. It's just that the program can live on the internet now, thanks to all the fascinating new technologies such as html 5, css3, and JavaScript.
The instructions in the JavaScript file make 4 notes of controllable duration, pitch, and volume. Max matches these notes with other notes to make a chord. The JavaScript file defines this trivial example of how music can be made with your ideas, committed to text on screen.

New ways to rock

How many out there feel unfulfilled dragging around little audio loops in an arrangement window? Hands up!!! Let's face it, most non-musicians wouldn't really call this a way of "rocking out". I suppose typing code isn't really rocking, either, but have you ever checked out Johnny Greenwood's max/msp stutter-patch guitar solo on YouTube !?? Now, that is "rocking out" i say.  This is because it is cool to make something weird and new happen with something old, like, a computer with an electric guitar for example.

More recently, a better example might be a Plastikman set, where his techno music is generating visuals and lighting, while texting phones out there in the audience with the set list, and providing an interactive touchscreen on their smart phone for them to play with the onscreen visuals and concert lighting, even extending those events out to the internet so users can participate via an iphone app. That's pretty rockin!

In this way, both the composition and performance of your music on the internet becomes a new art form that is easily obtained and played back.   Very soon, your television will be online as well, and iTunes won't be on it more than likely, and getting the internet onto every television will be a real game-changer. What is most likely to happen is that a web browser of some sort will be on virtually every multimedia device, and music will be created on the device and in fact, by the device, thanks to the artists that will tie together web design and music production.

The actual digital audio that makes up an mp3 can live right alongside this JavaScript code as well, and would be called on to play back at the user's will. The real value of having your music coded this way is that it will be able to reach services that match consumers' expectations. For example, I am a music enthusiast of course, and I am constantly looking for new and interesting albums to purchase and preview. I expect to be able to hear the music without much fuss, and from any device. I certainly expect to be able to play my music whenever I like, and not have to worry about losing access to it somehow. This is the main reason I think people are reluctant to pay for music these days. It is not because they want to avoid paying money for it necessarily, but really it's because there's not much assurance that it will be totally compatible and easily reachable for them. What I mean is that the means of playback are so fragmented that it's not as easy as popping a cd in your car's cd-player anymore. Like if I download an album off of iTunes, can i just copy the music off and take it to work in about 15 seconds?  Nope!  I have to jump through all these hoops, not because of DRM, but because it's a big pain to get on the computer and find the files, copy them to some flash drive or external, load them up in a player, and so on.

The social network

With JavaScript, you can easily integrate your composition in Ableton Live via Max for Live, or really any web browser in the not too distant future. So when I make a track, I can push it up to a site, and pull it back down from any other computer or device and keep working on the music. There's this concept of evolution with the song as it progresses, and all the parts are there to see and use in different ways, when the "sheet music" and "player piano" are at my fingertips.

I think if people realize that if they buy an album or are interested in a certain artist, they will more likely invest their time in sharing their interest with others about the artist. If it's easy to promote an artist by clicking a button on a webpage or "liking" it on facebook, then it makes a great promotional tool for the artist and also makes it fun for fans to share their interest with the community. Being a fan of a certain genre or artist is a bit thrilling, and I believe people like to link their identity with their favorite bands. In the nineties, if you had a band's t-shirt, well that was like you were totally in with the band and stuff, you might even get backstage!!!  So the "backstage" of the whole social media movement online is kind of like having a badge, avatar, or some sort of achievement linked to your identity on your blog or facebook page. Better still, if you have your favorite bands' JavaScript code, you could paste it into as many blogs and twitter feeds as you like.  I don't know how this would translate to dollars and cents, but it certainly would make music more viral and, in my opinion, a more worthwhile career path for a musician, getting references from all over the place. That can only be good for your career.

Tools like processing.js are able to produce sound in the browser, and it also opens the door to letting video and graphics integrate more easily with your composition. I was playing one of my old tracks on my PS3 last week, with the visualization turned on, and the way it listed my artist name, track name, year, label, etc, kind of looked like "MTV' from back in the day. But what if you could have this 'MTV' always available and on-demand on your mobile device, that would RULE!  What if your "hard drive" was the internet itself, and you didn't need to "save" all your music, tied to one or several devices? That's the future, I guarantee it. This is the path that a musician really needs to pursue to have a meaningful influence on the next generation. Imagine what Jimi Hendrix would be doing to web pages right now.

As it turns out, it's not hard at all to get into JavaScript and Max for Live.  There are a lot of really great resources out there for learning JavaScript. There's a really great online book for free called eloquent javascript. It's also pretty easy to throw up a website with what you are learning thanks to google sites and blogger. Be sure to check out MacProVideo.com's excellent series on web design here.   There's more than a few gems in that arena on MPV.

JavaScript is the gateway that connects web design and music creation. Tonight, I'll be looking at the new "control" app for iPad that uses a webpage as an instrument. It drives Max for Live instruments in Ableton Live from controls on-screen, that is to say, on the web page.  I'm really new to all this, so if you are new as well, please feel free to check out the video here (see link: https://sandbox.google.com/storage/dishes/JavaScriptInMax.mov), where I try to explain my learning process with JavaScript and Max for Live. The result really has me inspired to try new things with music creation. It's really not all about virtual knobs and dials, it turns out that what really makes a musician want to make music is designing the sounds and the interplay between them. Experimentation is always a good way to gain experience and learn some new things to achieve your goals as a composer and artist.

I will list the code below for my example program that simply plays 4 chords. You can see how changing the chords and altering some automation would make for a great virtual accompaniment tool. I imagine that putting this code online and making it available to other musicians would be really rockin! You can check out (literally) my repository of code thus far here.

Thanks to Headphones" target="_blank">Anna Cervova for the title image for this article.

Code Listing:

This code makes the following Max patch, in Figure 1, when you go to File, open from clipboard (after you highlight the code and copy it).
----------begin_max5_patcher----------
1079.3oc4Y0raaiCD9r8SgfNmMfyv+D2a6KPeAJJVnDqlpTaofHErY2h9tuV
yPaK2ZaQBQzCpGhQFRJ4uuONbFNi+15U4Oz9dUWd1el8wrUq915UqngFFXk2
dU9tx2ebaYGsr7cUcckOUkeGOWe068z3aaae4Cs8UYpLPHDGlu4sc0Maq5oG
F8C941l9t5+qZXL.uWbZssu0eXwfeTdn9+8kJFl44YexO0Kk8O9k5lm96Wqd
rmm0H2+5xjCuzLma3Sn3dwwmndCA11Gd9OTl7QvoobG89y+qWqK2lOLw2Wud
3i6BTX1i9Gpd8h7Fhg2303ccSe9cY4OT17zsk.gcf2ngnuVPFhKKBncoJBHw
dmYZMPBKTMPaTjFnBPCvEpFnbDucx.z.Yh0fp+Y+q8mBT1rOH4d5bQsQFi1H
twNuRSgAAJRfFtIsU+Rn8txuVMP84y6q5S74sskjWA+O27nARAFPIIMbRiqJ
P5k5YCIcdPZrSe3.JVphfltq.DRTRboFkTVXYQ.CPDjKUQ.jrH.AHBpEStBo
oXfoJPOctBT+aXtBoxw0T3lNWAtTKp.E3HQXhbEKVQ.ojDfNfpJfkZtBPykU
qCHgIrTKspPyZP.kU.hESpBPwWXzFPYEteCyT.HKIt.ppv7KQedtK6Pi4t+4
t4qRtq1Tt6l3uaFWkq.A7W.Cs277TXBG8n4aqa9w1aRe+CietZ1091qOdfMG
5OX1IDropqutorutsYzhfyVyWp2ropY7gnc0adocePEOFx9zE2ZCERCeaESf
HYjPRVntWuWzkTDMEez9bKaA6NWLrPK0N0YSC6Tz.ijFV5LGnTiowYVLMzVY
BogYJZHijFZKsabCZvMzR4bCKzIRBMzSPCL1cCFw.iXkxdAqB5RTJCPDdvJA
DQMEQhc+PJH3wPW5LGsR.XkSAVUjfEFqyRDSEX+Au3q3pqiCsdOXfu8jRVv2
nZrEh7Q18Qizdq4xDLTl.gyDeHEO1sfZDS7VHvkLvGuIq4xDHTlfgyDeLd+8
ZOxD4EXh0kLlnCgIQdV3fOigaliVczJEnEBAsQ4AQpoTv0SXEGslIZG988BS
aiwKALiQagIYnUE.ZQSjQE43fH2EGuCw4VRt2WRM48SVykIxPYRDdI9zOgvj
BQxXBFJShvCxm0G4duqQBzma4YhRfIiIgbgdTG6E1HeFku8XV6QqTfVHDzFg
GjWMOfVmLUnc3mGJLsMFuDoaDZUBWxPaHU1IhyQ.slQ0Q4NUTUBv5TtAPj07
gbMDdrBlhTBVbJvFasDB4n6jfxSVyErgDOvEmKKBTfMI26Gn3j0LAaHQCbwE
L.rpwX0nSIVCQWivI.35vNfUkKUXEBI8VjY279nH2NKzwsy5bKMWtCuEPVyk
HPfDIFODNx.BbaeYBblg0vUHvWwxlfh3EARiHbd3fwSyB1G6mYwdiuu9+ALx
Y8.O
-----------end_max5_patcher-----------

Javascript code:

This is the JavaScript code, it can be pasted into any text editor, such as Notepad, and saved as loopNote.js (or whatever you would like to call it).  It's just to demonstrate how easy it is to get some code jamming out with your music!

//sets a task that plays 4 chords and lets Max for Live tell Ableton what to play
inlets = 3;
outlets = 9;

function repeater_function()
{

velocity = 100;
pitch = 60;
duration = 80;
outlet (1, velocity);
outlet (0, pitch);
outlet (2, duration);

}

function repeater_function2()
{

velocity = 104;
pitch = 64;
duration = 80;
outlet (4, velocity);
outlet (3, pitch);
outlet (5, duration);

}

function repeater_function3()
{

velocity = 107;
pitch = 67;
duration = 80;
outlet (7, velocity);
outlet (6, pitch);
outlet (8, duration);

}
function loopNote(repeatInput, spacing)
{

t = new Task(repeater_function);

t.interval = spacing;
t.repeat(repeatInput);

t = new Task(repeater_function2);

t.interval = spacing;
t.repeat(repeatInput);

t = new Task(repeater_function3);

t.interval = spacing;
t.repeat(repeatInput);

}

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: