Hml audio tag not working using dataviewjs

[Alex333]

Hi all,

I’m currently using Obsidian 1.4.16, and I want to use dataviewjs to show all mp3 files that have been referenced using “#music” tag, as well as the progress bar so that I can directly play the music on the result of dataviewjs, I used the following code, it does show the bar, but the bar is not clickable, is there a way to solve it?

const files = app.vault.getMarkdownFiles();
const arr = files.map(async (file) => {
    const content = await app.vault.cachedRead(file);
    const lines = content.split("\n");
     //stores the html elements for all mp3 that are referenced in text 
    let matchedSectionsOrLines = [];

    lines.forEach((line) => {
	    // make sure that the mp3 is referenced using tag music
        if (line.includes("#music")) {
		    //store the path for mp3 file
            const audioRegex = /!\[\]\((.*?)\.mp3\)/;
            const match = line.match(audioRegex);
            if (match) {
                const audioPath = match[1] + ".mp3";
                matchedSectionsOrLines.push(`<audio controls><source src="${audioPath}" type="audio/mpeg"></audio>`);
            }
        }
    });

    return matchedSectionsOrLines;
});

Promise.all(arr).then(values => {
    const flattenedValues = values.flat();
    flattenedValues.forEach((text) => {
        dv.paragraph(text);
    });
});

The result of dataviewjs:

The text that referenced the mp3:

I know I can replace the HTML tag in the code with: <a href="${obsidianUri}">${audioPath}</a> to show the URI of mp3 instead of the bar, but then I can’t play the music directly on the dataviewjs result.

Thank you very much for your help!