-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
235 lines (221 loc) · 10.1 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@GoldFireStudios">
<meta name="twitter:title" content="howler.js - JavaScript audio library for the modern web">
<meta name="twitter:description" content="howler.js makes working with audio in JavaScript easy and reliable across all platforms.">
<meta name="twitter:image" content="https://howlerjs.com/assets/images/twittercard.png">
<meta name="twitter:creator" content="@GoldFireStudios">
<meta property="og:url" content="https://howlerjs.com">
<meta property="og:title" content="howler.js - JavaScript audio library for the modern web">
<meta property="og:description" content="howler.js makes working with audio in JavaScript easy and reliable across all platforms.">
<meta property="og:image" content="https://howlerjs.com/assets/images/twittercard.png">
<title>howler.js - JavaScript audio library for the modern web</title>
<link href="assets/js/main.js?v=1" rel="preload" as="script">
<link href="assets/howler.js/dist/howler.min.js" rel="preload" as="script">
<link href="https://fonts.googleapis.com" rel="preconnect" crossorigin>
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://api.github.com" rel="preconnect" crossorigin>
<link href="https://www.google-analytics.com" rel="preconnect" crossorigin>
<link href="https://howlerjs.com/showcase/" rel="prerender">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css?v=2">
<style>
html, body {
overflow-x: hidden;
}
</style>
<script>
// Hack to fix scrolling bug in Safari after forward/back used.
window.onpageshow = function(event) {
if (event.persisted) {
document.querySelector('.goldfire').style.display = 'none';
document.querySelector('.goldfire').style.display = 'block';
}
};
</script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div class="header">
<div class="container">
<div class="left">
<!-- Logo -->
<a href="https://howlerjs.com" class="logo"></a>
<!-- Title & Sub-Title -->
<div class="title-container">
<div class="title">
Audio library for the modern web.
</div>
<div class="subtitle">
howler.js makes working with audio in JavaScript easy and reliable across all platforms.
</div>
<a href="https://github.com/goldfire/howler.js" class="button full">Download v2.2.3</a>
<a href="https://github.com/goldfire/howler.js#documentation" class="button docs">Docs</a>
<!-- Social Follow -->
<div class="social-follow">
<a href="https://twitter.com/GoldFireStudios">Follow on Twitter</a> for howler.js updates and discussion.
</div>
</div>
<!-- Social/GitHub Icons -->
<div class="social-container">
<a href="https://twitter.com/intent/tweet?related=GoldFireStudios&text=howler.js%202.0%20-%20Modern%20Web%20Audio%20Javascript%20Library&url=https%3A%2F%2Fhowlerjs.com&via=GoldFireStudios" target="_blank" class="social-icon twitter"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//howlerjs.com" target="_blank" class="social-icon facebook"></a>
<a href="https://github.com/goldfire/howler.js" class="github-btn">
<div class="social-icon github"></div>
<div class="stargazers"></div>
</a>
</div>
</div>
<!-- Big Logo -->
<div class="right">
<div class="logo-big"></div>
</div>
</div>
</div>
<!-- Features -->
<div class="features">
<div class="container">
<div class="heading">Features</div>
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon one"></div>
<div class="feature-title">Simplified API</div>
<div class="feature-descr">A single, consistent API for all of your audio needs makes building your audio experiences fun and easy.</div>
</div>
<div class="feature-item">
<div class="feature-icon two"></div>
<div class="feature-title">Audio Sprites</div>
<div class="feature-descr">Easily define and control segments of files with audio sprites for more precise playback and lower resources.</div>
</div>
<div class="feature-item">
<div class="feature-icon three"></div>
<div class="feature-title">Spatial Audio</div>
<div class="feature-descr">Whether a simple stereo pan or advanced 3D game audio, howler.js makes it easy to keep it all straight.</div>
</div>
<div class="feature-item">
<div class="feature-icon four"></div>
<div class="feature-title">Full Codec Support</div>
<div class="feature-descr">Supports all browser-ready files: MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.</div>
</div>
<div class="feature-item">
<div class="feature-icon five"></div>
<div class="feature-title">Works Everywhere</div>
<div class="feature-descr">Defaults to Web Audio and falls back to HTML5 Audio to provide full coverage across all browsers and platforms including IE9 and Cordova.</div>
</div>
<div class="feature-item">
<div class="feature-icon six"></div>
<div class="feature-title">Full Control</div>
<div class="feature-descr">Control everything from play, pause and seek to rate, fade and loop, just to name a few.</div>
</div>
<div class="feature-item">
<div class="feature-icon seven"></div>
<div class="feature-title">Auto Caching</div>
<div class="feature-descr">Loaded sounds are automatically cached and re-used on subsequent calls for better performance and bandwidth.</div>
</div>
<div class="feature-item">
<div class="feature-icon eight"></div>
<div class="feature-title">Modular</div>
<div class="feature-descr">Use only what you need with the new modular architecture. Easily extend the library to add custom features.</div>
</div>
<div class="feature-item">
<div class="feature-icon nine"></div>
<div class="feature-title">Zero Dependencies</div>
<div class="feature-descr">howler.js is as light as 7KB gzipped and is 100% JavaScript with no outside dependencies or plugins.</div>
</div>
</div>
</div>
</div>
<!-- Demos -->
<div class="demos">
<div class="container">
<div class="heading">Demos</div>
<div class="demo-list">
<div class="demo-item">
<div class="demo-box player"></div>
<div class="demo-title">Music Player</div>
</div>
<div class="demo-item">
<div class="demo-box radio"></div>
<div class="demo-title">Live Radio</div>
</div>
<div class="demo-item">
<div class="demo-box sprite"></div>
<div class="demo-title">Audio Sprites</div>
</div>
<div class="demo-item">
<div class="demo-box spatial"></div>
<div class="demo-title">Spatial Audio</div>
</div>
<div class="demo-item">
<div class="demo-box basic"></div>
<div class="demo-title">Basic Functions</div>
</div>
<div class="demo-item">
<div class="demo-box code"></div>
<div class="demo-title">Demo Code</div>
</div>
</div>
</div>
</div>
<!-- Demo Modal -->
<div class="modal">
<div class="modal-frame">
<div class="modal-info">
<div class="modal-title">Music Player</div>
<div class="modal-close">×</div>
</div>
</div>
</div>
<!-- Community -->
<div class="community">
<div class="container">
<div class="heading">Used By</div>
<div class="logo-list">
<div class="user-logo google"></div>
<div class="user-logo disney"></div>
<div class="user-logo mozilla"></div>
<div class="user-logo lego"></div>
<div class="user-logo dolby"></div>
<div class="user-logo dylan"></div>
<div class="user-logo walmart"></div>
<div class="user-logo nasa"></div>
<div class="user-logo warner"></div>
<div class="user-logo paramount"></div>
<div class="user-logo universal"></div>
<div class="user-logo fox"></div>
<div class="user-logo dc"></div>
<div class="user-logo ea"></div>
<div class="user-logo ubisoft"></div>
<div class="user-logo dominos"></div>
</div>
<a href="/showcase/" class="button more-users">More Users</a>
</div>
</div>
<!-- Waveform -->
<div class="waveform"></div>
<!-- Footer -->
<div class="footer">
<div class="container">
<a href="https://goldfirestudios.com" class="goldfire"></a>
<div class="contributors">Created by <a href="https://twitter.com/GoldFireStudios">James Simpson</a> & many <a href="https://github.com/goldfire/howler.js/graphs/contributors">contributors</a>.</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/main.js?v=6"></script>
<script src="assets/howler.js/dist/howler.min.js?v=2.2.3"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VP1MMCHKQM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-VP1MMCHKQM');
</script>
</body>
</html>