HelpTools

Option 1: Django helptools.
If you are using Django, you can use the server-side version of HelpTools: pip install helptools Add it to installed apps in settings.py:

INSTALLED_APPS = [
    'django.contrib.admin'
    'django.contrib.auth'
    ...........
    'helptools'
]
			

Then to urls.py:

urlpatterns = [
    path('admin/' admin.site.urls),
    path('hlptls/' include('helptools.urls'))
]
			

And after that into the template:

!DOCTYPE html
{% load helpTags %} Loading HelpTools Tags
html lang
head
    meta charset
    meta name content
    titleDocument/title
    {% help_tools_load %} Loading helpTools.js itself, works even without setting up static files
...........

Done! You can now use the HelpTools!

Option 2: cdn/jsdelivr https://cdn.jsdelivr.net/gh/ElouLeol/helpTools@main/helpTools.min.js

Option 3: Straight download.
You can download helpTools.js and use script to connect it.

VoiceRecorder is part of helpTools.js and is used for... voice recording. If you have the django version of helpTools installed, you can use the {% recorder %} tag.
It has a required "id" argument - it will eventually become a JavaScript variable.
You can set your image to it using the "image" argument
and also set the JS function to be executed at the end of the recording using the "onstop" argument. Here's how to do it using only JavaScript (and helpTools, of course):

let Rec = new VoiceRecorder; Create new VoiceRecorder
The recordOnclick method will allow you to start and end recording with a single button.
Rec.recordOnclick('#identifier' function(blob) {
    The first argument that the function takes is the button that will activate the recording,
    The second argument is the function that will be executed at the end of the recording, 
    the result in the Blob format is passed to it
});

Also, you can start and stop recording manually:

Start recording:
Rec.startRec()
Stop recording:
Rec.stopRec()

The record itself after that will be in the variables Rec.recBlob and Rec.recForm

Usage: helpTools.htmlEscape(String, Array) This function escapes HTML.
The first argument is a string, it will be escaped
(“<” will be converted to “&lt;”, “"” to “&quot;” and etc.) The second argument is aт array of allowed characters and words
For example, if you pass there ['<i>', '</i>'],
the string “<i><a href="/">Italic</a></i>”
will be turned into <i>&lt;a href=&quot;/&quot;&gt;Italic&lt;/a&gt;</i>. This is how it will look: <a href="/">Italic</a>

Usage: helpTools.htmlUnescape('string') This function is the opposite of htmlEscape,
“&lt;” will be converted to “<”, “&quot;” to “"” and etc.

Usage: helpTools.prepChild('selector', 'html') This function converts a string to an html element and prepend it to another element. In fact, this is a short version of this entry:
document.querySelector('selector').insertAdjacentHTML('html', 'afterBegin')

Usage: helpTools.getCookie('CookieName') This function just returns the content of the cookie.

Usage: helpTools.syncGet('url') This function makes a synchronous GET request and returns the received response.

Usage: helpTools.anim('selector', onstop) The first argument takes the selector of the element for which you want to start the animation, the second argument takes the function to be executed when the animation ends. However, it is not necessary to pass a function, for some actions there are keywords:

After this animation, the element will be removed:
helpTools.anim('selector' 'delete').fade('in' 0.15);
Equivalent to this entry:
helpTools.anim('selector' function() {
    document.querySelector('selector').remove();
}).fade('in' 0.15);
After this animation, the element will be hidden:
helpTools.anim('selector' 'hide').fade('in' 0.15);

Usage: helpTools.anim('selector').fade('direction', duration) The first argument is the direction, if 'in', then the element will disappear, if 'out', then it will appear. The second argument is the animation duration, specified in seconds, default is 0.5. Example:

Usage: helpTools.anim('selector').flip(duration) The duration of the animation is passed to the function,
specified in seconds, by default - 0.5. Example:

Usage/creation: let timer = new helpTools.timer('selector') If you have the django version of helpTools installed,
you can use the {% timer %} tag.
It has a required "id" argument - it will eventually become a JavaScript variable.
You can change the tag for it using the "tag" argument. (By default, this is span),
And also set the css classes using the "classes" argument.
And if auto_run is True, then stopwatch will automatically run on page load. After creation, you can control the stopwatch:

Start:
timer.start()
Pause (You can run it again via timer.start ()):
timer.pause()
Reset: 
timer.drop()

The "pause" and "drop" methods return the time that the stopwatch has counted in the format '{minutes}: {seconds}'