Archive for the ‘technical’ Category

Bonus Round: Advanced Web Audio

May 23, 2011

Hopefully this semester has provided a good foundation for understanding the technicalities of music on the web. For those wanting to LEVEL UP, I’ve included some bonus round easter eggs below… an exploration of the more advanced options available for audio on the web.

Firstly, it’s worth noting that browsers will increasingly be using HTML 5 from here on, and with this will come easier embedding possibilities and via a more developer friendly Javascript API – increasingly innovative experiences with sound online. Here’s your old friend w3schools on the topic of HTML 5, and here’s a recently celebrated example of pushing it’s capacity: (and do read the section about the technology enabling it).

As part of gathering relevant web audio bookmarks for the course (which I’ve been storing here: ), I wrote to a few musician and audio production friends, and Dan MacKinlay provided the unexpectedly detailed reply below, which I’ve added a few links to for clarity. Well worth a read for those interested in the more technical capabilities online for audio.

Add generous Dan on soundcloud!

Web audio? You mean a bald, beginnerish summary? How practical do you need it to be? For basic encoding stuff there’s the good old William Haun PowerPoinT. For the specialist, there is user interface design using javascript audio events. Quite aside from the Heath Robinson contraption flavour of such Flash solutions (and HTML5 audio is of course itself fragile and limited), the main problem with these things is that sonifying your average website is a joke.

So I divine that perhaps you are looking for something a little more cutting edge? Good old chrism’s attempt to port puredata to the web – aka WebPd. Or the older Lily project to turn firefox into a generative media plaything…?

Or my own modest bookmarks:

For the extra fun, I reckon we should plumb nearly-web audio. I hereby be possibly off topic.

Did you know the RJDJ app supports network connections?I think my next RjDJ app will be based around that idea. Or processing.js – did you know that it does some amazing audio stuff? (esp. in firefox)  (David Humprey, linked there, is optimistic about audio web stuff)

sc140 is another near-web contender.

Or, let us suck up the zeitgeist and think of augmented reality sound design. Isn’t AR last season’s hottest flavour? (Cringing at memory of punters pronouncing it Arrr, and me not being sure if it was talk-like-an-internet–pirate day or if they were just constantly amazed)

The oldest and awesomest instance of this i know is audionomad, where composers made the landscape into a a weird compositional acoustic hallucination. I heard Nigel Helyer’s composition from a chartered boat with multichannel sound system bolten on for full-spatialization goodness. The Sydney harbour bridge was a traversed by invisible roller coasters, Sydney Cove resounded with echoing screams of the drowning victims of the Greycliffe disaster, and as we passed the couple posing for their wedding photos on picturesque Dawes point, a dry voice read extracts from an early colonist’s diary, recounting  that the site was where the scurvy riddled- bodies of the dead and dying convicts where dumped from the vessels like sacks of wheat. Historicity FTW.

All you’d want is to make those annotations be collaborative and it would be webalicious.

Of course, a multichannel ferry is overkill in this day and age. everything’s made of smartphones, and the hallucinations are a little more solipsistic than a boozy ferry-ride.. Layar, for example, supports audio.

For what its worth, I’m not really interested in the web as a site for audio, as that is not what I use it for. rather, I’m interested in the web for audio control. Nothing supports nested, dynamic controls like a browser does, not even the ex-Jazzmutant-lemur. It’s still a bit more tedious than it needs to be because OpenSoundControl is a zany binary format that prefers UDP and browsers prefer delicious JSON-over-TCP. Which, as an ex web guy, I argue is excessively tight coupling on OSC’s part owing to a confusion of the hierarchy of the protocol stack. But that is a nitpick for another day.

Any of that brain dump what you’re after? What DO you mean by “web” anyhow?



Week 10 – Podcasting

May 9, 2011

What is a Podcast? Despite the implication that it must involve an iPod, this is not the case, and although Apple’s iTunes software is a popular destination for many podcasts ( iTunes makes subscribing to Podcasts easy for listeners, so even though it requires extra steps from producers to submit, most prefer to do so), iTunes is not necessary for a podcast either. This basic definition from wikipedia is a useful starting point:

