How do I embed a list of MP3s queried from dataview (or dataviewjs, query)

Help
1

What I’m trying to do

I have multiple notes with metadata (YAML tags) and each note corresponds to a single mp3 file. Both the note and the mp3 have the same name. I’d like to dataview/dataviewjs/query a directory of notes and then based on the metadata have those mp3’s listed as playable files in the page.

I can get this to work with images but not mp3s.

Things I have tried

  1. I can have an mp3 playable if I manually type it, like this

![[song.mp3]]

  1. I can also use dataview to grab images from notes and display those using the embed(link), like this
LIST embed(link(file.name + ".jpg")) 
FROM ("dir1" or "dir2") and #tagA/subtag
sort file.name asc
  1. But when I try to use technique #2 with .mp3s, it doesn’t work.

It just lists the results as text. Perhaps this is a feature request for dataview development. I already put in a request here.

But I’m curious if anyone has a workaround, especially with query or dataviewjs.

I searched for mp3, embed, didn’t find anything regarding this.

1 Like
2

This creates a link to the file, making it easy to collate and order mp3 files and then play them:

---
mp3: "[[Born Slippy.mp3]]"
---

```dataview
TABLE WITHOUT ID
	mp3
FROM 
	"_inbox"
WHERE
	mp3
```

mp3 dataview
mp3 dataview1732×584 51.2 KB

3

Thank you. Appreciated!

Your solution does give me a list of mp3 files, but it doesn’t fix my main issue; I’d like a page with all the queried songs embedded. (see image below)

Other goals:

  • The obsidian media player doesn’t play the next song on the page, it just stops after the first song. But I’ll deal with that issue next.
  • I’d want to use dataviewjs to randomize the song list order.

The end result would be a way to generate randomized, dynamic playlists based on metadata.

Thanks again for the help.

image
image1144×783 29.8 KB

2 Likes
4

Yeah, and it opens playback up in a popup that disappears if you move your mouse.

I’m interested in this too.

I thought I had opened up a feature request to show the name of mp3 attachments above the attachment, but I can’t find it. That’s the minimum I’m hoping for, but I’d love your solution too!

5

I think the way forward would be to use a combination of Buttons + Templater + Dataview. The gist of the idea is as follows:

  • On a given page, have a button which replaces all text after the button with the result from a Templater command
  • The Templater command (based upon a template) triggers a Dataview script which collates the mp3-files in a random order using markdown syntax, which the template appends to the current file

This will give a static version of the embedded files, which will circumvent the issues that Dataview has with embedding files, whilst still allowing for a refresh of the playlist by the hit of a button.

Is this idea something you’re able to implement yourself? I’m running a little low on time tonight, so I need to do something else. If you’re not able to do it yourself, I might look into it one of the next few days.

1 Like
6

I’ve made a dvjs view that might interest you: some-custom-dataviews/jukebox at master · Krakor92/some-custom-dataviews · GitHub

It renders the mp3 files in a gallery view with autoplay automatically enabled. Note that each audio card have a very limited number of options:

  • Play/Pause
  • Timeline without timecode

This is by design because I don’t need to change the playback speed or volume of each file.

The readme should answer most of your questions, but let me know if you have any.

1 Like