You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
+ Song info may now be displayed continuously (no fade-out), and also at the **end of the song**; display times are now customizable in the Config panel;
16
+
+ The display of album covers in song info is now optional;
17
+
+ Options to upload a local file and to load a song from an URL are now always available, not only in local file mode;
18
+
+ Hold the previous/next player buttons (or left/right arrow keys) to rewind/fast-foward the current song;
19
+
+ Frequency and level scales are now toggled via independent **SCALE X** and **SCALE Y** switches;
20
+
+ The size of scale labels on both axes is now scaled relatively to the canvas height;
21
+
+ Added timestamp to console messages and a button to clear the console;
22
+
+ Added a keyboard shortcut (**C**) for toggling **Radial** visualization;
23
+
+**Shortcut changes:**
24
+
+**Up** and **down arrow** keys are now used to control the **volume** - for gradient selection use **G** or **Shift+G**;
25
+
+**J** and **K** keys still work as alternate shortcuts to previous/next song, but are no longer documented and may be reassigned in the future;
26
+
+ Clicks on canvas now display song information (same behavior as the **D** key);
27
+
+ Updated documentation website.
28
+
29
+
### Fixed:
30
+
31
+
+ Clicks on switches not being properly detected sometimes;
32
+
+ Random mode not working when audio source was set to microphone;
33
+
+ An unexpected error message when deleting the last song from the queue.
34
+
35
+
9
36
## version 20.9 :mask:
10
37
11
38
This is a minor update to address two bugs:
@@ -18,14 +45,14 @@ This is a minor update to address two bugs:
18
45
19
46
### Added:
20
47
21
-
+ New [Radial visualization](docs/user-interface.md#mode-switches) for all modes;
22
-
+ Option to display [level (dB) scale](docs/user-interface.md#scale) on vertical axis;
23
-
+ New [**Demo** preset](docs/user-interface.md#preset).
48
+
+ New [Radial visualization](docs/README.md#radial) for all modes;
49
+
+ Option to display [level (dB) scale](docs/README.md#switches) on vertical axis;
50
+
+ New [**Demo** preset](docs/README.md#preset).
24
51
25
52
### Changed:
26
53
27
-
+ Improved the background image [**Pulse**](docs/user-interface.md#image-fit) effect to look more synced regardless of music style;
28
-
+ Any image located in the song's folder can now be used as album cover when a picture is not found in the song metadata (see the [documentation](docs/user-interface.md#background) for filename precedence).
54
+
+ Improved the background image [**Pulse**](docs/README.md#image-fit) effect to look more synced regardless of music style;
55
+
+ Any image located in the song's folder can now be used as album cover when a picture is not found in the song metadata (see the [documentation](docs/README.md#background) for filename precedence).
29
56
30
57
### Fixed:
31
58
@@ -39,7 +66,7 @@ This is a minor update to address two bugs:
39
66
+**Album cover image** retrieved from the song metadata or from a file named *cover* or *folder* (.jpg|png|gif|bmp) inside each folder
40
67
is now shown in the file explorer background, the on-screen song information and, optionally, in the analyzer background;
41
68
42
-
+ New [Background](docs/user-interface.md#background), [Image Fit](docs/user-interface.md#image-fit) and [Image Dim](docs/user-interface.md#image-dim) settings.
69
+
+ New [Background](docs/README.md#background), [Image Fit](docs/README.md#image-fit) and [Image Dim](docs/README.md#image-dim) settings.
**audioMotion.js** is a high-resolution real-time audio spectrum analyzer and full-featured music player written in JavaScript.
6
+
**audioMotion** is a high-resolution real-time audio spectrum analyzer and full-featured music player written in JavaScript.
15
7
16
8
The spectrum analyzer module is also available as a [standalone project](https://github.com/hvianna/audioMotion-analyzer) and a zero-dependency [npm package](https://www.npmjs.com/package/audiomotion-analyzer) you can use in your own JavaScript projects!
17
9
18
10
## Features
19
11
20
-
* High-resolution (retina / HiDPI ready) real-time audio spectrum analyzer with fullscreen support
[▶ **TRY THE LIVE DEMO**](https://audiomotion.me/public/)
36
28
37
-
The demo allows you to play audio files from your PC, load songs and streams from remote URLs and use the microphone input.
29
+
The demo allows you to play audio files from your PC, remote files and streams via URL and use the microphone input.
38
30
The file explorer is not available, since there are no media files hosted on the demo server.
39
31
40
-
Also check out our [▶ **YouTube channel**](https://channel.audiomotion.io) for videos of some cool songs visualized with audioMotion!
32
+
Also check out our [▶ **YouTube channel**](https://channel.audiomotion.io) for some cool songs visualized with audioMotion!
41
33
42
-
## Download
34
+
## Getting started
43
35
44
36
Download the latest version from the [**releases page**](https://github.com/hvianna/audioMotion.js/releases/latest). Portable binaries are available for Windows, Linux and macOS.
45
37
@@ -65,39 +57,46 @@ The complete command line options are:
65
57
⚠ **WARNING:**<br>
66
58
Please be aware that the `-e` flag will expose the contents of the mounted folder to anyone in your network (and potentially to the entire internet!) — use it only if you're in a trusted network and behind a firewall!
67
59
68
-
## Documentation
60
+
## Screenshots
69
61
70
-
+[User interface](docs/user-interface.md)
71
-
+[Server modes](docs/server.md)
72
-
+[Building audioMotion](docs/building.md)
73
-
+[Legacy features](docs/legacy.md)
62
+
63
+
*[Discrete frequencies](docs/README.md#mode) mode. User interface: [main function buttons](docs/README.md#main-function-buttons), [audio source](docs/README.md#audio-source) selector, [player controls](docs/README.md#player-controls), [volume control](docs/README.md#volume-control) and [file explorer](docs/README.md#file-explorer-and-play-queue).*
74
64
75
-
For full documentation summary, see the [docs folder](docs/).
65
+
---
76
66
77
-
## Screenshots
67
+
68
+
*1/4th-octave bands with LED effect, extra wide [bar spacing](docs/README.md#bar-spacing) and on-screen song information. User interface shows the [settings panel](docs/README.md#settings-panel) open.*
78
69
79
-
Discrete frequencies mode. User interface showing the file explorer and play queue.
80
-
![screenshot1](docs/img/screenshot1.png"Discrete frequencies mode. User interface showing the file explorer and play queue.")
70
+
---
81
71
82
-
1/4th-octave bands with LED effect, extra wide bar spacing and on-screen song information. User interface showing the settings panel.
83
-
![screenshot2](docs/img/screenshot2.png"1/4th-octave bands mode, extra wide bar spacing, with LED effect and on-screen song information. User interface showing the settings panel.")
72
+
73
+
*Fullscreen view: 1/6th-octave bands, regular bar spacing, "Outrun" gradient, [Reflex](docs/README.md#reflex)effect and complete on-screen information.*
84
74
85
-
Fullscreen 1/6th-octave bands, regular bar spacing, 30Hz-16KHz, "Outrun" gradient, Reflex effect and complete on-screen information.
86
-
![screenshot3](docs/img/screenshot3.png"Fullscreen 1/6th-octave bands, Regular bar spacing, 30Hz-16KHz, 'Outrun' gradient, Reflex effect and complete on-screen information")
75
+
---
87
76
88
-
Fullscreen Line graph, 20Hz-22KHz, frequency and level scales on, "Rainbow" gradient.
89
-
![screenshot6](docs/img/screenshot6.png"Fullscreen Line graph mode, 20Hz-22KHz, frequency and level scales on, 'Rainbow' gradient")
77
+
78
+
*Fullscreen view: [Stereo](docs/README.md#switches)Line graph, frequency and level scales on, "Rainbow" gradient.*
90
79
91
-
Fullscreen 1/8th-octave bands with Luminance bars effect, 30Hz-16KHz, frequency scale on, "Tie Dye" gradient.
92
-
![screenshot5](docs/img/screenshot5.png"Fullscreen 1/8th-octave bands mode with Luminance bars effect, 30Hz-16KHz, frequency scale on, 'Tie Dye' gradient")
80
+
---
93
81
94
-
Fullscreen Radial 1/6th-octave bands with frequency scale on, "Apple ][" gradient.
95
-
![screenshot7](docs/img/screenshot7.png"Fullscreen Radial 1/6th-octave bands mode with frequency scale on, 'Apple ][' gradient")
82
+
83
+
*Fullscreen view: 1/8th-octave bands, [LUMI effect](docs/README.md#effects) on, "Tie Dye" gradient.*
84
+
85
+
---
86
+
87
+
88
+
*Fullscreen view: 1/6th-octave bands, [Radial](docs/README.md#radial) analyzer, frequency scale on, "Apple ][" gradient.*
89
+
90
+
## Documentation
91
+
92
+
For complete documentation, see the [docs](docs/README.md) folder.
96
93
97
94
## Credits and acknowledgments
98
95
99
96
**audioMotion** was largely inspired by [Soniq Viewer for iOS](https://itunes.apple.com/us/app/soniq-viewer/id448343005), by Yuji Koike.
100
97
98
+
The documentation website is powered by [GitHub Pages](https://pages.github.com/), [docsify](https://docsify.js.org/) and [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable).
99
+
101
100
### JavaScript libraries
102
101
103
102
Some of audioMotion's great features are provided by these awesome open-source libraries:
@@ -117,12 +116,17 @@ Some of audioMotion's great features are provided by these awesome open-source l
117
116
118
117
### Graphic resources
119
118
119
+
* The font used in audioMotion's logo is [Orbitron](https://fonts.google.com/specimen/Orbitron) by Matt McInerney
120
+
* Icons provided by [icons8](https://icons8.com) licensed under [Creative Commons Attribution-NoDerivs 3.0 Unported](https://creativecommons.org/licenses/by-nd/3.0/)
121
+
*[Mouse scroll icon](https://thenounproject.com/term/mouse-scroll/628146/) by Viktor Ostrovsky, licensed under [Creative Commons CCBY](https://creativecommons.org/licenses/by/3.0/us/legalcode)
120
122
* Gradients [*Candy*](https://gradienthunt.com/gradient/172), [*Miami*](https://gradienthunt.com/gradient/950), [*Outrun*](https://gradienthunt.com/gradient/317) and [*Tie Dye*](https://gradienthunt.com/gradient/969) from [Gradient Hunt](https://gradienthunt.com)
121
123
* Gradients *Pacific Dream*, *Shahabi*, *Summer* and *Sunset* from [uiGradients](https://uigradients.com)
122
124
* The *Apple ][* gradient was created based on [this post](https://creativemarket.com/blog/6-famous-logos-with-great-color-schemes) by Creative Market
123
125
* Gradients used in the UI buttons are from [ColorZilla's Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)
124
-
* The audioMotion logo uses the [Orbitron font](https://fonts.google.com/specimen/Orbitron) by Matt McInerney
125
-
* Icons provided by [icons8](https://icons8.com) licensed under [Creative Commons Attribution-NoDerivs 3.0 Unported](https://creativecommons.org/licenses/by-nd/3.0/)
126
+
*[CSS3 inset text shadow](https://codepen.io/adambundy/pen/HtmaK) by Adam Bundy
127
+
*[CSS slider switches](https://codepen.io/billyysea/pen/CHmiE) by Billy
128
+
* Radial brushed metal texture taken from [this pen](https://codepen.io/GreenSock/pen/gnoDc) by GreenSock
129
+
* Volume knob design based on [Dark dial](https://codepen.io/stormwarning/pen/yNGeMm) by Jeff
126
130
127
131
### References
128
132
@@ -135,9 +139,7 @@ These online references were invaluable for the development and improvement of a
135
139
*[HTML5 check if audio is playing?](https://stackoverflow.com/a/46117824/2370385)
136
140
*[Unlocking Web Audio — the smarter way](https://hackernoon.com/unlocking-web-audio-the-smarter-way-8858218c0e09)
137
141
*[Equations for equal-tempered scale frequencies](http://pages.mtu.edu/~suits/NoteFreqCalcs.html)
138
-
*[Efficient case-insensitive sorting in JavaScript](https://stackoverflow.com/a/40390844/2370385)
139
-
*[Fastest way to find the index of a child node in parent](https://stackoverflow.com/a/13657635/2370385)
140
-
142
+
* Pure CSS modal windows based on [this pen](https://codepen.io/timothylong/pen/HhAer) by Timothy Long and [CSS Modal](https://drublic.github.io/css-modal/) by Hans Christian Reinl
0 commit comments