-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (64 loc) · 3.59 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Waveform.js</title>
<link rel="stylesheet" href="styles.css">
<script defer type="text/javascript" src='./js/Waveform.js'></script>
<script defer type="text/javascript" src='./js/home.js'></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
</head>
<body>
<header id="homeHeader">
<img src="./resources/WaveformJS.png">
<div class="headerAlign"><h1>WaveForm.js</h1></div>
<div id="homeWaveContainer">
<div class="audioControlButton" id="homePlayButton">Play</div>
<div class="audioControlButton" id="homeThemeButton">Color</div>
</div>
</header>
<ul id="navBar">
<li><a class="selectedNav">Home</a></li>
<li><a href="/WaveFormJS/documentation">Documentation</a></li>
<li><a href="/WaveFormJS/examples">Examples</a></li>
</ul>
<div id="contentBody">
<h2><b>WaveForm.js</b> is a customizable audio waveform visualization, built on top of the Web Audio API.</h2>
<p>Users are able to navigate through the music/audio by clicking on the visualizer; other controls
can be designed using the <b>WaveForm.js</b> api.
</p>
<p>Unlike existing audio visualizers, <b>WaveForm.js</b> does not use the HTML5 Canvas and instead creates a visualization
using CSS classes created and passed by the user. This allows for a far greater level of customization, at the cost
of greater performance overhead.</p>
<h2><b>Quick Start</b></h2>
<p>Import the library into your web page:</p>
<pre class="prettyprint"><code><script defer type="text/javascript" src='./Waveform.js'></script></code></pre>
<p>Create a container where the waveform is to appear:</p>
<pre class="prettyprint"><code><div id="visualizerContainer"></div></code></pre>
<p>In JavaScript, create a new <b>SingleWaveForm</b> object and select its container, audio source, bar count and class names:</p>
<pre class="prettyprint"><code>// Create new WaveForm object
var visualization = new SingleWaveForm(
containerID = "visualizerContainer",
audio = "./path_to_audio/audio.mp3",
barCount = 64,
barClass = "firstClassName"
)</code></pre>
<p>From there, controls can be constructed using the WaveForm object's API:</p>
<pre class="prettyprint"><code>// Add play button
document.getElementById("playButton").addEventListener('click', function() {
visualization.playAudio()
})
// Add change color button
document.getElementById("changeColorButton").addEventListener('click', function() {
visualization.changeBarClass("secondClassName")
})</code></pre>
<h2><b>Browser Support</b></h2>
<p><b>WaveForm.js</b> should run on all modern browsers supporting Web Audio.</p>
</div>
<footer>
<p>WaveForm.js by <a href="https://github.com/FSq-Poplar">FSq-Poplar</a> is licensed under
a <a href="https://opensource.org/licenses/gpl-3.0.html">GPL-3 License</a>.</p>
</footer>
</body>
</html>