diff --git a/Changelog.md b/Changelog.md
index 7a3050a..d5eaf76 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -1,6 +1,20 @@
Changelog
=========
+## version 3.4.0 (2021-05-29)
+
+### Added: {docsify-ignore}
+
++ [`fsElement`](README.md#fselement-htmlelement-object) constructor option, for easily handling fullscreen on any element.
+
+### Fixed and improved: {docsify-ignore}
+
++ Fixed radial analyzer too wide in vertical containers;
++ Fixed out of bounds bar in mode 0 (discrete frequencies) with `mirror` set to -1;
++ Improved fullscreen rendering in portrait orientation displays;
++ Improved font size adjustment for scale labels and FPS display on vertical containers.
+
+
## version 3.3.0 (2021-05-03)
### Added: {docsify-ignore}
diff --git a/README.md b/README.md
index 5115be9..c8dbd9f 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,13 @@
## About
-**audioMotion-analyzer** is a high-resolution real-time audio spectrum analyzer module built upon Web Audio and Canvas JavaScript APIs.
+**audioMotion-analyzer** is a high-resolution real-time audio spectrum analyzer module built upon **Web Audio** and **Canvas** JavaScript APIs.
-It's highly customizable, and optimized for high performance and a small file size.
+It was originally conceived as part of a larger project: a full-featured music player called [**audioMotion**](https://audiomotion.me).
+As it started getting some attention, I realized other developers might be interested in using the spectrum analyzer in their own projects,
+so I decided to make it available as a self-contained module.
-I originally wrote it as part of my [**audioMotion**](https://audiomotion.me) music player. Check it out too!
+> **audioMotion-analyzer** is aimed to be the best looking, most customizable spectrum analyzer around, with high accuracy and performance, in a small footprint package!
## Features
@@ -46,7 +48,7 @@ Load from Skypack CDN:
```
-Or download the [latest version](https://github.com/hvianna/audioMotion-analyzer/releases) and copy the `audioMotion-analyzer.js` file from the `src/` folder to your project folder.
+Or download the [latest version](https://github.com/hvianna/audioMotion-analyzer/releases) and copy the `audioMotion-analyzer.js` file from the `src/` folder into your project folder.
### npm project
@@ -85,17 +87,20 @@ const audioMotion = new AudioMotionAnalyzer(
This will insert the analyzer canvas inside the *#container* element and start the visualization of audio coming from the *#audio* element.
-### Options
+### Options object
-Available options and default values:
+Valid properties and default values are shown below.
+
+Properties marked as *constructor only* can only be set by the constructor call, the others can also be set anytime via [`setOptions()`](#setoptions-options-) method.
options = {
- [audioCtx](#audioctx-audiocontext-object-read-only): *undefined*, // constructor only
+ [audioCtx](#audioctx-audiocontext-object): *undefined*, // constructor only
[barSpace](#barspace-number): **0.1**,
[bgAlpha](#bgalpha-number): **0.7**,
[connectSpeakers](#connectspeakers-boolean): **true**, // constructor only
[fftSize](#fftsize-number): **8192**,
[fillAlpha](#fillalpha-number): **1**,
+ [fsElement](#fselement-htmlelement-object): *undefined*, // constructor only
[gradient](#gradient-string): **'classic'**,
[height](#height-number): *undefined*,
[lineWidth](#linewidth-number): **0**,
@@ -131,7 +136,22 @@ options = {
[width](#width-number): *undefined*
}
-### `connectSpeakers` *boolean*
+### Constructor-specific options
+
+#### `audioCtx` *AudioContext object*
+
+*Available since v2.0.0*
+
+Allows you to provide an external [*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext)
+for **audioMotion-analyzer**, for connection with other Web Audio nodes or sound-processing modules.
+
+Since version 3.2.0, `audioCtx` will be automatically inferred from the [`source`](#source-htmlmediaelement-or-audionode-object) property if that's an *AudioNode*.
+
+If none are defined, a new context will be created. After instantiation, [`audioCtx`](#audioctx-audiocontext-object-read-only) will be available as a read-only property.
+
+See [this live code](https://codesandbox.io/s/9y6qb) and the [multi-instance demo](/demo/multi.html) for more usage examples.
+
+#### `connectSpeakers` *boolean*
*Available since v3.2.0*
@@ -150,14 +170,27 @@ Defaults to **true**.
See also [`connectedTo`](#connectedto-array-read-only).
-### `source` *HTMLMediaElement or AudioNode object*
+#### `fsElement` *HTMLElement object*
+
+*Available since v3.4.0*
+
+HTML element affected by the [`toggleFullscreen()`](#togglefullscreen) method.
+
+If not defined, defaults to the [`canvas`](#canvas-htmlcanvaselement-object-read-only).
+**Set it to a container `
` to keep additional interface elements available in fullscreen mode.**
+
+See the [overlay demo](/demo/overlay.html) or [this pen](https://codepen.io/hvianna/pen/LYREBYQ) for usage examples.
+
+After instantiation, [`fsElement`](#fselement-htmlelement-object-read-only) is available as a read-only property.
+
+#### `source` *HTMLMediaElement or AudioNode object*
If `source` is specified, connects an [*HTMLMediaElement*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) object (an `