25:["$","title",null,{"children":"Custom Audio Player with D3 + Vue | Hila Mor | Observable"}] 49: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 }}

` })4a:[] 29:{"id":"8cb575b688ca66db","slug":null,"title":"Custom Audio Player with D3 + Vue","thumbnail":"d665267f718f7692c33b6d5f477c9e9531204ae00030341fe1e8156ba8853540","access_level":"public","create_time":"$D2023-05-05T06:19:06.098Z","update_time":"$D2023-05-05T06:23:50.783Z","view_time":null,"first_public_time":"$D2023-05-05T06:19:06.098Z","has_unpublished_edits":null,"fork":{"id":"95878ffaa4ccc1cf","slug":"custom-audio-player-with-d3-vue","title":"Custom Audio Player with D3 + Vue","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c93451d86b50d1ee","login":"hilamor","name":"Hila Mor","avatar_url":"https://avatars-next.observableusercontent.com/d6fea2fbc14c8d408c7904636e302cdb0e20d10b2ade9fcf9d4eb7568f158001","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":626,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ee5353c2b7e272a","login":"hilamor","name":"Hila Mor","avatar_url":"https://avatars-next.observableusercontent.com/d6fea2fbc14c8d408c7904636e302cdb0e20d10b2ade9fcf9d4eb7568f158001","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6ee5353c2b7e272a","login":"hilamor","name":"Hila Mor","avatar_url":"https://avatars-next.observableusercontent.com/d6fea2fbc14c8d408c7904636e302cdb0e20d10b2ade9fcf9d4eb7568f158001","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"author = \"Reveal/Riley Lockett\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"songUrl = \"https://static.observableusercontent.com/files/6ca203ea99f7d01853f588850017e4fd0ea78943ee8082b911b837f1c697d6194d8ab73e299cd24abd093e82a62ed34b1e3b1ac5e6953517733ac08a6199f5d8\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"title = \"‘I Just Can’t Stand By and Be on the Wrong Side of History’\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"base64data = \"WzEsMC45MTcsMC43NTksMC43MDYsMC44NzcsMC43ODksMC43MDYsMC43MTcsMC43ODUsMC43MjUsMC43MjgsMC43NiwwLjc2NSwwLjczMSwwLjg4MSwwLjcyNSwwLjY4NSwwLjcyNiwwLjU4MiwwLjYyMiwwLjQ5NywwLjM2NiwwLjQ2MiwwLjQ3MywwLjU4MiwwLjU1NSwwLjU2NCwwLjM4NSwwLjYxOSwwLjM1MSwwLjY4NywwLjYzMSwwLjc0OSwwLjYxNiwwLjYxNCwwLjQxOCwwLjUzMSwwLjQ5MSwwLjc3OCwwLjUzOSwwLjczMywwLjYzNSwwLjQ2NCwwLjc0NiwwLjY1MiwwLjYyMSwwLjYwMywwLjY1MiwwLjQ3NywwLjU3OSwwLjU2OCwwLjY5MiwwLjU2NiwwLjU1MiwwLjU5NCwwLjc3NywwLjc2MywwLjUxMywwLjY2MywwLjU4NSwwLjQxNiwwLjU1NywwLjU3NSwwLjcxLDAuNjQ5LDAuNzM0LDAuNjc1LDAuNzI3LDAuNjA0LDAuNDk5LDAuNzQ1LDAuNTkyLDAuNjc3LDAuNjY3LDAuNjM0LDAuNjg3LDAuNDYyLDAuNDkzLDAuNzI4LDAuNjI3LDAuNTg1LDAuNTU4LDAuNTE2LDAuNzY3LDAuNDI2LDAuNjMzLDAuNTkyLDAuNTE4LDAuNTExLDAuNzI0LDAuNTM0LDAuNjA5LDAuNDIsMC42MTMsMC41ODYsMC41ODIsMC40NjksMC41OTEsMC40ODIsMC42MjgsMC42ODMsMC4yMDksMC4zMjcsMC44ODQsMC43MjEsMC43MTEsMC4xNSwwLjYzMiwwLjA3MSwwLjAyNl0=\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { generateWaveform } from \"@radames/audio-waveform-generator-with-d3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Vue = require(\"vue@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null

{{ songData.title }}

{{ songData.author }}