How to get actual URL of a binary object from a tiddler containing it?

, ,
#1

I’m trying to implement a simple countdown timer widget, and want it to play a sound when the timer runs out. For that, I intend to use <audio> tag, which needs source attribute.

Assuming I have an mp3 or wav short audio snippet in a tiddler, how can I get the actual (canonical? internal?) url for that audio snippet to feed to my <audio> tag?

And since I’m a newbie in front-end stuff, if I’m doing the thing totally wrong, please show me the right way :slight_smile:

#2

I’ve created lots of time-related add-ons for TiddlyWiki, including a “countdown timer”.

Give this a try…

Copy the following tiddlers to your TiddlyWiki:

Next, create a tiddler (e.g., “MyCountdownSound”)

  • add a _canonical_uri field that points to a URL or local file
  • set the type field to the appropriate MIME type (e.g., “audio/mpeg”)

Then, create a tiddler (e.g., “MyCountdown”) containing the following text:

\define done() <audio autoplay src={{MyCountdownSound!!_canonical_uri}}/>
{{||TiddlyTools/Time/CountDown}}

When you press done, you will see a countdown timer interface.

  • Enter the desired time (hours, minutes, seconds)
  • Leave the message blank (the custom done() handler will be used instead)
  • Press the “start” button and wait for the timer to reach 00:00:00… your sound will play!

see TiddlyTools/Time/Info for more details on TiddlyTools Time add-ons.

enjoy,
-e

#3

Thank you for the references, I’ll study how does your timer work and maybe replace my code with your plugin.

But still, what would that _caninical_uri be? Should the file be stored somewhere outside TiddlyWiki, or could it live in a tiddler with appropriate mime type? And if the latter holds, how to get its uri?

#4

HI krvkir have a look at this:
https://tiddlywiki.com/#Audio:Audio%20HelloThere%20GettingStarted%20Community

#6

Maybe you can use the same technique recommended by Jeremy for videos to access the raw base 64 data of the mp3

#7

@duarte.framos Yes, that’s it!

So, to autoplay a sound stored in a tiddler (e.g., “MySound.mp3”) with TiddlyTools/Time/CountDown:

\define done() <audio autoplay src=`data:audio/mp3;base64,${ [{MySound.mp3}] }$`/>
{{||TiddlyTools/Time/CountDown}}

-e

#8

Pretty newbie here - but you can embed mp3 by saving a file beside your wiki, then set the cannonical_uri with the file path.

e.g. if my wiki is in ~/Downloads, and the mp3 file is ~/Downloads/Sounds/file.mp3

Set the tiddler type to audio/mp3 and the cannonical url to file:Sounds/file.mp3

Note files outside the Downloads folder can be an issue

#9

I think the raw data, @EricShulman correct me if I’m wrong here, can be pulled as plain text by using {{MyMp3Tiddler!!text}} as if I’m not mistaken the “blob” is stored in the tiddler text field so the <audio src={{MyMp3Tiddler!!text}}> could theoretically work, however it may need to be wikified. I’m unsure

#10

The “blob” in the tiddler’s text field does not contain the needed data:audio/mp3;base64, URI prefix. Thus, transcluding just the text field would result in a malformed src URI.

Also, here’s a small improvement on my previous response to allow any audio MIME type to be used:

<audio autoplay src=`data:${ [{MySound!!type}] }$;base64,${ [{MySound}] }$`/>

Note: Older versions of TiddlyWiki (before v5.3.0, released 1st July 2023), do not include support for the “backtick parameter parsing” syntax. To achieve the same results in those TiddlyWikis, you can use the following to construct the necessary URI:

<audio autoplay src={{{ [[data:]] [{MySound!!type}] [[;base64,]] [{MySound}] +[join[]] }}}/>

Lastly, for convenience you can create a global macro by creating a tiddler (e.g., “PlaySound”), tagged with $:/tags/Macro, containing

\define playsound(tid)
<audio autoplay src={{{ [[data:]] [[$tid$]get[type]] [[;base64,]] [[$tid$]get[text]] +[join[]] }}}/>
\end

which you can then use in any tiddler content like this: <<playsound "tiddlername">>

Note that I have used the \define and $param$ macro syntax, as well as the $:/tags/Macro tag value. This ensures that the <<playsound>> macro is 100% backward-compatible with older versions of TiddlyWiki.

enjoy,
-e

1 Like
#11

Follow-up:

I have just added a new <<playsound>> macro definition to TiddlyTools:

see TiddlyTools/Macros/PlaySound and TiddlyTools/Macros/PlaySound/Info

It handles references to any of the following:

  • A tiddler containing base64-encoded binary audio data
  • A tiddler containing a _canonical_uri reference to a local external audio file or remote URL
  • A direct reference to a local external audio file or remote URL

It also supports an optional parameter to specify HTML <audio> element options (e.g., “autoplay”, “controls”, “loop”, etc.). If no parameters are specified, it defaults to “autoplay”.

I’ve also updated TiddlyTools/Time/CountDown so it can correctly use custom macros in the standard “message” input or a custom done() macro.

Thus, returning to the original discussion, to have a count down timer that autoplays an embedded sound when it reaches 00:00:00, you can copy the following tiddlers to your TiddlyWiki:

Then, create a tiddler (e.g., “MyCountdown”) containing the following text:

\define done() <<playsound "MySound">>
{{||TiddlyTools/Time/CountDown}}

enjoy,
-e

1 Like
#12

I think that there’s a decent MediaPlayer Plugin for this, kinda seems like it matches what your after, assuming you want to play sounds with a pause back and stop fearure. Not sure if it has a hidden ui mode or autoplay feature though