forked from DanielLarsenNZ/Hello-Electron
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (59 loc) · 2 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio Player</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/app.css" rel="stylesheet" type="text/css"/>
<script src="scripts/bliss.shy.min.js" type="text/javascript"></script>
<style>
#drop{
width: 802px;
height: 202px;
border: solid 1px #ddd;
}
</style>
</head>
<body>
<h1>Audio Player</h1>
<div id="drop">
<div id="help-text">Drag an audio file here...</div>
<canvas id="wave"></canvas>
</div>
<script>
var drop = document.getElementById('drop');
drop.ondragover = function () {
return false;
};
drop.ondragleave = drop.ondragend = function () {
return false;
};
drop.ondrop = function (e) {
var audio = require("./scripts/audio.js");
e.preventDefault();
var file = e.dataTransfer.files[0];
console.log('Dropped file is', file.path);
//document.getElementById("track-title").innerText = file.path;
audio.load(file.path, function(error, source, gain){
if (error) throw error;
source.start();
var waveform = require("./scripts/waveform.js");
var canvas = document.getElementById("wave");
ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 200;
waveform.draw(800, 200, ctx, source.buffer, function(error){
document.getElementById("help-text").style.display = "none";
});
});
return false;
};
</script>
<div id="track-title"></div>
<div id="info">
Node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
Electron <script>document.write(process.versions.electron)</script>.
</div>
</body>
</html>