annotate aotc2.php @ 9:0bfd4457b28f first version blogged on matthiasmauch.net

Removed tag help

    <style>
#mmcontainer { position: relative; width: 370px; margin:0 auto; background: #fff; height: 500px; font-size:1em; }
#layer00, #layer01, #layer02, #layer03, #layer04, #layer05, #layer06, #layer07, #layer08,#layer09, #layer10, #layer11, #layer12 { position: absolute; width: 370px; height: 370px; background: transparent;}
#layer00 {background: url(./aotc2_files/spiderplot.png) no-repeat;}
#layer01 { background: url(./aotc2_files/spiderplotTheSexPistols.png) no-repeat;}
#layer02 { background: url(./aotc2_files/spiderplotTheStranglers.png) no-repeat;}
#layer03 { background: url(./aotc2_files/spiderplotTheJam.png) no-repeat;}
#layer04 { background: url(./aotc2_files/spiderplotBuzzcocks.png) no-repeat;}
#layer05 { background: url(./aotc2_files/spiderplotStatusQuo.png) no-repeat;}
#layer06 { background: url(./aotc2_files/spiderplotTheClash.png) no-repeat;}
#layer07 { background: url(./aotc2_files/spiderplotGladysKnightAndThePips.png) no-repeat;}
#layer08 { background: url(./aotc2_files/spiderplotHotChocolate.png) no-repeat;}
#layer09 { background: url(./aotc2_files/spiderplotEltonJohn.png) no-repeat;}
#layer10 { background: url(./aotc2_files/spiderplotQueen.png) no-repeat;}
#layer11 { background: url(./aotc2_files/spiderplotKateBush.png) no-repeat;}
#layer12 { background: url(./aotc2_files/spiderplotElkieBrooks.png) no-repeat;}
.hidden { display: none; }
.mmemph { font-style: italic; }
</style>

<h2>Clash of Attitudes</h2>

<h5><abbr>Thursday, 23 June 2011</abbr></h5>

<p class="mmemph">As promised last week our resident Research Fellow Matthias has been hard at work data-mining our music recordings for this new instalment of our Anatomy of the UK Charts series...</p>

<p>Not everyone is into dancing. As I showed you in last week's post our audio analysis algorithms can trace the rise of disco after 1974, but around that same time a colourful range of other new styles emerged, including hard rock, glam and art rock... and then there was that other genre: punk, the attitude-laden antidote to "established" music.</p>

<p>While we haven't actually come up with a measure of <i>attitude</i> in music, the fact that punk was the anti-establishment, non-musician's music made it relatively easy to track down... </p>

<h3>The Democratisaton of Making Music</h3>
<p class="mmemph">"This is a chord. This is another. This is a third. Now form a band."</p>
<p>According to the Guardian's <a href="http://www.guardian.co.uk/music/series/a-history-of-modern-music">History of Modern Music</a> these legendary instructions were first printed in the punk zine "Sideburns" in 1977. They are famous because they summarise the anyone-can-play attitude of early punk - the democratisation of making music. Well, if there's any truth in that, looking for harmonically simple music without fancy changes in sound colour should get us straight to punk. Will it?</p>

<p>We have a variety of signal processing algorithms that take an MP3 file, extract musical features from it, and then measure how much these features change over different time scales, from note to note, chord to chord, phrase to phrase or even between sections of a song. Looking at these rates of change can give us a good measure of musical complexity.</p>

<p>To see how complex the harmony of a song is, for example, we first extract "<a href="http://isophonics.net/nnls-chroma">chroma</a>" features. Chroma describes which notes are sounding at any time in the song. Then we look at how much the chroma changes over a time scale of around 3 seconds, which is the length that a chord is typically sustained. Using this method, lots of chord changes will lead to a high value for harmonic complexity.</p>

<p>Likewise for sound colour, usually called "<a href="http://en.wikipedia.org/wiki/Timbre">timbre</a>" in scientific circles, we start by computing a particular spectral feature that is heavily used in speech recognition: <a href="http://en.wikipedia.org/wiki/Mel-frequency_cepstrum">Mel-frequency cepstral coefficients</a> (MFCCs). The rate of change of these MFCCs at a time scale of about a second should get us a measure of timbral complexity. If the instructions from the zine are accurate then punk shouldn't have much harmonic or timbral complexity.</p>

<p>In the figure below we have plotted timbre complexity against harmonic complexity. The grey dots show the positions of all songs in our charts database from 1975 to 1980, and we have overlayed some colourful stars, each representing an artist with more than 5 hits. We selected the six least and the six most "complex" artists as ranked by the sum of the squares of our two complexity measures. The centre-point of each star is the median average of the artist's songs. You can select your favourite combination of artists from the list below. The play buttons start playback of the track that's "most typical" of the corresponding artist, i.e. that which is closest to the centre of the star. <em>[edit: sorry, Last.fm have removed many of the examples]</em></p>