“A podcast is a digital audio or video file that is episodic; downloadable; program-driven, mainly with a host and/or theme; and convenient, usually via an automated feed with computer software.”

– Wikipedia via Academics at the Community, Journalism & Communication Research group at the University of Texas at Austin.

And this weeks reading ( as discussed by radioblaster and nikkichook), expands on that definition, outlining some of the technical foundations that make it possible, and some of the social uses that spring from this.

Some Example Podcasts?

Technopodcast – note their automated availability via itunes, soundcloud, mixcloudtwitter and facebook. – daily 3 minute dose of net culture as a video. ( Which dovetails podcasting with ‘video blogging‘ )
Radiolab ( WNYC ) – An existing radio show expanding it’s reach.

ABC Australia’s Podcast collection, Australian Government Podcasts, Aussie Geek Podcast, Skepticzone (Australian based show, charges per episode)

Why Make A Podcast?

Where is your potential audience? How can you remove barriers to them finding out about your work? How can you adapt your own workflow to take advantage of automated systems?  What are the strengths and weaknesses of subscription based media / feed based media / push (notification) based media?

How To Make A Podcast


a) Using built-in services such as podomatic or podbean

b) Rolling your own, with all the added customisation ( and potential monetisation ) benefits

Wikihow’s guide to making a podcast is probably the simplest set of instructions available online, boiling the process down to:

– deciding on what type of material you will produce (research + planning )
– recording, producing
– Adding metadata – ‘Tag it, give it ID information (Artist, Album) and give it album art.’
– Creating an RSS Podcast Feed (using a blog and the Feedburner service)
– Uploading your .mp3 ( to any site or server that will generate a media file URL that ends with .mp3 )
– Make a blog post, and including a direct link to the .mp3 file ( This will enable Podcast software to auto-download it for any subscribers)
– Add a podcast button and link for people to subscribe to your show

More details are included in the Wikihow guide, but those are the basic steps. Another guide?

c) Adding your podcast to iTunes?

Apple’s guide to making an itunes friendly podcast ( See also Understanding the (difference between the) iTunes Client and the iTunes store)

Monetising your podcast

Generating a Podcast from Soundcloud
Soundcloud wrote in January 2011, that they will ‘soon’ be offering podcasting abilities from within Soundcloud:

“We’ll soon be able to offer RSS feed capability for your tracks and will be rolling this out slowly with selected users. If you’d like to apply to be included in this program and possibly have the chance to become a featured podcaster, just fill in the form below… SIGN UP FOR BETA ACCOUNT! Check out our SoundCloud for Podcasts 101 and Podcasting 101 for further details on the features and technical side of podcasting.”

You can see this being rolled out already with some Soundcloud artist pages that have an RSS icon, such as Create Digital Music ( a podcast to accompany their website ) ,whose Soundcloud page has this RSS address. In the meantime, this useful script at Cloudflipper, makes it easy to generate podcasts from Soundcloud artists, and subscribe to these with say Google reader, or any dedicated podcast software. Examples?

These two fine Melbourne artists : Faux Pas on SoundcloudLewis Cancut on Soundcloud

Group Research Tasks: (To be done in class today, in separate groups) 
1. Popular software (mac and PC) for subscribing and listening to Podcasts? List some of the key distinguishing features. Make a recommendation for best mac and PC software.

2. Research cost for:
– buying your own domain name
– buying your own server space
– having your own custom email address ( eg )

3. Find examples of podcasts that have large audiences, and find examples of podcasters who appear to be making some form of income from podcasting.

Creative Task: (To be done in class today)
– Brainstorm a podcast that could take advantage of remote collaborations ( eg something as involved as co-editing, co-curating, remixing, or something as casual as using specific twitter hashtags ),
– Think of a suitable name for your podcast, and a suitable domain name.
– Write a brief blurb describing your podcast.
– Describe some ideas about how you might use social media for research, collaboration, production and promotion of your podcast.
– Outline potential roles for delegating between participants.
– Develop a simple budget that would show the minimum costs needed.
– Publish as a blog post.

Individual Research Task :
Find a good podcast worth sharing with your peers. Write a brief blog post that includes a link, summarises the podcast and describes what makes it successful. When publishing your blog post, use a subject line like this:  “Podcast: Name of chosen podcast”. This should deliver us a large range of podcasts from the group as a whole.

