version 24.6

README.md

@@ -5,37 +5,42 @@ It is completely free, open-source software, created out of my passion for the g
 
 [![GitHub release](https://img.shields.io/github/release/hvianna/audioMotion.js.svg)](https://github.com/hvianna/audioMotion.js/releases/latest)
 [![GitHub Release Date](https://img.shields.io/github/release-date/hvianna/audioMotion.js.svg)](https://github.com/hvianna/audioMotion.js/releases/latest)
+[![web app](https://img.shields.io/badge/audioMotion.app-5A0FC8?style=flat&logo=PWA)](https://audiomotion.app)
 
 ## Features
 
 ![screenshot2](docs/img/screenshot2.png)
 
 * Dual channel high-resolution real-time audio spectrum analyzer
-* Fullscreen and Picture-In-Picture support at 60fps, ready for retina / HiDPI displays
+* Media player with subtitles support for audio and video files
+* Fullscreen and Picture-In-Picture display at 60fps, ready for Retina / HiDPI screens
 * Logarithmic, linear and perceptual (Bark and Mel) frequency scales, with customizable range
 * Visualization of discrete FFT frequencies or up to 240 frequency bands (supports ANSI and equal-tempered octave bands)
 * Decibel and linear amplitude scales, with customizable sensitivity
 * Optional A, B, C, D and ITU-R 468 weighting filters
-* Optional effects: vintage LEDs, variable opacity, mirroring and reflection, radial visualization
+* Optional effects: vintage LEDs, variable opacity, mirroring and reflection, radial spectrum
 * 17 beautiful color gradients, plus a visual editor to easily create your own gradients
-* HTML5 audio player for MP3, AAC (m4a), OGG and FLAC files (support may vary depending on browser and operating system)
-* Visual file explorer and play queue with drag-and-drop functionality
-* Support for M3U playlists (`m3u` and `m3u8` file extensions)
+* Support for M3U playlists (.m3u and .m3u8 file extensions)
 * Visualize audio from your microphone (or "stereo mix", if your soundcard supports it)
 
 > **For developers:**<br>
 > Check out [**audioMotion-analyzer**](https://audiomotion.dev) for easy integration of audioMotion's full-featured spectrum analyzer into your own Javascript projects!
 
 ## Access the web app
 
-<a href="https://audiomotion.app" target="_blank" title="open web app"><img src="https://img.shields.io/badge/audioMotion.app-ff3e37?style=flat" height="48"></a>
+<a href="https://audiomotion.app" target="_blank" title="open web app"><img src="https://img.shields.io/badge/audioMotion.app-5A0FC8?style=flat&logo=PWA" height="48"></a>
 
-**Use a Chromium-based browser to be able to play media files from your hard drive.**<br>
-Works on Chrome, Opera and Edge by default. On Brave you'll need to enable this feature in `chrome://flags/#file-system-access-api`.
+**Use a Chromium-based browser to be able to play media files from your hard drive.** Works on Chrome, Opera and Edge by default.
+
+**On Brave browser,** access `chrome://flags/#file-system-access-api` to enable this feature.
+
+Install audioMotion on your PC by clicking the install icon located in the browser's address bar:
+
+![browser-install](img/browser-install.png)
 
 ## Documentation
 
-* See the [docs/](docs/) folder or the [online documentation](https://audiomotion.app/docs)
+See the [online documentation](https://audiomotion.app/docs).
 
 ## Contributing
 

docs/Changelog.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## version 24.6
+
+### Added: <!-- {docsify-ignore} -->
+
++ [**Subtitles support**](users-manual#subtitles) for video and audio files - [suggested](https://github.com/hvianna/audioMotion.js/discussions/50) by **@JesusGod-Pope666-Info**;
++ Track progress and quick search bar with elapsed and remaining times, below the [player controls](users-manual.md#player-controls);
++ [**Customizable peak settings**](users-manual.md#peaks-behavior): gravity, fade time and hold time;
++ **FADE** switch - toggle peaks fading out instead of falling down (new **Shift-P** keyboard shortcut);
++ Number of audio channels added to the song info - [suggested](https://github.com/hvianna/audioMotion.js/discussions/56) by **@R-W-C**;
++ New [Configuration options](users-manual.md#general-settings) to disable *Background Dim* when playing videos and showing subtitles.
+
+### Changed & improved: <!-- {docsify-ignore} -->
+
++ Track quality information now always shows the **bitrate** for lossy formats and the **bit depth** for lossless tracks;
++ New layout for the Config Panel;
++ Better app icon for macOS (you may need to [uninstall and reinstall](README.md#installing-and-uninstalling) the app to update the icon).
+
+### Fixed: <!-- {docsify-ignore} -->
+
++ Media panel auto-hide being triggered when entering fullscreen;
++ Peak amplitudes reset by Randomize changes;
++ Keyboard shortcuts triggered when Windows / Command key was pressed (system shortcuts);
++ Saved playqueue not being updated after loading an internal playlist.
+
+
 ## version 24.4
 
 Maintenance update with some improvements and bug fixes.

docs/README.md

@@ -5,11 +5,15 @@
 > **audioMotion** is a media player and high-resolution real-time audio spectrum analyzer that allows you to **SEE your music!** ♪♫🤩<br>
 > It is completely free, open-source software, created out of my passion for the graphic spectrum analyzers of hi-fi systems from the 1980s.
 
+<a href="https://audiomotion.app" target="_blank"><img src="https://img.shields.io/badge/audioMotion.app-5A0FC8?style=flat&logo=PWA" height="36"></a>
+<a href="https://github.com/hvianna/audioMotion.js" target="_blank"><img src="https://img.shields.io/badge/audioMotion.js-black?style=flat&logo=GitHub" height="36"></a>
+<a href="https://youtube.com/@audioMotionJS" target="_blank"><img src="https://img.shields.io/badge/%40audioMotionJS-red?style=flat&logo=YouTube" height="36"></a>
+
 ## Features
 
 * Dual channel high-resolution real-time audio spectrum analyzer
-* Multimedia player lets you use images and videos as backgrounds to your music, or watch music videos with the spectrum analyzer on top
-* Fullscreen and Picture-In-Picture support at 60fps, ready for retina / HiDPI displays
+* Media player with subtitles support for audio and video files
+* Fullscreen and Picture-In-Picture display at 60fps, ready for Retina / HiDPI screens
 * Logarithmic, linear and perceptual (Bark and Mel) frequency scales, with customizable range
 * Visualization of discrete FFT frequencies or up to 240 frequency bands (supports ANSI and equal-tempered octave bands)
 * Decibel and linear amplitude scales, with customizable sensitivity
@@ -23,21 +27,27 @@
 
 ## Getting started
 
-Click the button below to open the web app:
+Open the web app:
+
+<a href="https://audiomotion.app" target="_blank"><img src="https://img.shields.io/badge/audioMotion.app-5A0FC8?style=flat&logo=PWA" height="48"></a>
+
+**Use a Chromium-based browser to be able to play media files from your hard drive.** Works on Chrome, Opera and Edge by default.
 
-<a href="https://audiomotion.app" target="_blank"><img src="https://img.shields.io/badge/audioMotion.app-ff3e37?style=flat" height="48"></a>
+**On Brave browser,** access `chrome://flags/#file-system-access-api` to enable this feature.
 
-**Use a Chromium-based browser to be able to play media files from your hard drive.**<br>
-Works on Chrome, Opera and Edge by default. On Brave, access `chrome://flags/#file-system-access-api` to enable this feature.
+### Installing and uninstalling
 
-**You can install audioMotion on your PC by clicking the install icon in the browser's address bar, shown below:**
+Install audioMotion on your PC by clicking the install icon located in the browser's address bar, as shown below:
 
 ![browser-install](img/browser-install.png)
 
-If you don't have any music files at hand, the app also includes a few songs and some online radio streams.<br>
-Click the [**Switch to Server**](users-manual.md#media-panel) button to browse server-hosted content.
+To uninstall, click the three-line menu (☰) in the app window and choose "Uninstall audioMotion...".
+
+![uninstall](img/uninstall.png)
+
+When uninstalling you'll have the option to also **delete app data -- this will erase all your settings, custom presets, gradients and saved playlists!**
 
-Also check out our [**YouTube channel**](https://youtube.com/@audioMotionJS) for some cool songs visualized with audioMotion!
+On Windows, you can also uninstall via Control Panel.
 
 ?> See the [User's Manual](users-manual.md) for the complete documentation of audioMotion's features and settings.
 

docs/screenshots.md

@@ -1,13 +1,13 @@
 # Screenshots
 
 ![screenshot1](img/screenshot1.png)
-*User interface showing the analyzer in **Discrete frequencies** mode, player control panel and media panel (file explorer and play queue).*
+*User interface showing the analyzer in **Discrete frequencies** mode (using the **Bark** frequency scale), player control panel and media panel.*
 
 ![screenshot2](img/screenshot2.png)
 *Analyzer set to 1/4th-octave bands mode with LEDS effect and on-screen song information. The **Settings** panel is shown open over the media panel.*
 
 ![screenshot4](img/screenshot4.jpg)
-*Video playback, auto-hidden media panel, analyzer set to Area graph mode, "Rainbow" gradient, Linear amplitude and Notes scale.*
+*Video playback with subtitles, hidden media panel, analyzer set to Area graph mode, "Rainbow" gradient, Linear amplitude and Notes scale.*
 
 ![screenshot3](img/screenshot3.png)
 *Fullscreen view: 1/6th-octave bands, "Outrun" gradient, Reflex effect and complete on-screen information.*

docs/styles.css

@@ -69,6 +69,15 @@ strong code {
 	font-weight: 700;
 }
 
+.img-center {
+	display: block;
+	margin: 0 auto;
+}
+.img-right {
+	float: right;
+	margin: 1em 0 1em 1em;
+}
+
 .sidebar > h1 .app-name-link {
 	background: var(--audioMotion-gradient);
 	background-clip: text;
@@ -232,5 +241,5 @@ p ~ .table-wrapper table {
 .active.highlight-switches {
 	--top: 2px;
 	--left: 635px;
-	--height: 250px;
+	--height: 270px;
 }