Embedding a Wavesurfer.js player in a codeblock

[kimaldis]

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'
			});
		});

[Acylation]

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

Obsidian Publish API: createDiv doesn't create div in time

I just test with plugin api registerMarkdownCodeBlockProcessor, hope there won’t be too many differences. For checking the availability of the newly created element, I directly logged it, as well as setting its innerText, both gave the expected result, while the method getElementById didn’t publish.registerMarkdownPostProcessor((el, ctx) => { if (el.innerHTML === '<p>comments</p>') { el.innerHTML = '' const element = el.createDiv({ attr: { id: 'comments' } }) element.innerText = …

[kimaldis]

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'
			});
		});