Support relative path in audio component

It’s not possible to use audio component with relative file path, i.e. this doesn’t work:

[:audio {:controls true :src "../assets/bla.mp3"}]

You must use path like this:

[:audio {:controls true :src "file:///Users/safareli/graph/assets/bla.mp3"}]

There is hacky temporal solution like this discussed in Embedding audio in logseq

But logseq-localassets-plugin converts relative path into absolute, so if you were to move your graph folder to some other location, links will be broken. (or if you want to access it from mobile for example)

if you drag and drop image or some other asset then relative markdown link is created and relative paths work there. So there is a bit inconsistency here.

It would be ideal if when audio is dropped instead of relative link, audio component is used, with relative path

My current workaround is plugin inspired by the logseq-localassets-plugin:

const currGraph = await logseq.App.getCurrentGraph();
const pathToAssets = `${currGraph.path}/assets`;

// Insert renderer upon slash command
logseq.Editor.registerSlashCommand("local audio", async () => {
  await logseq.Editor.insertAtEditingCursor(`{{renderer :localaudio, }}`);

logseq.App.onMacroRendererSlotted(({ slot, payload }) => {
  let [type, fileName] = payload.arguments;
  if (type !== ":localaudio") return;
  logseq.provideStyle(`#${slot} { display: block; line-height: 0;}`);
    key: "h1-playground",
    style: { display: "block" },
    template: `
    <audio controls src="${pathToAssets}/${fileName}"></audio>

Tho it’s not that nice solution in combination as there is this bug

This will be supported natively in the next release. Please comment at Embedding audio in logseq - #17 by leugrady.