1<!DOCTYPE html> 2 3<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="author" content="Alistair de Blacquiere-Clarkson"> 8 <meta name="keywords" content="Music, Sound, Audio, Mixer, Mixing, VR, Virtual Reality, 360, 3D, Gaming, Games, Apps, Mobile, Desktop, App, Innovation"> 9 <meta name="description" content="Shape of Sound creates interactive music, virtual reality audio experiences, sound design and digital projects from London and Sydney."> 10 <meta name="robots" content="index,follow"> 11 <link rel="canonical" href="https://theshapeofsound.com/"> 12 <meta property="og:image" content="https://theshapeofsound.com/assets/fb_preview.jpg" /> 13 <meta property="og:title" content="Shape of Sound | Interactive Music, VR and Audio" /> 14 <meta property="og:url" content="https://theshapeofsound.com/" /> 15 <meta property="og:description" content="Shape of Sound creates interactive music, virtual reality audio experiences, sound design and digital projects."> 16 <meta property="og:type" content="website" /> 17 <meta property="og:site_name" content="Shape of Sound" /> 18 <meta name="twitter:card" content="summary_large_image"> 19 <title>Shape of Sound | Interactive Music, Virtual Reality and Audio</title> 20
20<script src="./dist/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
20 21
21<script src="./dist/jquery.lazy-master/jquery.lazy.min.js"></script>
21 22
22<script src="./dist/popper.min.js"></script>
22 23
23<script src="./dist/bootstrap-4/js/bootstrap.min.js"></script>
23 24 <link href="./dist/bootstrap-4/css/bootstrap.min.css" rel="stylesheet"> 25 <link href="main.css" rel="stylesheet"> 26 <link href="header.css" rel="stylesheet"> 27 </head> 28 29 <body class="pagecentred boxed_page feint_background"> 30 31 <!-- Load Facebook SDK for JavaScript> 32 <div id="fb-root"></div> 33
33<script>(function(d, s, id) { 34 console.log("Facebook Chat Init"); 35 var js, fjs = d.getElementsByTagName(s)[0]; 36 if (d.getElementById(id)) return; 37 js = d.createElement(s); js.id = id; 38 js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1'; 39 fjs.parentNode.insertBefore(js, fjs); 40 }(document, 'script', 'facebook-jssdk'));</script--> 41 42 <!-- Your customer chat code> 43 <div class="fb-customerchat" 44 attribution=setup_tool 45 page_id="1230739603672243" 46 theme_color="#000675" 47 logged_in_greeting="Hi! Hows it going?" 48 logged_out_greeting="Hi! Hows it going?"> 49 </div--> 50 51 <div id="mainarea"> 52 <div class='header boxed_page' style="display:inline;position:fixed;z-index:8000"> 53 <div class='row align-items-center no-gutters' style="margin-left: auto; margin-right: auto;"> 54 <div class='col-md-3 col-lg-4'> 55 <a href="index.html" aria-label="Shape of Sound home"><img id="header_logo" class="" src="assets/headertext.png" style="padding:14px 20px 4px 30px;"> 56 </img> 57 </a> 58 </div> 59 <div class="col-md-3 col-lg-3"></div> 60 <div class="col-md-6 col-lg-5"> 61 <div class="topnav" id="myTopnav"> 62 <div> 63 <a href="index.html" class="mobile-home active">home</a> 64 <a href="portfolio.html">portfolio</a> 65 <a href="plugins.html">plugins</a> 66 <a href="app/music.html">music</a> 67 <a href="blog.html">blog</a> 68 <a href="privacy.html">privacy</a> 69 <a href="contact.html">contact</a> 70 <a href="javascript:void(0);" class="icon" onclick="myFunction()" style="height:100%"> 71 <img src="assets/hamburger.png" style="height:1.5em"></img> 72 </a> 73 </div> 74 </div> 75 </div> 76 </div> 77 </div> 78 79
79<script> 80 /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 81 function myFunction() { 82 var x = document.getElementById("myTopnav"); 83 if (x.className === "topnav") { 84 x.className += " responsive"; 85 } else { 86 x.className = "topnav"; 87 } 88 } 89 </script>
89 90 91 <div class="maincontent feint_background light_box_shadow" id="content"> 92 <div class="header_spacer" style="background-color: #fff" id="header_margin"> 93 </div> 94 95 <div class='main light_box_shadow white_background'> 96 <h1 class="sr-only">Shape of Sound interactive music, virtual reality and audio projects</h1> 97 <div class=''> 98 <div class='row align-items-center no-gutters row-eq-height' style="margin-left: auto; margin-right: auto;padding:0px;overflow: hidden"> 99 <div class='col-md-6 col-lg-3 square_imagediv' style="" id="column1"> 100 <img id="image1" class="square_image lazy" data-src="assets/image1.jpg"> <img> 101 <div class="overlay"> 102 <div class="text">Check each tile to get the full story</div> 103 </div> 104 </div> 105 <div class='col-md-6 col-lg-3 order-lg-3 square_imagediv' style=""> 106 <img class="square_image lazy" data-src="assets/image3.jpg"> <img> 107 <div class="overlay"> 108 <div class="text">Apps were built to draw music in 3D and to experience music in VR</div> 109 </div> 110 </div> 111 <div class='col-md-12 col-lg-6 order-lg-2 rect_imagediv' style=""> 112 <img class="rect_image lazy" data-src="assets/image2.jpg"> <img> 113 <div class="overlay"> 114 <div class="text">Shape of Sound started when listening to music and wondering if melodies could give you a 3D experience</div> 115 </div> 116 </div> 117 </div> 118 119 <div class='row align-items-center no-gutters' style="margin-left: auto; margin-right: auto;padding:0px"> 120 <div class='col-md-6 col-lg-3 square_imagediv'> 121 <img class="img-fluid square_image lazy" data-src="assets/image4.jpg" style=""> <img> 122 <div class="overlay"> 123 <div class="text">360 degree spatialisation and mixing techniques were employed</div> 124 </div> 125 </div> 126 <div class='col-md-6 col-lg-3 square_imagediv'> 127 <img class="img-fluid square_image lazy" data-src="assets/image5.jpg" style=""> <img> 128 <div class="overlay"> 129 <div class="text">Cool soundscapes and vibes were created</div> 130 </div> 131 </div> 132 <div class='col-md-12 col-lg-6 rect_imagediv'> 133 <img class="img-fluid rect_image lazy" data-src="assets/image6.jpg" style=""> <img> 134 <div class="overlay"> 135 <div class="text">Lots of songs were written and produced to help work out if melodies could be the key</div> 136 </div> 137 </div> 138 </div> 139 140 <div class='row align-items-center no-gutters' style="margin-left: auto; margin-right: auto;padding:0px"> 141 142 <div class='col-md-6 col-lg-3 order-lg-2 square_imagediv'> 143 <img class="img-fluid square_image lazy" data-src="assets/image8.jpg" style=""> <img> 144 <div class="overlay"> 145 <div class="text">A new album is being released</div> 146 </div> 147 </div> 148 <div class='col-md-6 col-lg-3 order-lg-3 square_imagediv'> 149 <img class="img-fluid square_image lazy" data-src="assets/image9.jpg" style=""> <img> 150 <div class="overlay"> 151 152 <div class="text"> 153 154 <div class="text"><a href="https://ai-bible.com">ai-bible</a> has been quietly released.</div> 155 </div> 156 </div> 157 </div> 158 <div class='col-md-12 col-lg-6 order-lg-1 rect_imagediv'> 159 <img class="img-fluid rect_image lazy" data-src="assets/image7.jpg" style=""> <img> 160 <div class="overlay"> 161 <div class="text">
161Vocals were added and harmonies were then explored to see if the key was in the interaction between the two</div> 162 </div> 163 </div> 164 165 </div> 166 </div> 167 </div> 168 </div> 169 170
170<script> 171 var first_load = false; 172 173 console.log("Initializing..."); 174 175 $('body').addClass("loading"); 176 177 function Resize_Grid() { 178 var thumbnail_width = $("#image1").width(); 179 180 //$("#debug_output").html($(this).width()); 181 182 if ($(this).width() <= 767) { 183 $("#image1").attr("data-src", "assets/image1_alt.jpg"); 184 $("#image1").attr("src", "assets/image1_alt.jpg"); 185 $('.square_image').css('height', thumbnail_width); 186 $('.square_imagediv').css('max-height', thumbnail_width); //set max height 187 $('.rect_image').css('height', thumbnail_width / 2); 188 $('.rect_imagediv').css('max-height', thumbnail_width / 2); //set max height 189 } else if ($(this).width() <= 991) { 190 $("#image1").attr("data-src", "assets/image1_alt.jpg"); 191 $("#image1").attr("src", "assets/image1_alt.jpg"); 192 $('.square_image').css('height', thumbnail_width); 193 $('.square_imagediv').css('max-height', thumbnail_width); //set max height 194 $('.rect_image').css('height', thumbnail_width); 195 $('.rect_imagediv').css('max-height', thumbnail_width); //set max height 196 } else { 197 $("#image1").attr("data-src", "assets/image1.jpg"); 198 $("#image1").attr("src", "assets/image1.jpg"); 199 $('.square_image').css('height', thumbnail_width); 200 $('.square_imagediv').css('max-height', thumbnail_width); //delete attribute 201 $('.rect_image').css('height', thumbnail_width); 202 $('.rect_imagediv').css('max-height', thumbnail_width); //set max height 203 } 204 console.log("Resize: " + thumbnail_width + " " + $(this).width()); 205 } 206 207 Resize_Grid(); 208 209 $(window).bind("load", function () { 210 Resize_Grid(); 211 }); 212 213 $(window).on('resize', function () { 214 Resize_Grid(); 215 }); 216 217 function myTimer() { 218 $('body').removeClass("loading"); 219 } 220 221 var startTime, endTime; 222 223 $(function () { 224 $('.lazy').Lazy({ 225 scrollDirection: 'vertical', 226 effect: 'fadeIn', 227 effectTime: 2000, 228 threshold: 0, 229 visibleOnly: true, 230 beforeLoad: function (element) { 231 // called before an elements gets handled 232 startTime = new Date(); 233 }, 234 afterLoad: function (element) { 235 236 // called after an element was successfully handled 237 if (first_load) 238 return; 239 240 first_load = true; 241 242 endTime = new Date(); 243 244 var interval = endTime - startTime; 245 246 if (interval < 1000) { 247 var myVar = setInterval(myTimer, 1000 - interval); 248 } else 249 var myVar = setInterval(myTimer, 1000); 250 }, 251 onError: function (element) { 252 // called whenever an element could not be handled 253 }, 254 onFinishedAll: function () { 255 // called once all elements was handled 256 } 257 }); 258 }); 259 </script>
259 260 </div> 261 262 <div class='footer boxed_page light_box_shadow'> 263 <div class='row align-items-center no-gutters' style="margin-left: auto; margin-right: auto;"> 264 <div class="col-lg-4"> 265 <p href="https://www.theshapeofsound.com" class="grey_text my-auto" style="padding:0 0 0 30px"> (c) 2026 266 Shape of Sound Ltd</p> 267 </div> 268 <div class='col-lg-4'> 269 <img class="" src="assets/headertext.png" style="height:6em;padding:14px 20px 4px 30px;visibility:hidden"> 270 <img> 271 </div> 272 <div class="col-lg-4"> 273 <!--h1 id="debug_output" style="color:black;visibility:hidden"> RESIZE <h1--> 274 <a href="https://ai-bible.com" class="my-auto" style="padding:0 0 0 30px;font-size: 0.6rem;color:lightblue"> NEWS: ai-BIBLE is being released </a> 275 </div> 276 </div> 277 </div> 278 279 <div class="modal" style="z-index:9000"> 280 <!--div id="LoadingText" class="text" style="color:#000"> Loading ... </div--> 281 </div> 282 283
283<script src="https://swetrix.org/swetrix.js" defer></script>
283 284
284<script> 285 document.addEventListener('DOMContentLoaded', function() { 286 swetrix.init('TumMFyHJqpee'); 287 swetrix.trackViews(); 288 }); 289 </script>
289 290 <noscript> 291 <img 292 src="https://api.swetrix.com/log/noscript?pid=TumMFyHJqpee" 293 alt="" 294 referrerpolicy="no-referrer-when-downgrade" 295 /> 296 </noscript> 297 </body> 298</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.