forked from hvianna/audioMotion-analyzer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (59 loc) · 3.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>audioMotion-analyzer demos</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | interactive demos</h1>
<ul class="header-nav">
<li><a href="https://audiomotion.dev">Home</a></li>
<li><a href="https://github.com/hvianna/audioMotion-analyzer">View on GitHub</a></li>
</ul>
</header>
<p> </p>
<div class="gallery">
<ul class="gallery-internal">
<li><img src="media/discrete.png" title="Discrete frequencies">
<li><img src="media/radial.png" title="Radial spectrum">
<li><img src="media/dual.png" title="Dual channel combined Graph">
<li><img src="media/leds.png" title="LED bars">
<li><img src="media/lumibars.png" title="LumiBars effect">
<li><img src="media/reflex.png" title="Round bars + Reflex effect">
<li><img src="media/discrete.png" title="Discrete frequencies">
<li><img src="media/radial.png" title="Radial spectrum">
<li><img src="media/dual.png" title="Dual channel combined Graph">
<li><img src="media/leds.png" title="LED bars">
<li><img src="media/lumibars.png" title="LumiBars effect">
<li><img src="media/reflex.png" title="Round bars + Reflex effect">
</ul>
</div>
<p><strong>Note:</strong> these demos won't work if loaded via <code>file://</code> protocol. See the README file inside the <code>demo/</code> folder for more information.</p>
<h2><a href="minimal.html">▶ Minimal demo</a></h2>
<ul>
<li>A simple demo on how to create and destroy <em>audioMotion-analyzer</em> instances;</li>
<li>Uses a live stream as audio source (note: streams currently do <strong>NOT</strong> work on <strong>Safari</strong> - see the <a href="https://audiomotion.dev/#/?id=known-issues">known issues</a>).</li>
</ul>
<h2><a href="fluid.html">▶ Fluid layout demo</a></h2>
<ul>
<li>Try all configuration options in real time - resize the window and the analyzer adjusts itself for best resolution (see console for events);</li>
<li>Example usage of microphone input;</li>
<li>An additional frequency oscillator node is connected to the analyzer for generating test tones;</li>
<li>A callback function is used to add custom features using the analyzer data.</li>
</ul>
<h2><a href="multi.html">▶ Multiple instances demo</a></h2>
<ul>
<li>Three analyzer instances share the same audio source and <em>AudioContext</em>, but each has its own configuration settings.</li>
</ul>
<h2><a href="overlay.html">▶ Overlay demo</a></h2>
<ul>
<li><em>audioMotion-analyzer</em> is connected to a <code><video></code> element and displayed over it with semi-transparent background;
<li>Fullscreen is handled on the parent container element.</li>
</ul>
<p>For more demos, check our <a href="https://codepen.io/collection/ABbbKr">CodePen collection</a>.</p>
</body>
</html>