Soundscapes and HTML

May 2, 2011

A few tips on creating the Audio Embedding Code for your Soundscape:

– Create an audio folder on your server with fugu / fetch etc, and upload your mp3 into it, note URL of audio.
– Test this in the browser : eg If correct, this should play your sound.

– Insert audio URL into PageOt to generate code, (note – make height=0, so you get a controller without a blank video window) Insert this code into a HTML page made in PageSpinner, include links for any sourced material.) Width can be adjusted to make the controller suit the width of page design elements. Clicking controller on/off will have it display or not, and loop and volume allow further controls. Press ‘code and options’, paste this into a HTML page, upload – and bingo!

[ Or try this web based option for generating embedding CODE. ]

What to do with your soundscapes?
Aside from publishing within your final project – where else can you publish them, and what else can you publish them with? ( Eg text, images, links to your project / music / blog etc ) And what are useful tags to use when publishing them?

Soundcloud is obviously an option, but there are also several dedicated soundscape related websites:
eg Freesound (which hosts creative commons samples),, and

Week 9: Embedding Time-Based Media Files

May 2, 2011

This week: time-based media and HTML. We’ll be covering everything needed for the video and sound part of your final assignment – Time Lapse Video techniques, sound and video compression – and below, how to publish these files within your webpages.

There are 3 main ways to display media files within a web page.

Method 1: Direct linking to a media file.

1. Upload your media file to a server. Noting the location on the server, figure out the URL for this file.
2. Enter the full URL in a browser. If pointed to the address of a media file stored online, a web browser will play back the file in the centre of a blank web page. eg the link below:

That same URL can be used with hyper-linked text (eg my time lapse video file ), to take viewers to a separate page with the media file.

Method 2: Using Files Hosted at Online Services

Most media hosting services such as Youtube, Vimeo and Soundcloud etc will give you embedding code for a file, which can then be placed within the body of your HTML page. While this allows positioning of the media file (instead of having it centred in an empty page), it still limits control over playback of the media file, and limits the look of the media player.

Method 3: DIY Embedding Codes

The most flexible, customisable option for embedding media files – is only a couple of steps more difficult than the other 2 options above, but through learning this method, we gain the capacity to play sounds in the background (by setting the values of the player visibility), add the ability to loop playback, design the look of the media player, and several other functions.

What Code Do We Need for Embedding Media Files?
W3Schools outlines the structure and syntax of HTML, and explains the relevance of elements within that structure. For embedding time-based media files, we are interested in the Object Element which ‘supports many different media types, like Picture, Sounds, Videos and other multimedia Objects’.

Below is a HTML page with a table in it, and the code for a video file embedded within that table. This allows control of where the video player is located on the page. Use the browser menu to view the source code for the page.

Having viewed the code, note there are two options for generating the relevant codes for embedding time-based media files within webpages.
1. PageOT is free software ( mac + PC ), that “an immediate access to the complex features of QuickTime plug-ins, and gives you the power to create interactive playlists and presentations.” (If installing PAGEOT in the mac lab, install into a folder on the desktop, as you don’t have permission to install into the applications folder)

2. A web based generator of embedding CODE for embedding ]

For both processes, you will need to enter the URL of your media file, choose various settings, then collect the relevant code outputted, and then place this within your HTML page.

And some context for the near future of web publishing – HTML 5audio and video:
“HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers continue to add new HTML5 features to their latest versions.”

Week 5 – HTML Formatting + Design

March 27, 2011

Having already learnt a little about the structure and principles of HTML pages, this week we will explore techniques for controlling the layout and design of a webpage. But first, via w3schools, let’s examine the context of HTML in 2011.

HTML = Hyper Text Markup Language (designed to display data)

XML = eXtensible Markup Language. (designed to transport and store data.)

XHTML = a stricter cleaner version of HTML, eXtensible Hypertext Markup Language. It combines everything within HTML 4 with the strict syntax of XML. (Unlike HTML, XHTML documents require all coding rules to be adhered to, for pages to work properly. This makes it ideal for running on mobile phones which do not have the resources or power to interpret documents with poorly formed code).

