31:T1841,playerComponent = ({ props: ["songData"], data() { return { selected: this.value, waveformSVG: null, cursor: null, player: null, w: null, h: null, duration: null, currentTime: 0, currentVolume: 4, reverseTimeMode: false, isPlaying: false }; }, methods: { onPlay() { this.isPlaying = true; }, onPause() { this.isPlaying = false; }, onTime() { this.currentTime = this.player.currentTime; const p = this.player.currentTime / this.duration; this.updateCursor(p); }, onMetaData() { this.duration = this.player.duration; }, dragged(event, d) { const box = this.waveformSVG.node().getBoundingClientRect(); const x = Math.max( 0, Math.min(event.sourceEvent.clientX - box.x, box.width) ); const p = x / box.width; console.log(event); this.player.currentTime = this.duration * p; this.currentTime = this.player.currentTime; this.updateCursor(p); }, dragended(d) {}, updateCursor(p) { const w = this.waveformSVG.node().getBoundingClientRect().width; this.cursor.attr("x", this.w * p); }, toggleTimeMode() { this.reverseTimeMode = !this.reverseTimeMode; }, seekAudio(dir) { this.player.currentTime = this.player.currentTime + dir * 5; }, setVolume() { this.currentVolume = (this.currentVolume + 1) % 5; this.player.volume = (this.currentVolume + 1) / 5; }, async togglePlay() { if (!this.player.paused) { this.isPlaying = false; this.player.pause(); return; } try { await this.player.play(); this.isPlaying = true; } catch (err) { this.isPlaying = false; } } }, computed: { getCurrentTime() { if (!this.reverseTimeMode) return this.currentTime; return this.duration - this.currentTime; } }, filters: { formatSeconds(n) { const d = new Date(n * 1000); return `${String(d.getMinutes()).padStart(2, "0")}:${String( d.getSeconds() ).padStart(2, "0")}`; } }, mounted() { this.player = this.$refs.player; this.player.addEventListener("play", this.onPlay); this.player.addEventListener("pause", this.onPause); this.player.addEventListener("timeupdate", this.onTime); this.player.addEventListener("loadedmetadata", this.onMetaData); this.player.addEventListener("loadeddata", (e) => console.log(e)); this.waveformSVG = d3.select(this.$refs.waveform).select("svg"); this.waveformSVG.call( d3 .drag() .on("start", this.dragged) .on("drag", this.dragged) .on("end", this.dragended) ); this.w = this.waveformSVG.attr("width"); this.h = this.waveformSVG.attr("height"); this.cursor = this.waveformSVG .append("rect") .attr("height", this.h) .attr("width", 2) .attr("rx", 1) .attr("ry", 1) .attr("x", 0) .attr("fill", "white"); }, template: `

-{{ getCurrentTime | formatSeconds }} / {{ duration | formatSeconds }}

` })32:[] 2f:{"title":"Custom Audio Player with D3 + Vue","cells":[{"id":0,"value":"md`# Custom Audio Player with D3 + Vue\n\nCustom audio player made on top of this [waveform generator notebook](https://observablehq.com/@radames/audio-waveform-generator-with-d3).\n\nIt uses D3.js to draw the rectangular bars. The audio data is normalized, cleaned and enconded as a base64 string. Thus you offload the component from loading the entire audio file just to generate the viz.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof songComponents = {\n const vueEl = new Vue({\n components: { playerComponent },\n data() {\n return {\n songData: songData\n };\n },\n el: html`\n

\n \n

\n`\n });\n invalidation.then(() => vueEl.$destroy());\n\n return vueEl.$el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"url = \"https://yr.media/news/i-just-cant-stand-by-and-be-on-the-wrong-side-of-history/\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"author = \"Reveal/Riley Lockett\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"songUrl = \"https://static.observableusercontent.com/files/6ca203ea99f7d01853f588850017e4fd0ea78943ee8082b911b837f1c697d6194d8ab73e299cd24abd093e82a62ed34b1e3b1ac5e6953517733ac08a6199f5d8\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"title = \"‘I Just Can’t Stand By and Be on the Wrong Side of History’\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"base64data = \"WzEsMC45MTcsMC43NTksMC43MDYsMC44NzcsMC43ODksMC43MDYsMC43MTcsMC43ODUsMC43MjUsMC43MjgsMC43NiwwLjc2NSwwLjczMSwwLjg4MSwwLjcyNSwwLjY4NSwwLjcyNiwwLjU4MiwwLjYyMiwwLjQ5NywwLjM2NiwwLjQ2MiwwLjQ3MywwLjU4MiwwLjU1NSwwLjU2NCwwLjM4NSwwLjYxOSwwLjM1MSwwLjY4NywwLjYzMSwwLjc0OSwwLjYxNiwwLjYxNCwwLjQxOCwwLjUzMSwwLjQ5MSwwLjc3OCwwLjUzOSwwLjczMywwLjYzNSwwLjQ2NCwwLjc0NiwwLjY1MiwwLjYyMSwwLjYwMywwLjY1MiwwLjQ3NywwLjU3OSwwLjU2OCwwLjY5MiwwLjU2NiwwLjU1MiwwLjU5NCwwLjc3NywwLjc2MywwLjUxMywwLjY2MywwLjU4NSwwLjQxNiwwLjU1NywwLjU3NSwwLjcxLDAuNjQ5LDAuNzM0LDAuNjc1LDAuNzI3LDAuNjA0LDAuNDk5LDAuNzQ1LDAuNTkyLDAuNjc3LDAuNjY3LDAuNjM0LDAuNjg3LDAuNDYyLDAuNDkzLDAuNzI4LDAuNjI3LDAuNTg1LDAuNTU4LDAuNTE2LDAuNzY3LDAuNDI2LDAuNjMzLDAuNTkyLDAuNTE4LDAuNTExLDAuNzI0LDAuNTM0LDAuNjA5LDAuNDIsMC42MTMsMC41ODYsMC41ODIsMC40NjksMC41OTEsMC40ODIsMC42MjgsMC42ODMsMC4yMDksMC4zMjcsMC44ODQsMC43MjEsMC43MTEsMC4xNSwwLjYzMiwwLjA3MSwwLjAyNl0=\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"songData = ({\n svgStr: (await generateWaveform(JSON.parse(atob(base64data)), {\n height: 100,\n width: 500\n })).outerHTML,\n songUrl: songUrl,\n title: title,\n url: url,\n author: author\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { generateWaveform } from \"@radames/audio-waveform-generator-with-d3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"Vue = require(\"vue@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

{{ songData.title }}

{{ songData.author }}