2a:null 2b:["$","title",null,{"children":"Music Viz | Alan Xu | Observable"}] 30:[] 2e:{"id":"a27ae9671dfae8db","slug":"music-viz","title":"Music Viz","thumbnail":"f3f1d9b5e289c683329754a1cd2460a36981f6a3a2ee0d131185aa531d5eb10c","access_level":"public","create_time":"$D2018-10-14T06:13:53.971Z","update_time":"$D2018-11-26T22:13:15.601Z","view_time":null,"first_public_time":"$D2018-10-14T09:09:44.877Z","has_unpublished_edits":null,"fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"ff96f1b382d1b1d5","login":"alandelip","name":"Alan Xu","avatar_url":"https://avatars-next.observableusercontent.com/e9644a63c4f8f2430e70cae7f0c27b476afbaf70d5de98f4ed05b83c4552ac28","tier":"starter_2024"},"version":804,"publish_version":804,"role":null,"authored":false,"authors":[{"type":"individual","id":"d51cb173b79e5d19","login":"alandelip","name":"Alan Xu","avatar_url":"https://avatars-next.observableusercontent.com/e9644a63c4f8f2430e70cae7f0c27b476afbaf70d5de98f4ed05b83c4552ac28","tier":null}],"members":[{"type":"individual","id":"d51cb173b79e5d19","login":"alandelip","name":"Alan Xu","avatar_url":"https://avatars-next.observableusercontent.com/e9644a63c4f8f2430e70cae7f0c27b476afbaf70d5de98f4ed05b83c4552ac28","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Music Viz","cells":[{"id":0,"value":"md`# Music Viz\n#### Based on frequency spectrum of music\n*Using P5 + D3*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`This is a data visualization work based on frequency spectrum of the music using following libraries:\n- Spectrum extraction: P5.js, P5.sound.js\n- Spectrum visualization: D3.js\n- Color selections: Chroma.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`You can input your music url to visualize, but please make sure that your music url is allowed to cross origin.\nCopy your music url into the input and click 'Visualize Music' button to load and see your music visualization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"music_url_input = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"md`Or you can directly upload your local music file. Music is stored temporarily in your browser using Blob.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"viewof local_file = file({\n description: \"Only audio files are allowed.\",\n accept: \"audio/*\",\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"visualize_btn = html`\n

${music_state.indexOf('Loading')==0?\"Loading...\":music_state.indexOf('Reload')==0?\"Reload\":\"Visualize Music\"}

\n${music_state.indexOf('Fail')==0?music_state+\". Make sure your music url is allowed to cross origin.\":\"\"}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"p5Container = {\n \tlet el = document.createElement(\"div\");\n \tel.id = container.id;\n \t// el.style.border = \"1px solid black\";\n \tel.style.width = `${container.width}px`;\n \tel.style.height = `${container.height}px`;\n\treturn el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"sketch = sketch => {\n let fft, spinner;\n\n sketch.setup = function() {\n fft = new p5.FFT();\n d3.select('#defaultCanvas0').style(\"display\", \"none\");\n \n spinner = d3.select('#p5-container').append('svg').attr('width', container.width).attr('height', container.height);\n mutable sound.amp(0.35);\n mutable sound.play();\n };\n\n sketch.draw = function() {\n let spectrum = fft.analyze();\n\n\t let data = [];\n\t for (let i = 0; i < spectrum.length; i += 6) {\n\t\t data.push({x: i, h: spectrum[i], e: fft.getEnergy(spectrum[i])});\n\t }\n\t d3.select(\"#p5-container svg\").remove();\n\t\td3.select('#p5-container').append('svg').attr('width', container.width).attr('height', container.height)\n\t\t\t .append(\"g\")\n\t\t\t .attr(\"transform\", \"translate(225, 225)\")\n\t\t\t .selectAll(\"rect\").data(data).enter().append(\"rect\")\n\t\t\t .attr(\"fill\", d => colors(d.x))\n\t\t\t .attr(\"y\", d => energy(d.e))\n\t\t\t .attr(\"height\", d => h(d.h))\n\t\t\t .attr(\"width\", 2)\n\t\t\t .attr(\"transform\", d => `rotate(${deg(d.x)})`);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"binding_events = {\n visualize_btn.onclick = () => {\n if(sound != null){\n mutable sound.stop();\n mutable sound = null;\n }\n // load sound with success handler to reinit p5 container\n mutable music_state = \"Loading\";\n let reloadTimeout = setTimeout(()=>{mutable music_state = \"Reload\";},10000);\n mutable sound = p5.prototype.loadSound(\n music_url_input.value, \n function (){\n clearTimeout(reloadTimeout);\n mutable music_state = \"Loaded: \" + music_url_input.value;\n p5Container.innerHTML = \"\";\n new p5(sketch, p5Container);\n },\n function (){\n mutable music_state = \"Fail to load music\";\n }\n );\n }\n return \"binding load/reload events\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"blob = {\n let fileReader = new FileReader();\n let blob_url = await URL.createObjectURL(local_file);\n music_url_input.value = blob_url;\n return blob_url;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"mutable music_state = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"mutable sound = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"container = ({width: 450, height: 450, id: \"p5-container\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"x = d3.scaleLinear().domain([0, 1024]).range([0, container.width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"h = d3.scalePow().exponent(2).domain([0, 255]).range([5, 200])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"colors = chroma.scale(['orangered', 'orange', 'steelblue']).domain([0, 850])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"deg = d3.scaleLinear().domain([0, 1024]).range([100, 460])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"energy = d3.scalePow().exponent(2).domain([0, 255]).range([10, 120])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"p5 = require(\"p5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"p5_sound = {\n require('p5@0.7.2/lib/addons/p5.sound.min.js');\n return \"load p5.sound.js\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"import {file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"