RSS is written in XML and stands for Really Simple Syndication, and defines an easy way to share and view headlines and content.

HTML 5 = is the next generation of HTML, and although most modern browsers have some HTML5 support, it is still a work in progress. Notably for those interested in sound, it introduces a new standard for playing audio in a web browser page. It also does the same for video, and offers a new way to draw graphics on a webpage with javascript (a scripting language to add interactivity to webpages). (We will be having a much more detailed look at the issues around the embedding of sound and video during week 9)

CSS = Cascading Style Sheets. Whereas HTML defines the content and structure of a document (eg it states which part is a heading, or a paragraph, using appropriate tags), CSS defines how these HTML elements are displayed (eg what font + font colour should be used etc ).

That’s our context above.

Given that this isn’t a web design course (we have a much wider focus than just the technicalities of building webpages, including analysis of the social, cultural, legal and economic dimensions of the online environment, as relevant to the music industry), and given that we have limited time – we’re focussing on learning a foundation of HTML to build webpages and just a little CSS to control how those pages look. If later desiring to pursue web development in more detail, the above context should help. And so, onto lay-out and design – which means HTML + CSS.

HTML Lay-Out – Introducing HTML Tables

The W3Schools HTML examples page hosts a large and useful series of examples all on one page. These range from the basic structure of a document through to links, images, advanced form functions and our focus today – tables. Tables allow content in a webpage to be arranged within grids of rows and columns. By creating tables of certain sizes, and putting content within specific table rows or columns, and leaving other rows or columns empty if we wish, we can control where content appears on the page, eg:

Column 1 text


(empty column) Column 2 text

