Embedded media (audio/video) in markdown files

I have a number of markdown files in DEVONthink on my Mac which make use of embedded audio using the following markup:

<audio controls="1" controlslist="nodownload nofullscreen noremoteplayback" src="x-devonthink-item://9CFD5BD2-EB05-41EB-83EB-88A666381953">Your browser does not support the audio tag.</audio>

This works wonderfully on the mac and is incredibly convenient, as I can keep the audio player close to the area in my notes to which it is appropriate. Notably, it works both when using an item link or a relative path for the src attribute (an item link is generally advisable though as it will survive replication, whereas a relative path is only relative to one copy of the file). It’s great!

Unfortunately, this doesn’t seem to work in DEVONthink To Go. I have made sure the target items are in a folder which is marked as “always” download (rather than “on demand”), so the files are downloaded to my device, but it seems like referring to other files like this (whether by item link or by relative path) just isn’t supported in DTTG. The audio player interface appears but reports “error”, as if the web view can’t find the file at that URL.

It would be great if this could be made to work as it does on the Mac, as I would love to be able to read my notes with audio embeddings on the iPad!

2 Likes

Thanks for letting us know about this issue, I have confirmed the problem in DEVONthink to Go and we will aim to fix this for the next update.

1 Like

where did you find the list of commands for the audio player? I would like to figure out how to add play links to start at a certain time

As with all things HTML, CSS, and JavaScript, MDN is the best place to go to:

thank you. I was there, I was in the wrong section HTMLMediaElement: controls property - Web APIs | MDN

is there a way to use a DevonThink item link instead of the audio file (I drag and drop it, and it works)? @aedwards stated by using the item link, moving around the audio file won’t break the linkage to the audio player.

I don’t understand the question. There is an item link in the audio element’s src attribute already.

correct.

When I drag and drop an audio file into my markdown file, DevonThink correctly creates the audio controls and link to the audio file.

I am trying to figure out how (see quote below)

@kidviddy used the item link as his <source src=

The audio file is empty

Below is my tests:

Tests:


  1. Method used: Drag and drop from group where the audio is stored, to this markdown file
    All 9 Solfeggio Frequencies - Full Body Aura Cleanse & Cell Regeneration Therapy (128kbit_AAC).m4a
    NOTE: on my local DevonThink the player shows the correct duration, and is playable

    Markdown Used: NOTE: DO NOT COPY AND PASTE THE BELOW CODE, SEE LAST ENTRY
    <audio controls=“”><source src=“All%209%20Solfeggio%20Frequencies%20-%20Full%20Body%20Aura%20Cleanse%20&%20Cell%20Regeneration%20Therapy%20(128kbit_AAC).m4a”></audio>


  2. All 9 Solfeggio Frequencies - Full Body Aura Cleanse & Cell Regeneration Therapy (128kbit_AAC).m4a
    Method used:
    Use step 1 above created link, replaced source src with pasted “copy item link” from right click menu from above pane (inbox … ‘name of group where I stored audio file in DevonThink’ -where I stored the audio file. pasting between “” after src="
    NOTE: On my local machine, DevonThink shows the player having 00:00 time and is not playable

    Markdown used: NOTE: DO NOT COPY AND PASTE THE BELOW CODE, SEE LAST ENTRY
    <audio controls=“”><source src=“[Pure Frequency Specific Sound Baths _ 30 Minutes Each Chakra _ Singing Bowl Meditation Music _ Relax (192kbit_AAC).m4a]/(x-devonthink-item://E8472103-00C2-4DAE-BCED-66A53EBDB525)”></audio>

If you really have curly quotes in you markdown, that can’t work. Use straight quotes in HTML elements.

And the 2nd version won’t work even with straight quotes, as the syntax is wrong. The src in an HTML element must be an URL.

I use standard straight quotes,

How to Use Curly Quotes on Mac OSX and Windows • Chris Bracco • web design, engineering, management

I tried a 3rd variation. As per @chrillek I verified I was using straight quotes (standard on a mac keyboard), and I removed the src, leaving just source= and source = (with a space). Neither resulted in a playable audio file.

Thank you for your input @chrillek

I was able to get the audio file to play, using the exact markdown that @kidviddy used, while removing nodownload nofullscreen noremoteplayback. I had to keep the audio controls=“1”

<audio controls="1" src="x-devonthink-item://E8472103-00C2-4DAE-BCED-66A53EBDB525"></audio>

Note: the above code was edited, after @chrillek taught me to use the backtick (upper left on macOS english keyboard under ESC key), see chronologically later for his instruction. I also removed the unnecessary text.

Please do not post code in the normal text here. Instead, include in three backticks like so:
```
code goes here
```
That prevents these stupid curly quotes appearing in HTML elements, where they have no place. And it helps people to copy/paste your code (and get something usable).

Example:

<audio controls="1" src="x-devonthink-item://E8472103-00C2-4DAE-BCED-66A53EBDB525">Your browser does not support the audio tag.</audio>

You can, BTW, remove the content of the element (“Your browser does not support the audio tag”>: Audio element | Can I use... Support tables for HTML5, CSS3, etc
The only current browser not supporting audio is Opera mini. With which you’ll probably not run DT.

For all future people reading this, I appreciate learning from @chrillek and this thread has taught me a lot about markdown, and how to post properly into DevonThink discourse.

1 Like