-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (98 loc) · 2.79 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SampleEditorView</title>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
html,body{
background: #fff;
color: #333;
font-size: 12px;
font-family: helvetica;
}
h1{
margin: 0.5rem;
text-transform: uppercase;
}
#info, .SampleEditorView{
float:left;
margin: 0.5rem;
}
.label, .value {
display: inline-block;
padding: 0.5rem;
font-weight: 100;
font-size: 0.7rem;
}
.label {
background: #222;
color: #fff;
width: 120px;
text-transform: uppercase;
text-align: right;
}
.value {
text-align: center;
background: #ddd;
width: 120px;
}
.SampleEditorView{
width: 640px;
height:320px;
}
</style>
</head>
<body>
<h1>Example</h1>
<div id="main" class="noselect"></div>
<div id="info" class="noselect"></div>
<div>Alt+Mouse to Zoom/Pan</div>
<script src="dist/SampleEditorView.js"></script>
<script>
let audioContext = new (window.AudioContext || window.webkitAudioContext)()
function loadBuffer( url ){
return new Promise(function(resolve,reject){
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
audioContext.decodeAudioData(request.response, function(buffer) {
resolve( buffer );
}, reject);
}
request.send();
})
}
let editor = new SampleEditorView( {
color: '#222',
background: '#ddd',
width: 1280,
height: 640,
highRes: true
} )
main.appendChild( editor.canvas )
loadBuffer( 'https://upload.wikimedia.org/wikipedia/commons/b/bb/O_Na_Byddai%27n_Haf_o_Hyd_-_Various_Artists.ogg' ).then(function(buffer){
editor.buffer = buffer;
editor.props.$keys.forEach( function(k){
let el = document.createElement('div')
el.innerHTML = '<div class="row"><span class="label">' + k + ':</span><span class="value" id="info-' + k + '">0</span></div>';
info.appendChild(el)
editor.props.$observe(k, function( v ){
document.getElementById('info-'+k).innerHTML = v
})
});
window.editor = editor
})
</script>
</body>
</html>