<div id="mmcontainer">
<div id="controls">
<form id="form01" name="form01">
<div>
    <div style="float:left;">
		<b>No Future!</b><br>
		<input id="chb01" name="chb01" type="checkbox" checked="">
		<label for="chb01" id="label01">The Sex Pistols</label> <a href="http://play.last.fm/preview/41266.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb02" name="chb02" type="checkbox" checked="">
		<label for="chb02" id="label02">The Stranglers</label> <a href="http://play.last.fm/preview/110438932.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb03" name="chb03" type="checkbox" checked="">
		<label for="chb03" id="label03">The Jam</label> <a href="http://play.last.fm/preview/118333062.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb04" name="chb04" type="checkbox" checked="">
		<label for="chb04" id="label04">Buzzcocks</label> <a href="http://play.last.fm/preview/111607925.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb05" name="chb05" type="checkbox" checked="">
		<label for="chb05" id="label05">Status Quo</label> <a href="http://play.last.fm/preview/117066062.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb06" name="chb06" type="checkbox" checked="">
		<label for="chb06" id="label06">The Clash</label> <a href="http://play.last.fm/preview/116822484.mp3" style="text-decoration: none;">&nbsp;</a>
	</div>
	<div>
		<b>Let them eat cake!</b><br>
		<input id="chb07" name="chb07" type="checkbox" checked="">
		<label for="chb07" id="label07">Gladys Knight and the Pips</label> <a href="http://play.last.fm/preview/3021253.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb08" name="chb08" type="checkbox" checked="">
		<label for="chb08" id="label08">Hot Chocolate</label> <a href="http://play.last.fm/preview/3600348.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb09" name="chb09" type="checkbox" checked="">
		<label for="chb09" id="label09">Elton John</label> <a href="http://play.last.fm/preview/121473254.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb10" name="chb10" type="checkbox" checked="">
		<label for="chb10" id="label10">Queen</label> <a href="http://play.last.fm/preview/124139701.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb11" name="chb11" type="checkbox" checked="">
		<label for="chb11" id="label11">Kate Bush</label> <a href="http://play.last.fm/preview/124162424.mp3" style="text-decoration: none;">&nbsp;</a><br>
		<input id="chb12" name="chb12" type="checkbox" checked="">
		<label for="chb12" id="label12">Elkie Brooks <a href="http://play.last.fm/preview/112667005.mp3" style="text-decoration: none;">&nbsp;</a></label>
	</div>
	<div style="clear: both;"></div>
</div>
</form>
	</div>
       <div id="graph_ma" style="position: relative;">
		<div id="layer00">&nbsp;</div>
		<div id="layer01" class="hidden">&nbsp;</div>
		<div id="layer02" class="hidden">&nbsp;</div>
		<div id="layer03" class="">&nbsp;</div>
		<div id="layer04" class="hidden">&nbsp;</div>
		<div id="layer05" class="hidden">&nbsp;</div>
		<div id="layer06" class="hidden">&nbsp;</div>
		<div id="layer07" class="hidden">&nbsp;</div>
		<div id="layer08" class="hidden">&nbsp;</div>
		<div id="layer09" class="">&nbsp;</div>
		<div id="layer10" class="hidden">&nbsp;</div>
		<div id="layer11" class="hidden">&nbsp;</div>
		<div id="layer12" class="hidden">&nbsp;</div>
	</div>
</div>

<p>We find it fascinating that - as we would expect - all the famous punk bands such as The Sex Pistols, The Jam, The Stranglers, Buzzcocks and The Clash really do huddle together in the bottom left half of the chart; they really are the least complex of the lot. On the other end of the spectrum we have theatrical and arty performers such as Kate Bush and Queen.</p>

<p>In real life, there certainly was a clash of attitudes. When The Sex Pistols' Sid Vicious met Queen's front man he's reported to have asked: "Ah, Freddie Mercury, still bringing ballet to the masses are you?" to which Mercury replied "Oh yes, Mr Ferocious, dear, we are doing our best." While we can choose whether or not to believe that Mercury subsequently kicked Vicious out of the dressing room, we can clearly see that, in musical terms, punks and brainy rockers made sure they stayed clear of each other's territory.</p>

<h3>Not Just Punk</h3>
<p>Some rock bands not normally associated with punk seem to dispute the uncomplicated space of the 'real' punk rock bands: in the figure above, the down-to-earth Status Quo show up in an area quite close to the Buzzcocks. What's more if we rank not only artists with more than 5 hits but all with more than 3, it becomes clear that Status Quo are not the only rockers who have slipped in. Hard rock band Saxon leads the pack.</p>
<div>
<div style="float: left; padding: 5px;">
1. Saxon<br>
2. The Sex Pistols<br>
3. Black Sabbath<br>
4. UK Subs<br>
5. Cockney Rejects<br>
6. Motörhead<br>
7. Generation X
</div>
<div style="padding: 5px;">
8. The Stranglers<br>
9. The Jam<br>
10. Secret Affair<br>
11. Buzzcocks<br>
12. Status Quo<br>
13. Dave Edmunds<br>
14. The Dickies<br>
</div>
</div>
<p>... the full list is <a href="./aotc2_files/artist_complexity.txt">here</a>. </p>

