1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=00576bb5-801f-42df-87aa-97d6e8bfbafd 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="description" content="Earthquake Music"> 9 <meta name="keywords" content="Music, data sonification, climate change"> 10 11 <title>Earthquake music</title> 12 13 14 <!-- favicon --> 15 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 16 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 17 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 18 <link rel="manifest" href="/site.webmanifest"> 19 20 <!-- font awesome --> 21
21<script src="https://kit.fontawesome.com/99490b5402.js" crossorigin="anonymous"></script>
21 22 23 <!-- Leaflet CSS --> 24 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" 25 integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" 26 crossorigin=""/> 27 28 29 <!-- external CSS link https://github.com/kevquirk/simple.css --> 30 <!-- Minified version --> 31 <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> 32 33 <!-- Un-Minified version --> 34 <link rel="stylesheet" href="https://cdn.simplecss.org/simple.css"> 35 36 <!-- my stylesheet --> 37 <link rel="stylesheet" href="css/style.css"> 38 39 <!-- open graph tags --> 40 41 <meta property="og:site_name" content="Earthquake Music" /> 42 <meta property=âog:titleâ content="Earthquake Music: one day of earthquakes as a one minute song" /> 43 <meta property="og:description" content="One day of earthquakes as a one minute song: Earthquake Music pulls data from USGS for the last day of earthquakes and creates a song according to composer Devin Lane's instructions" /> 44 <meta property="og:url" content="https://earthquakemusic.netlify.app/" /> 45 <meta property="og:type" content="website" /> 46 <meta property="article:publisher" content="https://www.devinlane.com" /> 47 <meta property="article:section" content="Creative code" /> 48 <meta property="article:tag" content="Creative code" /> 49 <meta property="og:image" content="https://earthquakemusic.netlify.app/img/logo.png" /> 50 <meta property="og:image:secure_url" content="https://earthquakemusic.netlify.app/img/logo.png" /> 51 <meta property="og:image:width" content="512" /> 52 <meta property="og:image:height" content="512" /> 53 <meta property="twitter:card" content="summary_large_image" /> 54 <meta property="twitter:image" content="https://earthquakemusic.netlify.app/img/logo.png" /> 55 <meta property="twitter:site" content="@DevinCLane" /> 56 <meta name="twitter:description" content="One day of earthquakes as a one minute song" /> 57 <meta name="twitter:title" content="Earthquake Music" /> 58 59 <!-- import tone.js --> 60
60<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.39/Tone.js" integrity="sha512-Zu1QIDG6ZacL9zSX9Ynyvdp45DP/FDTX40ci1RakZ6qvonbA+foQleFvqwa2lnsCE01P5QyXkj662EAwDFhrTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
60 61 62 63 </head> 64 <body> 65 <main> 66 <h1>Earthquake music</h1> 67 <!-- Logo --> 68 <section class="top-area"><img class="logo" src="/android-chrome-192x192.png" alt="world"> 69 <div class="transport"> 70 <button id="start" type="button" name="button" onclick="start()">Make music ð</button> 71 <button id="stop" type="button" name="button" onclick="stop()">Stop</button> 72 </div> 73 </section> 74 <!-- leaflet map --> 75 <div id="map"></div> 76 <!-- what is this? --> 77 <section class="what"> 78 <h2>What is this?</h2> 79 <p>One day of earthquakes in one minute.</p> 80 <p>Earthquake Music pulls the last day of earthquakes in the US from the <a href="https://earthquake.usgs.gov/earthquakes/map/" target="_blank">U.S. Geological Survey</a>, compresses them to one minute, and plays their magnitude as musical frequency.</p> 81 <p>For example, a 1.83 magnitude earthquake would have a pitch of 197hz.</p> 82 </section> 83 <!-- share --> 84 <section class="share"> 85 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Check out this song based on earthquake data!" data-url="https://earthquakemusic.netlify.app/" data-via="DevinCLane" data-show-count="false">Share on Twitter <i class="fa-brands fa-twitter"></i></a>
85<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
85 86 </section> 87 </main> 88 <footer> 89 Made with care and attention by <a href="https://www.devinlane.com/" target="_blank">Devin Lane</a> 90 <p><a href="https://github.com/DevinCLane/earthquake-music" target="_blank">View source code <i class="fa-brands fa-github"></i></a></p> 91 </footer> 92 93 <!-- leaflet JS --> 94
94<script src="https://unpkg.com/[email protected]/dist/leaflet.js" 95 integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" 96 crossorigin=""></script>
96 97
97<script type="text/javascript" src="js/main.js"></script>
97 98 </body> 99</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.