31:Tc98,{ const chartHeight = height - margin.top - margin.bottom const chartWrapper = d3.select(html`

`) const header = chartWrapper.append('div') .html(`${tags.tags.title} ${tags.tags.artist}`) const chart = chartWrapper.append('div') .attr('style', 'position: relative') const canvas = chart.append('canvas') .attr('width', width) .attr('height', height) const svg = chart.append('svg') .attr('width', width) .attr('height', height) .attr('style', 'position: absolute; top: 0; left: 0') const canvasContext = canvas.node().getContext('2d') const rectWidth = xScale.bandwidth() const rectHeight = yScale.bandwidth() const drawColumn = (d) => { // Short circuit if this chunk hasn't been analyzed yet if (!d) return // Otherwise, render the column const xPos = xScale(d.startTime) Object.entries(d.chroma).forEach(([band, value]) => { const yPos = yScale(band) canvasContext.fillStyle = colorScale(value) canvasContext.fillRect(xPos, yPos, rectWidth, rectHeight) }) } chroma.forEach(d => drawColumn(d)) svg.append('g').call(xAxis) svg.append('g').call(yAxis) // Grid svg.append('g') .selectAll('g') .data(R.range(0, 12)) .enter() .append('line') .attr('x1', margin.left + 1) .attr('x2', width - margin.right) .attr('y1', d => d * chartHeight / 12 + margin.top) .attr('y2', d => d * chartHeight / 12 + margin.top) .attr('stroke', colorScale(0.5)) .attr('stroke-width', 1) .exit() svg.append('line') .attr('x1', width - margin.right + 0.5) .attr('x2', width - margin.right + 0.5) .attr('y1', margin.top - 0.5) .attr('y2', height - margin.bottom + 0.5) .attr('stroke', colorScale(0.5)) .attr('stroke-width', 1) // Interactivity const playHeadLineCss = ms => ` position: absolute; top: ${margin.top}px; left: 0; width: 2px; height: ${chartHeight}px; background-color: ${PLAY_HEAD_COLOR}; mix-blend-mode: ${DARK_MODE ? 'screen' : 'multiply'}; transform: translate(${Math.max(xScaleContinuous(ms), margin.left)}px, 0); ` const playHeadLine = chart.append('div') .attr('style', playHeadLineCss(0)) new AudioPlayerMonitor(audioPlayer, a => { const currentTimeMs = a.currentTime * 1000 playHeadLine.attr('style', playHeadLineCss(currentTimeMs)) }) // Make it possible to move the playhead by clicking on the chart! // TODO: this doesn't seem to work during load, when the chart is reevaluating constantly chart.on('click', function () { const audio = audioPlayer const mouse = d3.mouse(this) const xAsPercentage = (mouse[0] - margin.left) / (width - margin.left - margin.right) const timecode = xAsPercentage * audio.duration audio.currentTime = timecode }) if (chroma.filter(x => x).length < chunkCount) { const progressDiv = chartWrapper.append('div') .html('Analyzing ') .append('progress') .attr('max', chunkCount) .attr('value', chroma.filter(x => x).length) } return chartWrapper.node() }32:[{"id":"c530304f8647a2c21d71a63f35bd4a34277e78e2a67f10fc9e5ab8f93b65f1dbe904ff571e2557158f95cc54794d8ec5f53972d1a3d7a99a5f28274bd8ee95c8","href":"https://static.observableusercontent.com/files/c530304f8647a2c21d71a63f35bd4a34277e78e2a67f10fc9e5ab8f93b65f1dbe904ff571e2557158f95cc54794d8ec5f53972d1a3d7a99a5f28274bd8ee95c8","name":"JoshWoodward-OnlyWhispering-03-IllBeRightBehindYouJosephine.mp3","type":"audio/mpeg","lastModified":1588279198204.796,"size":6183342}] 2f:{"title":"Chromatic Analysis","cells":[{"id":0,"value":"md`# Chromatic Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"md`Add a file by URL or select one from your device.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof audioFile = fileInput({\n initialUrl: await FileAttachment(\"JoshWoodward-OnlyWhispering-03-IllBeRightBehindYouJosephine.mp3\").url()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"audioPlayer = {\n const audioPlayer = html`