-
-
Notifications
You must be signed in to change notification settings - Fork 37
/
index.html
48 lines (44 loc) · 2.38 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Karaoke using Web Audio API and HTML5 File Drag & Drop</title>
<meta name="description" content="Karaoke - Removing vocals with web audio API">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jmperezperez">
<meta name="twitter:title" content="Karaoke using Web Audio API and HTML5 File Drag & Drop">
<meta name="twitter:description" content="Karaoke - Removing vocals with web audio API">
<link rel="icon" type="image/png" href="img/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="img/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="img/favicon-16x16.png" sizes="16x16" />
<link rel="canonical" href="https://jmperezperez.com/karaoke/" />
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
</head>
<body>
<div class="fork-github"><a href="https://github.com/JMPerez/karaoke">Fork me on GitHub</a></div>
<header>
<h1>Karaoke using Web Audio API</h1>
</header>
<div class="main">
<p>Do you like Karaoke? Take a music file and drag it here. If you are lucky, you will listen the song without vocals.</p>
<div id="filedrag">Drop your MP3 file here (also .ogg or .wav)</div>
<div id="fileselect-container">
<label for="fileselect">Or select a file:</label>
<input type="file" id="fileselect" name="fileselect[]"/>
</div>
<div id="current-song"></div>
<div id="options">
Options:
<button id="disable-filter">Disable karaoke</button>
</div>
<p>If you don't have any file at hand, <a id="demo-audio" href="#"><strong>click here for a demo</strong></a> of <a href="http://www.jamendo.com/en/track/1074874/happy">Happy by MMO</a>.
<h2>How it works</h2>
<p>By using the Web Audio Javascript API, the file is processed locally in your browser and voice is removed. Check out the <a href="https://github.com/JMPerez/karaoke">project on Github</a> for more information. No Flash was used to develop this.</p>
</div>
<footer>
<a href="https://twitter.com/jmperezperez">@jmperezperez</a> · <a href="https://jmperezperez.com">jmperezperez.com</a>
</footer>
<script src="scripts/jDataView.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>