|
@@ -30,7 +30,6 @@ View the documentation of previous major releases: [2.0.1](https://github.com/Sv
|
|
|
- [openInNewTab()](#openinnewtab) - open a link in a new tab
|
|
|
- [interceptEvent()](#interceptevent) - conditionally intercepts events registered by `addEventListener()` on any given EventTarget object
|
|
|
- [interceptWindowEvent()](#interceptwindowevent) - conditionally intercepts events registered by `addEventListener()` on the window object
|
|
|
- - [amplifyMedia()](#amplifymedia) - amplify an audio or video element's volume past the maximum of 100%
|
|
|
- [isScrollable()](#isscrollable) - check if an element has a horizontal or vertical scroll bar
|
|
|
- [**Math:**](#math)
|
|
|
- [clamp()](#clamp) - constrain a number between a min and max value
|
|
@@ -649,101 +648,6 @@ interceptWindowEvent("beforeunload");
|
|
|
|
|
|
<br>
|
|
|
|
|
|
-### amplifyMedia()
|
|
|
-Usage:
|
|
|
-```ts
|
|
|
-amplifyMedia(mediaElement: HTMLMediaElement, initialGain?: number): AmplifyMediaResult
|
|
|
-```
|
|
|
-
|
|
|
-Amplifies the volume of a media element (like `<audio>` or `<video>`) by the given gain value.
|
|
|
-This is how you can increase the volume of a media element beyond the default maximum volume of 100%.
|
|
|
-Make sure to limit the value to a reasonable value ([clamp()](#clamp) is good for this), as it may otherwise cause bleeding eardrums.
|
|
|
-
|
|
|
-The default gain value passed to the GainNode is `1.0`
|
|
|
-It may be read and changed at any point by calling the `getGain()` and `setGain()` methods of the returned object.
|
|
|
-
|
|
|
-To activate the amplification for the first time, call the `enable()` method of the returned object.
|
|
|
-
|
|
|
-This is the processing workflow applied to the media element:
|
|
|
-`MediaElement (source)` => `GainNode (pre-amplifier)` => 10x `BiquadFilterNode` => `GainNode (post-amplifier)` => `destination`
|
|
|
-
|
|
|
-⚠️ This function has to be run in response to a user interaction event, else the browser will reject it because of the strict autoplay policy.
|
|
|
-⚠️ Make sure to call the returned function `enable()` after calling this function to actually enable the amplification.
|
|
|
-
|
|
|
-The returned object of the type `AmplifyMediaResult` has the following properties:
|
|
|
-**Important properties:**
|
|
|
-| Property | Description |
|
|
|
-| :-- | :-- |
|
|
|
-| `enable()` | Call to enable the amplification for the first time or re-enable it if it was disabled before |
|
|
|
-| `disable()` | Call to disable amplification |
|
|
|
-| `enabled` | Whether the amplification is currently enabled |
|
|
|
-| `setGain()` | Used to change the gain value from the default given by the parameter `initialGain` |
|
|
|
-| `getGain()` | Returns the current gain value |
|
|
|
-
|
|
|
-**Other properties:**
|
|
|
-| Property | Description |
|
|
|
-| :-- | :-- |
|
|
|
-| `context` | The AudioContext instance used as the audio destination and context within the nodes are created |
|
|
|
-| `sourceNode` | A MediaElementSourceNode instance created from the passed `mediaElement` |
|
|
|
-| `gainNode` | The GainNode instance used for volume amplification |
|
|
|
-
|
|
|
-<br>
|
|
|
-
|
|
|
-<details><summary><b>Example - click to view</b></summary>
|
|
|
-
|
|
|
-```ts
|
|
|
-import { amplifyMedia, clamp } from "@sv443-network/userutils";
|
|
|
-import type { AmplifyMediaResult } from "@sv443-network/userutils";
|
|
|
-
|
|
|
-const audioElement = document.querySelector<HTMLAudioElement>("audio");
|
|
|
-
|
|
|
-let ampResult: AmplifyMediaResult | undefined;
|
|
|
-
|
|
|
-function updateGainValue(gainValue: number) {
|
|
|
- if(!ampResult)
|
|
|
- return;
|
|
|
- // constrain the value to between 0 and 3 for safety
|
|
|
- ampResult.setGain(clamp(gainValue, 0, 3));
|
|
|
-
|
|
|
- console.log("Gain set to", ampResult.getGain());
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-const amplifyButton = document.querySelector<HTMLButtonElement>("button#amplify");
|
|
|
-
|
|
|
-// amplifyMedia() needs to be called in response to a user interaction event:
|
|
|
-amplifyButton.addEventListener("click", () => {
|
|
|
- // only needs to be initialized once, afterwards the returned object
|
|
|
- // can be used to change settings and enable/disable the amplification
|
|
|
- if(!ampResult) {
|
|
|
- // initialize amplification and set it to ~2x
|
|
|
- ampResult = amplifyMedia(audioElement, 2.0);
|
|
|
- }
|
|
|
- if(!ampResult.enabled) {
|
|
|
- // enable the amplification
|
|
|
- ampResult.enable();
|
|
|
- }
|
|
|
-
|
|
|
- updateGainValue(3.5); // try to set gain to ~3.5x
|
|
|
-
|
|
|
- console.log(ampResult.getGain()); // 3.0 (because of the clamp())
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-const disableButton = document.querySelector<HTMLButtonElement>("button#disable");
|
|
|
-
|
|
|
-disableButton.addEventListener("click", () => {
|
|
|
- if(ampResult) {
|
|
|
- // disable the amplification
|
|
|
- ampResult.disable();
|
|
|
- }
|
|
|
-});
|
|
|
-```
|
|
|
-
|
|
|
-</details>
|
|
|
-
|
|
|
-<br>
|
|
|
-
|
|
|
### isScrollable()
|
|
|
Usage:
|
|
|
```ts
|