<p>So while our measures of complexity do have a negative correlation with punk, they also correlate with other music. It seems as if we still have to develop that attitude detector in order to precisely nail down punk music. What we can quite confidently say though is that the second half of the 70s favoured "simple" music, as shown in the figure below.</p>

<p>Among all 15,000 chart tracks, we selected those 20% with the lowest squared sum of our two complexity measures and plotted what percentage of the charts they occupy in each year.</p>

<img src="./aotc2_files/141.png">

<p>Between 1963 and 1975 the percentage of "simple songs" in the charts doesn't deviate much from around 12%, then there's a dip in 1976, followed by a steep rise. That rise coincides with what can be called the birth of punk: The Sex Pistols' gig at the Lesser Free Trade Hall, Manchester. Only three years later, in 1979, the simplicity trend peaks at over 20%. We can only guess why the proportion then sinks again - does  commercial punk not work, maybe? Today's punk purists seem to regard as real punk only stuff that happened before 1979 (punkfm.co.uk writes: "We ONLY play Punk Rock from 1976 to 1979.").</p>

<p>Further on in our series we'll see that punk was not at all a passing fad, as we uncover the re-birth of simple music in the late 80s, on a scale that makes the 70s punk wave seem a mere ripple. Before that we'll dissect the early eighties in next week's instalment: "The Curse of the Drum Machine".</p>

<div class="mmemph">

<h3>References and More Info</h3>
<p>You can calculate your own Mel-frequency cepstral coefficients with the <a href="http://www.vamp-plugins.org/plugin-doc/qm-vamp-plugins.html">Vamp plugin software</a> developed at Queen Mary, University of London. A plugin for chroma is available <a href="http://isophonics.net/nnls-chroma">here</a>, or you can read <a href="http://ismir2010.ismir.net/proceedings/ismir2010-25.pdf">my paper</a> about it. Unfortunately, the complexity measure is not publicly available yet, but we will make an update once it is.</p>
<p>The info on punk history was mainly taken from the Guardian's <a href="http://www.guardian.co.uk/music/series/a-history-of-modern-music">History of Modern Music</a>. The "Punk Girl" is a Creative Commons-licensed image from <a href="http://www.vectorportal.com/">Vectorportal</a>.</p>
<p>Data cheat: we did not have data for all singles of The Sex Pistols from 1975 to 1980 and therefore used all their songs (irrespective of chart date).</p>
</div>
<script type="text/javascript" async="" src="./aotc2_files/ga.js"></script><script src="./aotc2_files/jquery.min.js"></script>
<script type="text/javascript">$(document).ready( function() {
    // alert('js activated');
	$('hidden').hide();
	
    $('#chb01').attr('checked', false);
    $('#layer01').addClass('hidden');
    
    $('#chb02').attr('checked', false);
    $('#layer02').addClass('hidden');
    
    $('#chb03').attr('checked', true);
    $('#layer03').addClass('hidden');
    $('#layer03').toggleClass('hidden');
    
    $('#chb04').attr('checked', false);
    $('#layer04').addClass('hidden');
    
    $('#chb05').attr('checked', false);
    $('#layer05').addClass('hidden');
    
    $('#chb06').attr('checked', false);
    $('#layer06').addClass('hidden');
    
    $('#chb07').attr('checked', false);
    $('#layer07').addClass('hidden');
    
    $('#chb08').attr('checked', false);
    $('#layer08').addClass('hidden');
    
    $('#chb09').attr('checked', true);
    $('#layer09').addClass('hidden');
    $('#layer09').toggleClass('hidden');
    
    $('#chb10').attr('checked', false);
    $('#layer10').addClass('hidden');
    
    $('#chb11').attr('checked', false);
    $('#layer11').addClass('hidden');
    
    $('#chb12').attr('checked', false);
    $('#layer12').addClass('hidden');
	
	$('#chb01').change( function() {
		$('#layer01').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb02').change( function() {
		$('#layer02').toggleClass('hidden');
	});
	$('#chb03').change( function() {
		$('#layer03').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb04').change( function() {
		$('#layer04').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb05').change( function() {
		$('#layer05').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb06').change( function() {
		$('#layer06').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb07').change( function() {
		$('#layer07').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb08').change( function() {
		$('#layer08').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb09').change( function() {
		$('#layer09').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb10').change( function() {
		$('#layer10').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb11').change( function() {
		$('#layer11').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	$('#chb12').change( function() {
		$('#layer12').toggleClass('hidden');
		//alert ('chb01 toggled');
	});
	
});</script>

<!--
<script type="text/javascript">var YMPParams = { autoplay:false, displaystate:3 };</script>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 
-->