Embedding a Wavesurfer.js player in a codeblock

Developers: Plugin & API
1

I’m writing an Obsidian plugin that will embed a Wavesurfer.js player in a code block. So far I have the code below. As you can see, the code creates <div id="waveform" /> then attempts to attach a waveform to it. Which is failing, I’m guessing, because the div isn’t yet rendered. If I create a div by hand further up the page, the waveform successfully attaches to that so I know the basic thing kind of works. So my quesiton is, how would I go about making this work?

		this.registerMarkdownCodeBlockProcessor("audicle", (source, el, ctx) => {

			const wsurf = el.createEl("div", { 
				text: source + "here",
				attr: { id: 'waveform' } 
			});
			const wavesurfer = WaveSurfer.create({
				container: '#waveform',
				waveColor: '#4F4A85',
				progressColor: '#383351', 
				mediaControls: true,
				dragToSeek: true,
				url: 'app://617fcc8d4f11bdf0b59526f53055127f6bf5/Users/kimaldis/Documents/Obsidian%20Vaults/audicle/Goin%20Down.mp3?1692101131139'
			});
		});
2

Would this post help? I can see some relevancies from these problems.

3

That did it. Many thanks. Ammended code:

		this.registerMarkdownCodeBlockProcessor("audicle", async (source, el, ctx) => {

			const wsurf = await el.createEl("div", { 
				text: source + "here",
				attr: { id: 'waveform' } 
			});
			const wavesurfer = WaveSurfer.create({
				container: '#waveform',
				waveColor: '#4F4A85',
				progressColor: '#383351', 
				mediaControls: true,
				dragToSeek: true,
				url: 'app://617fcc8d4f11bdf0b59526f53055127f6bf5/Users/kimaldis/Documents/Obsidian%20Vaults/audicle/Goin%20Down.mp3?1692101131139'
			});
		});