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 thishttps://github.com/hkgnp/logseq-localassets-plugin 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;}`);
logseq.provideUI({
key: "h1-playground",
slot,
style: { display: "block" },
template: `
<audio controls src="${pathToAssets}/${fileName}"></audio>
`,
});
});
Tho it’s not that nice solution in combination as there is this bug https://github.com/logseq/logseq/issues/4223