sample-editor-view
Version:
A Canvas Renderer / Editor UI for AudioBuffers
121 lines (98 loc) • 2.85 kB
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>