How do I add custom Javascript libraries?

Questions & Help
1

Hello! I would like to add the AblePlayer JavaScript media player to my Logseq graph so that I can play audio using its custom player.

However, I’m not sure how or where to add the Javascript. I’ve tried using the /html and also downloaded the custom.js plugin.

Typically, when I use AblePlayer on a website, I have to load the following scripts in the head:

<!-- Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="build/ableplayer.min.css" type="text/css"/>

<!-- JavaScript -->
<script src="build/ableplayer.min.js"></script>

Then, in the page itself, I add the following code for audio:

<audio id="audio1" data-able-player preload="auto">
  <source type="audio/ogg" src="path_to_audio_file.ogg"/>
  <source type="audio/mpeg" src="path_to_audio_file.mp3"/>
</audio>

OR for video:

<video id="video1" data-able-player preload="auto" width="480" height="360" poster="path_to_image.jpg">
  <source type="video/webm" src="path_to_video.webm" data-desc-src="path_to_described_video.webm"/>
  <source type="video/mp4" src="path_to_video.mp4" data-desc-src="path_to_described_video.mp4"/>
  <track kind="captions" src="path_to_captions.vtt"/>
  <track kind="descriptions" src="path_to_descriptions.vtt"/>
</video>

How can I translate this code for Logseq?

1 Like
2

I have similar issue to make custom.js valid. I found this plugin, and my custom.js works! Maybe you can try it out!

1 Like
3

Sweet, thank you @charliie ! I’ve decided to use the HTML embed utility to include the scripts (not sure if this will work once the project is exported as a site). I’ll try what you’ve linked to as well.

4

Actually after you update to 0.6.3 or later, you don’t need that plugin anymore.
Logseq will pop-up a dialog asking do you approve to use the custom.js once logseq detected there is one. So just go for it!

5

@charliie @candide where exactly should I place this custom javascript file?

6

@danilofaria I think you’re supposed to create a file called custom.js and place it inside the logseq folder in your graph’s folder. Haven’t tried it though, I ended up giving up on adding a custom library.

7

@danilofaria
image

1 Like
8

thank you, it works!