diff --git a/.gitignore b/.gitignore index f0da397..dd62e6c 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ fonts/*.map style.css *.swp /.bundle +/files/einhorn /vendor/bundle diff --git a/brushed-metal.dark.svg b/brushed-metal.dark.svg index 964565f..3ca9556 100644 --- a/brushed-metal.dark.svg +++ b/brushed-metal.dark.svg @@ -24,11 +24,11 @@ inkscape:collect="always" id="linearGradient5938"> @@ -37,11 +37,11 @@ id="linearGradient4468" osb:paint="gradient"> diff --git a/files/LastFM.png b/files/LastFM.png old mode 100755 new mode 100644 diff --git a/files/blunt_chromagram.png b/files/blunt_chromagram.png old mode 100755 new mode 100644 diff --git a/files/blunt_dyndist.png b/files/blunt_dyndist.png old mode 100755 new mode 100644 diff --git a/files/blunt_envelope.png b/files/blunt_envelope.png old mode 100755 new mode 100644 diff --git a/files/confusionMatrix_simpleTree_genreAgg2.png b/files/confusionMatrix_simpleTree_genreAgg2.png old mode 100755 new mode 100644 diff --git a/files/decap_chromagram.png b/files/decap_chromagram.png old mode 100755 new mode 100644 diff --git a/files/decap_dyndist.png b/files/decap_dyndist.png old mode 100755 new mode 100644 diff --git a/files/decap_envelope.png b/files/decap_envelope.png old mode 100755 new mode 100644 diff --git a/files/diagramm_vorgang_english.png b/files/diagramm_vorgang_english.png old mode 100755 new mode 100644 diff --git a/files/hammer-306313_960_720.png b/files/hammer-306313_960_720.png new file mode 100644 index 0000000..698751e Binary files /dev/null and b/files/hammer-306313_960_720.png differ diff --git a/files/predictionTree_genreAgg2.png b/files/predictionTree_genreAgg2.png old mode 100755 new mode 100644 diff --git a/files/predictionTree_genreAgg2.svg b/files/predictionTree_genreAgg2.svg new file mode 100644 index 0000000..73f90a0 --- /dev/null +++ b/files/predictionTree_genreAgg2.svg @@ -0,0 +1,94 @@ + + + + + + + + darkness + + + + + + + + < 3.573 + + + + + + + + + + + >= 3.573 + + + + + hardness + + + + + + hardness + + + + + + + + < 3.294 + + + + + + + >= 3.294 + + + + + + + + + + + < 4.632 + + + >= 4.632 + + + + + Pop + + + + + + Techno + + + + + + Gothic + + + + + + Metal + + + + diff --git a/files/scatter_darkness_model8.png b/files/scatter_darkness_model8.png old mode 100755 new mode 100644 diff --git a/files/scatter_hard_dark_dashedline_2017-09-05.png b/files/scatter_hard_dark_dashedline_2017-09-05.png old mode 100755 new mode 100644 diff --git a/files/scatter_hardness_model5.png b/files/scatter_hardness_model5.png old mode 100755 new mode 100644 diff --git a/files/scatter_spectral_centroid_essentia_darkness.png b/files/scatter_spectral_centroid_essentia_darkness.png old mode 100755 new mode 100644 diff --git a/files/sonagramm_blunt_log.png b/files/sonagramm_blunt_log.png old mode 100755 new mode 100644 diff --git a/files/sonagramm_decap_log.png b/files/sonagramm_decap_log.png old mode 100755 new mode 100644 diff --git a/files/thor-hammer3.png b/files/thor-hammer3.png new file mode 100644 index 0000000..5e69a26 Binary files /dev/null and b/files/thor-hammer3.png differ diff --git a/files/univie_logo.png b/files/univie_logo.png old mode 100755 new mode 100644 diff --git a/files/violin_keyEdma_darkMean_blaugelb.png b/files/violin_keyEdma_darkMean_blaugelb.png old mode 100755 new mode 100644 diff --git a/index.html.haml b/index.html.haml index a5e96be..df584f2 100644 --- a/index.html.haml +++ b/index.html.haml @@ -19,10 +19,10 @@ %head -#%meta(charset="utf-8") %title Decoding the sound of 'hardness' and 'darkness' as perceptual dimensions of music - -#%link(rel="stylesheet" href="fonts/Roboto.css") - -#%link(rel="stylesheet" href="fonts/RobotoSlab.css") + %link(rel="stylesheet" href="fonts/Roboto.css") + %link(rel="stylesheet" href="fonts/RobotoSlab.css") -#%link(rel="stylesheet" href="fonts/PT_Mono.css") - -#%link(rel="stylesheet" href="fonts/PT_Sans.css") + %link(rel="stylesheet" href="fonts/PT_Sans.css") -#%link(rel="stylesheet" href="fonts/Vollkorn.css") -#%link(rel="stylesheet" href="fonts/Asset.css") -#%link(rel="stylesheet" href="fonts/WithinDestruction.css") @@ -39,8 +39,8 @@ %body %header(style="") %figure.logos(style="margin-top:0.3cm")<> - %img#tagungs-logo(style="float:right" src="files/icmpc15_logo.png") - %img#uni-logo(src="files/Uni_Logo_2016_ausschnitt.gif") + %img#uni-logo(src="files/univie_logo.png") + %img#tagungs-logo(style="float:right;height:i3.5em" src="files/icmpc15_logo.png") -#%div(style="font-size:0.8em;margin-top:1.31cm") 44. Jahrestagung für Akustik %br<> @@ -82,56 +82,85 @@ Considering Bonferroni correction, 65 significant feature correlations were found for the concept of hardness. - The characterizing attributes of hardness include high - tempo and sound density, less focus on clear melodic lines than - noise-like sounds and especially the occurrence of strong percussive + The characterizing attributes of hardness include **high + tempo** and **sound density**, less focus on clear melodic lines than + **noise-like** sounds and especially the occurrence of strong **percussive** components. %ol %li - percussive energy / rhythmic density - %figure - %img.fifty(src="files/sonagramm_blunt_log.png") - %img.fifty(src="files/sonagramm_decap_log.png") + %p percussive energy / rhythmic density + %figure.pfifty + %figcaption Spectrogram James Blunt - You're Beautiful + %img(src="files/sonagramm_blunt_log.png") + %figure.pfifty + %figcaption Spectrogram Decapitated - The Fury + %img(src="files/sonagramm_decap_log.png") + .clear %li - dynamic distribution - %figure - %img.fifty(src="files/blunt_envelope.png") - %img.fifty(src="files/decap_envelope.png") - %figure - %img.fifty(src="files/blunt_dyndist.png") - %img.fifty(src="files/decap_dyndist.png") + %p dynamic distribution + %figure.pfifty + %figcaption Dynamic Envelope James Blunt - You're Beautiful + %img(src="files/blunt_envelope.png") + %figure.pfifty + %figcaption Dynamic Envelope Decapitated - The Fury + %img(src="files/decap_envelope.png") + -#%figure.pfifty + %figcaption Dynamic distribution James Blunt - You're Beautiful + %img(src="files/blunt_dyndist.png") + -#%figure.pfifty + %figcaption Dynamic distribution Decapitated - The Fury + %img(src="files/decap_dyndist.png") + .clear %li - melodic content / harmonic entropy - %figure - %img.fifty(src="files/blunt_chromagram.png") - %img.fifty(src="files/decap_chromagram.png") - :markdown - Model - ----- + %p melodic content / harmonic entropy + %figure.pfifty + %figcaption Chromagramm James Blunt - You're Beautiful + %img(src="files/blunt_chromagram.png") + %figure.pfifty + %figcaption Chromagram Decapitated - The Fury + %img(src="files/decap_chromagram.png") + .clear - Sequential feature selection - - * set of 5 features - * predictive linear regression model - - RMSE | 0.64 - R-Squared | 0.80 - MSE | 0.40 - MAE | 0.49 - r | 0.900 - %figure - %img(src="scatter_hardness_model5.png") + -#%h2(style="margin-top:1.5em") Model + %h2(style="margin-top:40px") Model + %figure.fifty.left(style="width:67%;text-align:center") + %img(src="files/scatter_hardness_model5.png") + %div(style="display:inline-block") + :markdown + RMSE | R2 | MSE | MAE | r + 0.64 | 0.80 | 0.40 | 0.49 | 0.90 + %p(style="text-align:center")<> + Sequential feature selection + %br<> + ↓ + %br<> + set of 5 features + %br<> + ↓ + %br<> + predictive linear regression model + -# + RMSE | 0.64 + R2 | 0.80 + MSE | 0.40 + MAE | 0.49 + r | 0.90 + .clear :markdown Rater Agreement --------------- - Intraclass Correlation Coefficient (Two-Way Model, Consistency): 0.653 + Intraclass Correlation Coefficient (Two-Way Model, Consistency): 0.653 .clear #column1_2 - -#%section#aims + %section#aims %h1 Aims %p + The semantic concepts of hardness and darkness in music are analyzed + in terms of their corresponding sound attributes. Based on listening test data, + predictive models for both dimensions are created and compared. + -#%p Based on computationally obtainable signal features, the creation of models for the perceptual concepts of hardness and darkness in music is aimed for. Furthermore it shall be @@ -140,7 +169,7 @@ these dimensions. %section#method %h1 Method - %figure.right(style="width:50%") + %figure.right(style="width:12%;height:2em;margin: 0.5em 0.5em 0.5em 1.5em") %img(src="files/LastFM.png") %p Based on last.fm listener statistics, 150 pieces of music were selected @@ -151,7 +180,8 @@ These ratings served as a ground truth for examining the two concepts using a machine learning approach: - %figure.right(style="width:50%") + %figure.right + //(style="width:50%") %img(src="files/diagramm_vorgang_english.png") %p Taking into account 230 features describing spectral distribution, @@ -159,45 +189,25 @@ investigated and combined into models. Predictors were trained using five-fold cross-validation. .clear - %h2 Data + + -#.blockarrow(style="display:block;width:100%;font-size:6em;margin:0") 🠳 + %section#data(style="margin-top:2em") + %h1 Data %figure %img(src="files/scatter_hard_dark_dashedline_2017-09-05.png") + .blockarrow(style="top:-3.8rem;left:0;right:0") 🡇 + .blockarrow(style="bottom:9rem;left:-3rem") 🡄 + .blockarrow(style="bottom:9rem;right:-3rem") 🡆 .clear - %section#further_resultes_conclusion - %h1 Further Results & Conclusions - %figure.fifty - %img.right(src="files/predictionTree_genreAgg2.png") - %img.right(src="files/confusionMatrix_simpleTree_genreAgg2.png") - :markdown - Comparison - ---------- - - When comparing darkness and hardness, the results - indicate that the latter concept can be more efficiently described - and modeled by specific sound attributes: - - * The consistency between ratings given by different raters is - higher for hardness (see Intraclass Correlation - Coefficients) - * For the hardness dimension, a model can be based on a more - compact set of features and at the same time leads to a better - prediction rate - - Further application - ------------------- - - Although a considerable linear relation - (r = 0.65, p < 0.01) is present between - the two dimensions within the studied dataset, the concepts prove to - be useful criteria for distinguishing music examples from different - genres. - - E.g. a simple tree can be constructed for classification into broad - genre categories (Pop, Techno, Metal, Gothic) with an accuracy of - 74%. + %div(style="margin-top:1em;margin-bottom:-1em") + %div(style="width:40%;display:inline-block;float:left;text-align:center") + -#%img(src="files/hammer-306313_960_720.png" style="height:5em") + %img(src="files/thor-hammer3.png" style="height:5em") + .blockarrow(style="display:block;width:100%;font-size:7.5rem;margin:0;margin-top:-1.3rem") 🡇 + %div(style="width:40%;display:inline-block;float:right;text-align:center") + %img(src="files/Candle.png" style="height:5em") .clear - #column1_3 %section#darkness %h1 Darkness @@ -225,92 +235,144 @@ correlations were found for the darkness ratings. While a suspected negative correlation with **timbral - brightness** cannot be confirmed, darkness appears to + brightness** can **not** be confirmed, darkness appears to be associated with a high **spectral complexity** and harmonic traits like **major or minor mode**. - %figure.fifty + %figure.fifty.left %img(src="files/scatter_spectral_centroid_essentia_darkness.png") - :markdown - Correlations between darkness rating and measures for brightness: + %div(style="height:1em") + %p No evidence for negative correlations between darkness rating and measures for brightness: - Feature | r | p - -----------------------|--------|---------- - Spectral centroid | 0.3340 | <0.01 - High frequency content | 0.1526 | 0.0631 - %figure.fifty + %div(style="text-align:center") + %div(style="display:inline-block") + :markdown + Feature | r | p + -----------------------|-------|---------- + Spectral centroid | 0.334 | <0.01 + High frequency content | 0.153 | 0.063 + %figure.fifty(style="margin-top:0.4em") %img(src="files/violin_keyEdma_darkMean_blaugelb.png") %p Musical excerpts in minor mode were significantly rated as harder than those in major mode. (p < 0.01 according to t-test) %h2 Model - %figure.fifty + %figure.fifty.right(style="width:67%;text-align:center;margin-bottom:3px") %img(src="files/scatter_darkness_model8.png") - :markdown - Sequential feature selection: - - * combination of 8 features - * predictive linear regression model - - RMSE| 0.81 - R-Squared| 0.60 - MSE| 0.65 - MAE| 0.64 - r| 0.7978 + %div(style="display:inline-block") + :markdown + RMSE | R2 | MSE | MAE | r + 0.81 | 0.60 | 0.65 | 0.64 | 0.798 + %p(style="text-align:center")<> + Sequential feature selection + %br<> + ↓ + %br<> + set of 8 features + %br<> + ↓ + %br<> + predictive linear regression model + -# + RMSE | 0.81 + R2 | 0.60 + MSE | 0.65 + MAE | 0.64 + r | 0.798 + .clear :markdown Rater Agreement --------------- - Intraclass Correlation Coefficient (Two-Way Model, Consistency): - **0.498** + Intraclass Correlation Coefficient (Two-Way Model, Consistency): + 0.498 .clear - %footer - %section#conclusion - :markdown - Conclusion - ========== + %footer(style="padding-top:0.2em") + %section#further_resultes_conclusion(style="padding-bottom:0.20em") + %h1 Further Results & Conclusions + %div + #column2_1 + :markdown + Comparison + ---------- - Hardness and darkness constitute perceptually relevant - dimensions for a high-level description of music. By decoding the - sound characteristics associated with these concepts, they can be - used for analyzing and indexing music collections and e.g. in a - decision tree for automatic genre prediction. + When comparing darkness and hardness, the results + indicate that the latter concept can be more efficiently described + and modeled by specific sound attributes: - %section#references - -#(style="width:44.5%;display:inline-block;float:right") - %h1 References - %ul.literatur - %li - %span.author Czedik-Eysenberg, I., Knauf, D., & Reuter, C. - %span.year 2017 - %span.title Hardness as a semantic audio descriptor for music using automatic feature extraction - %span.herausgeber Gesellschaft für Informatik, Bonn - %span.link= link 'https://doi.org/10.18420/in2017_06' - %li - %span.author Grey, J.M. - %span.year 1975 - %span.title An Exploration of Musical Timbre - %span.herausgeber Stanford University, CCRMA Report No.STAN-M-2 - %li - %span.author Li,T., Ogihara,M. - %span.year 2003 - %span.title Detecting emotion in music - %nobr - %span.herausgeber 4th ISMIR Washington & Baltimore - %span.pages 239-240 - %li - %span.author Huron, D. - %span.year 2008 - %span.title A comparison of average pitch height and interval size in major-and minor-key themes - %nobr - %span.herausgeber Empirical Musicology Review, 3 - %span.pages 59-63 - %li - %span.author Siddiq,S. et al. - %span.year 2014 - %span.title Kein Raum für Klangfarben - Timbre Spaces im Vergleich - %nobr - %span.herausgeber 40. DAGA - %span.pages 56-57 - .clear + * The consistency between ratings given by different raters is + higher for hardness (see Intraclass Correlation + Coefficients) + * For the hardness dimension, a model can be based on a more + compact set of features and at the same time leads to a better + prediction rate + + #column2_2 + :markdown + Further application + ------------------- + + %figure.fifty(style="width:37%") + %img(src="files/confusionMatrix_simpleTree_genreAgg2.png") + :markdown + Although a considerable linear relation + (r = 0.65, p < 0.01) is present between + the two dimensions within the studied dataset, the concepts prove to + be useful criteria for distinguishing music examples from different + genres. + %figure.quarterly(style="clear:initial;width:28%") + %img(src="files/predictionTree_genreAgg2.svg") + %p + E.g. a simple tree can be constructed for classification into broad + genre categories (Pop, Techno, Metal, Gothic) with an accuracy of + 74 %. + + #column2_3 + :markdown + Conclusion + ---------- + + Hardness and darkness constitute perceptually relevant + dimensions for a high-level description of music. By decoding the + sound characteristics associated with these concepts, they can be + used for analyzing and indexing music collections and e.g. in a + decision tree for automatic genre prediction. + + %section#references + -#(style="width:44.5%;display:inline-block;float:right") + %h1 References + %ul.literatur + %li + %span.author Czedik-Eysenberg, I., Knauf, D., & Reuter, C. + %span.year 2017 + %span.title Hardness as a semantic audio descriptor for music using automatic feature extraction + %span.herausgeber Gesellschaft für Informatik, Bonn + %span.link= link 'https://doi.org/10.18420/in2017_06' + %li + %span.author Grey, J.M. + %span.year 1975 + %span.title An Exploration of Musical Timbre + %span.herausgeber Stanford University, CCRMA Report No.STAN-M-2 + %li + %span.author Li,T., Ogihara,M. + %span.year 2003 + %span.title Detecting emotion in music + %nobr + %span.herausgeber 4th ISMIR Washington & Baltimore + %span.pages 239-240 + %li + %span.author Huron, D. + %span.year 2008 + %span.title A comparison of average pitch height and interval size in major-and minor-key themes + %nobr + %span.herausgeber Empirical Musicology Review, 3 + %span.pages 59-63 + %li + %span.author Siddiq,S. et al. + %span.year 2014 + %span.title Kein Raum für Klangfarben - Timbre Spaces im Vergleich + %nobr + %span.herausgeber 40. DAGA + %span.pages 56-57 + .clear diff --git a/style.scss b/style.scss index 8f70d9d..3a848ea 100644 --- a/style.scss +++ b/style.scss @@ -63,7 +63,6 @@ header { } h1 { - //font-family: "Italianno"; font-weight: normal; margin: 0 { //bottom: 0.5rem; @@ -101,7 +100,7 @@ header { padding: 0 1rem 0 1rem; position: relative; - color: #bbb; + color: #ddd; text-shadow: 0 0 5px black, 0 0 10px black, 0 0 15px black; //text-stroke: 1px black; //-webkit-text-stroke: 1px black; @@ -132,11 +131,14 @@ header, main, footer { } footer { - padding-top: 0.5em; + margin-left: auto; + margin-right: auto; + padding: 0 0.45em 0 0.45em; + //padding-top: 0.5em; section { - padding: 2.25rem 0.5rem 0.25rem 0.5rem; + //padding: 2.25rem 0.5rem 0.25rem 0.5rem; h1:first-child { - margin: (-2.25rem) -0.5rem 0.25rem -0.5rem; + //margin: (-2.25rem) -0.5rem 0.25rem -0.5rem; } } } @@ -144,6 +146,7 @@ footer { body { margin: 0; background: url(brushed-metal.dark.svg), url(files/marble_black.png), #252220; + //background: #252220; color: #565655; font-family: "Cardo"; } @@ -166,7 +169,7 @@ section { font-size: 0.95em; //text-align: justify; - &:first-child + * { + & + * { margin-top: 1em; } @@ -187,7 +190,10 @@ section { &::before { z-index: -1; //background: linear-gradient( rgba(44, 58, 41, 0.8) 2.2rem, rgba(256, 256, 256, 0.8) 2.3rem ); - background: linear-gradient( rgba(49, 206, 15, 0.8) 2.2rem, rgba(256, 256, 256, 0.8) 2.3rem ); + //background: linear-gradient( rgba(101, 42, 7, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem ); + //background: linear-gradient( rgba(0, 99, 166, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem ); + //background: linear-gradient( rgba(187, 187, 187, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem ); + background: linear-gradient( rgba(78, 83, 159, 0.8) 2.2rem, rgba(256, 256, 256, 0.85) 2.3rem ); content: ""; //border-radius: 2rem 2rem 0.5rem 0.5rem; position: absolute; @@ -195,7 +201,7 @@ section { right: 0; bottom: 0; left: 0; - box-shadow: 0 0 1rem #555; + box-shadow: 0 0 1rem black; -webkit-print-color-adjust: exact; -webkit-filter: opacity(1); } @@ -207,18 +213,31 @@ section { //border-bottom: 0.3rem solid black //border-radius: 0.18rem 1.68rem 0 0 font-size: 1.8rem; - color: orange; + //color: #0063a6; + color: #ddd; line-height: normal; text-align: center; - font-family: "Italianno"; - font-weight: normal; //border-radius: 0.5rem 2rem 0 0 //padding: 0.1em 0.5rem; - margin: (-2.5rem) -1rem 0.5rem -1rem; + margin: (-2.25rem) -1rem 0.75rem -1rem; //background-color: rgba(128,128,256,0.8) } + h1, h2 { + font-family: "PT Slab"; + font-weight: normal; + margin: 0; + } + h2 { + line-height: normal; + } +} + +sup { + font-size: 0.65em; + vertical-align: top; + line-height: 1em; } quellen { @@ -254,11 +273,11 @@ quellen { } #column1_1, #column1_2, #column1_3, -#column2_1, #column2_2 { +#column2_1, #column2_2, #column2_3 { display: inline-block; box-sizing: border-box; margin: 0; - padding: 0 1em 0.5em 1em; + padding: 0 0.3em 0.5em 0.3em; vertical-align: top; position: relative; @@ -275,7 +294,7 @@ quellen { } #column1_1 { - width: 33%; + width: 29%; //padding-right: 0.5em; } @@ -283,21 +302,24 @@ quellen { //float: right; //padding-left: 0.7em; //margin-left: -0.5em; - width: 33%; + width: 41%; } #column1_3 { //float: right; //padding-left: 0.7em; //margin-left: -0.5em; - width: 33%; + width: 29%; } #column2_1 { - width: 49%; + width: 30%; } #column2_2 { width: 49%; } +#column2_3 { + width: 20%; +} .logos { width: 19rem; @@ -350,6 +372,9 @@ h1 { font-family: "Cardo"; //font-weight: normal; } +h2 { + font-family: "Cardo"; +} em { color: #500; @@ -375,15 +400,21 @@ feature { } main { - position: absolute; - top: 10.5cm; - right: 0; - left: 0; + text-align: center; + &>*{ + text-align: initial; + } + position: relative; + //top: 10.5cm; + //right: 0; + //left: 0; /*img { margin: -0.5em; }*/ +} +main, footer { figure { margin: 0; &.left { @@ -411,6 +442,12 @@ main { clear: left; } } + &.pfifty { + width: 47%; + display: inline-block; + vertical-align: bottom; + text-align: center; + } &.quarterly { float: right; @@ -462,10 +499,11 @@ footer #literatur { table { border-collapse: collapse; border-spacing: 0; + font-size: 0.8em; th, td { border: 1px solid #aaa; - padding: 0.1em; + padding: 0.1em 0.5em; } } @@ -549,9 +587,10 @@ ul.literatur { } figcaption { - font-size: 0.8em; + font-size: 0.45em; font-style: italic; - margin-bottom: 1em; + //margin-bottom: 1em; + padding: 0; } jbr { @@ -559,3 +598,19 @@ jbr { width: 100%; height: 0; } + +.blockarrow { + line-height: 1em; + position: absolute; + text-align: center; + font-size: 4.5rem; + //color: #652a07; + color: #bbb; + text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black; +} + +.col2center { + td:first-child + td { + text-align: center; + } +}