TASK: Construct a html page which includes a table.
Your table should have 3 columns, 2 rows and some example text.
Adjust your table so it is 800 pixels wide. Experiment with the width of each column. (table width/

– Have a look at the code for a basic table at W3Schools, try altering some of the code, then press ‘edit can click me’ to see changes. Then move onto this table tutorialand use this to help build your html page with table. Name your new page table1.html and upload to your server with Fetch.

Using CSS to Control Colours + Fonts

There are 3 ways to use CSS to format a document in a particular style:
1. An External Style Sheet. This is a separate document with the extension .css, which lists the styles wanted for the document ( eg font colour, background colour. If a .css file is linked in the head section of a HTML document, that HTML document will be displayed according to the style rules of the .css file. This is the easiest method to style many pages.
2. Internal Style Sheet. This method inserts a list of style rules, using the style tag, inside the head section of a HTML page. This is an easy way to style a single page.
3. Inline Styles. This method inserts a style into a specific HTML tag, by using the style attribute.

How colours are classified on the web. Complete HTML colour chart. Colour Schemer (helps pick compatible colour schemes).

CSS TASK: Experiment with the 3 methods of CSS formatting.
Use your previously saved HTML page to experiment with the following:
Changing the colour of the page background
Changing the colour of the text
– Placing an image in the background
Adjusting your table.

Week 1 for Concept Development, 2011

February 28, 2011

Welcome to the very first academic week of the year. We have a lot planned for Concept Development, so you’ll be needing to familiarise yourself with the course guide as soon as possible.

Concept Development is a follow-on subject for ‘Design Studio’. If you haven’t completed that course, please read the posts about it from last semester, starting from week one, where you’ll find useful tips and shortcuts for using the macs in the lab, some ‘switching’ tips and tutorials, and the tutorial site (important to note, as we’ll be using wordpress blogs extensively every week this semester). For consistent blog and mac/pc compatibility, Firefox is our browser of choice. Please install that on any home computers.

Network literacy is at the core of the subject, and aside from weekly readings and discussions, and development of an online creative project, we will be making heavy use of the following web services: (so sign up today, if not already members)

– (blog publishing – needed every week. New students need to tell their tutor their wordpress address, so it gets added to the collective list.)
– (sound file hosting)
– (video file hosting)
– (image hosting)
– (micro-messaging service)

Most design Studio members used those accounts last semester. In 2011, we will also be paying special attention to these two services:

– (social bookmarking service: weekly bookmark additions needed.)
Step 2: Please install the Firefox browser toolbar extension for delicious on both your home and lab computer.)

(delicious video overviewthree delicious tutorials)

– google reader (RSS reader for subscribing to blog feeds, and monitoring news and ideas from within class and from wider music networks.) (extensive tutorial for using google reader)

Activating Your RMIT Server Space
To activate your RMIT web server space, please visit this site and follow the steps carefully. We might do this as a group step by step, just to ensure we don’t get any problems that necessitate I.T. department fixes.

Once completed, this will generate a web address for you, and your student ID, in the format of :   (enter your student number instead of the example provided)

Try entering that address into your browser to check the activation process worked. If the process worked, you will be viewing a simple webpage (rather than an error message), and this means you now have your own dedicated part of the RMT web server, where you can store webpages and files for others to view on the web.

If time permits on week one, we will replace the above generic webpage – by creating a simple HTML page which includes a sentence about you, and a link to your blog. [ see w3 schools on adding links ]. We will write this page using Text Edit (press shift + command + T to make the file plain text and without any formatting), and will then save the file as “index.html”. Then we will upload this newly created webpage to the RMIT server using the Fetch or FUGU FTP software.

Homework for week one:
Read the readings from week one *and* week two by next week, and write a simple blog post about each.
Finalise your creative project idea by next week, and bring this to class for our first HTML lesson.
Subscribe to 3 research related blogs in your google reader. Bookmark these sites using delicious and tag them ‘rmitmusic’ ( along with any other tags you find useful).

For Those Wanting to Get Ahead:
Explore the semester’s reading list.
Run through the exercises about how to use HTML ( ) //and explore books about HTML at RMIT library.

Week 9: Web Context for Video

September 20, 2010

What is the context for publishing video online? Concretely, we can look at our final projects as an example. What constraints / components / parameters / limitations do we have for the final web project?

Some example projects that demonstrate interesting digital media storytelling techniques and possibilities:
You Suck At Photoshop tutorials ( Screencasting / tutorials

Miranda July’s website for promoting a new book of hers in 2007. ( How can text and image work together? )

Scott Mccloud’s webpages as infinite canvas.

Patrick Farley’s Spiders ( via wayback machine, a service from that allows re-viewing of old versions of webpages stored on their server ).

Farley has recently relaunched his site using the crowdfunding source, kickstarter. ( See for a similar service in Australia )

How to choose a typeface / font.

Rap News from Melbourne.. “the news source for the discerning viewer, delivering a bulletin to restore your faith in the fourth estate; make you nod your head to the beat, even as you shake it in disbelief.

Research Task:
1. Browse this collection of interactive narratives,
and find 3 different sites that showcase some digital storytelling and design ideas that could be adopted for your final project ( or a future project ).

2. What is diegetic sound and non-diegetic sound? How might this relate to web based video?

For today’s tasks, you will need to install the free ‘measure it‘ web app for Firefox, Chrome or Safari, which allows easy pixel measurement of any portion of a website.

A. Create new page for final project in wordpress ( instructions )
– Set to private (click edit, next to Visibility / Public ), so you can keep developing your project.
– Make a note of the pixel dimensions within your new page
– Note also, the pixel dimensions for your blog’s sidebar

B. Create a banner image for your experimental video.
– Measure the dimensions needed for a banner image.
– Make image in Photoshop, then ‘save for web’.
– Publish your banner image and video in a blog post, or within a special page.

( See Instructions on publishing vimeo clips, including capacity to change video width and height.
Note 1 : When pasting in Vimeo’s suggested ‘video embedding code’ into a wordpress post, be sure to have selected your HTML tab in the wordpress dashboard, not the visual tab. )
Note 2: Vimeo’s basic uploader seems to work more reliably at RMIT, than vimeo’s flash uploader.)

C. Create an image map for use in
1. Upload an image to flickr or wordpress, so that it has a URL – eg
2. Enter your image URL at:
3. Draw the areas you wish to have as links, and write the related URLs.
4. When finished adding all links, click ‘get your code’
5. Click the HTML Code tab, and copy all the code from:

<img id= … until and including </map>

6. Inside your wordpress blog post – click HTML editing mode ( rather than visual), and paste your code in here.
7. Click ‘Visual’ editing mode to see what it looks like, then press publish, and mouse over link areas to test.

D. Create an image for your sidebar
(This can be for your project, for linking to other accounts / sites, or for anything randomly of interest to you.. )
– Measure the dimensions needed for a sidebar image.
– Make image in Photoshop, then ‘save for web’.
– Upload your image to generate a URL for it.
– In WordPress ‘Appearance’, drag your image widget onto your sidebar, and enter relevant image details.
( If you wish to use an image-mapped image in your sidebar, use the text widget, and paste your image map html code in there. )

1. Finish and publish video experiment from last week. Publishing on your blog means everyone can start to easily see each other’s remixes here.

2. Set up Final Video Project
– Open new project
– Change project settings to these settings
– place your 1 minute soundscape on the timeline
– Save your project
– bring in the ABC POOL clips you are using, to the media bin
– bring in any of your own footage, to the media bin
– Think about thumbnails you wish to represent your video at vimeo and POOL.
( Generate stills from a video through export settings, or screen capture ( option+command+4))

FCP Project and Export Settings for Lost Places

September 7, 2010

Have a look at the Project Settings (PDF)and Export Settings (PDF), and set up your Lost Places projects this way.

There are different settings dependent on what type of video camera you will be using:
– either a camera that records interlaced video ( eg a mini-DV camera )
– or a camera that records progressive footage ( eg a DSLR. )
Check your manual or settings to see what type of footage you are recording, and will be using within FCP.

To understand more about problems with interlacing, read, or this Creative Cow article.

Introduction to Final Cut Pro

September 6, 2010
For the next three weeks we will be exploring Final Cut Pro as a tool for editing video. In parallel to learning it’s technical functions, we will also be touching on other video production ideas:
– what are some of the basic shots in a vocabulary of video?
– how does editing work?
– what is the context of online video publishing today? ( what is possible?)
And today:

– history and background to video editing
– FCP media management
– setting up projects in FCP
– setting up / personalising your FCP workspace
– understanding the interface in FCP
– Bringing assets ( media files ) into FCP
– Basic editing in FCP

This week’s task:

Find 3 potential videos from POOL for use in your final project.
Download these to your desktop and import into FCP.
Explore editing a sequence together, using some of the shots referenced in this video.

Week 8:
– Using text and subtitles
– Transitions between shots
– effects
– animating and compositing still images ( with still images and video )
– understanding layers

Week 9
– Compression and exporting for the web
– Video context on the web
– Utilising social media for research and production

Soundscape Submissions This Week ( Updated )

August 23, 2010

A few people have asked about the soundscape submission this week, so let’s break it down into point form. Here’s what you need to submit:

Email your tutor the URL of a blog post ( ie – not just )

Within this blog post, there should be an embedded soundscape, using the soundcloud player. ( How to embed the soundcloud player in wordpress ) This means you need to upload your soundscape to soundcloud. Remember to specify your work as creative commons licence when uploading to Soundcloud. ( See the Soundcloud CC search engine and other CC news ). You should also use at least 3 tags to describe your soundscape, when uploading to soundcloud.

[[ Update: Soundcloud seems to be undergoing some issues this week. If experiencing upload issues, they have some recommendations to try, such as their desktop based uploaders (Note: software can be installed on the RMIT machines, if you install it on the desktop… students don’t have admin permission to install software within the applications folder). And for what it’s worth – I just uploaded a track successfully from home, using their cloudpost app. ]]

List the authors of any Creative Commons sounds used – at your POOL, soundcloud and blog posts. This honours the ‘attribution’ aspect of the CC licence. Ideally you should also link back to where those sounds were found.

Your blog post should contain a link to the POOL page where your soundscape is uploaded. The POOL page for your soundscape should include some explanatory text, and a photo or graphic, and your soundscape should be submitted to both the Lost Places and the RMIT_Music_Industry_DesignStudio2010 groups. You should also include at least 3 tags that describe your soundscape. ( The POOL help page for uploading)

And finally, your blog post should contain a link to your 1000 word essay ( which can be published as a separate blog page ). ( Explore the library for books on essay writing help, or try these online tutorials for sharpening your essay. RMIT Referencing Guides. refresher? )

– At the bottom of your email, paste in the text from this Statement of authorship form, which states you are not plagiarising, or breaking copyright.