Skip to content

Commit

Permalink
Add "Import File Example"
Browse files Browse the repository at this point in the history
  • Loading branch information
brianchirls committed Jul 23, 2019
1 parent e023263 commit ea488f1
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 0 deletions.
34 changes: 34 additions & 0 deletions examples/import-file/import.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
(function () {
var url = null;

function handleFile(evt) {
// var reader = new FileReader;
var files = evt.dataTransfer && evt.dataTransfer.files || evt.target && evt.target.files;
var file = files && files.length && files[0];
var medium = file && file.type.split('/')[0];

var ambisonicElement = document.getElementById('ambisonic');
var ambisonic = ambisonicElement.components.ambisonic;

evt.preventDefault();

if (medium === 'video' || medium === 'audio') {
ambisonic.pauseSound();
if (url) {
URL.revokeObjectURL(url);
}
url = URL.createObjectURL(file);
ambisonicElement.setAttribute('src', url);
ambisonic.playSound();
}
return false;
}

window.addEventListener('dragover', function (evt) {
evt.preventDefault();
return false;
});
window.addEventListener('drop', handleFile, true);

document.getElementById('import-file').addEventListener('change', handleFile, false);
}());
102 changes: 102 additions & 0 deletions examples/import-file/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Import Ambisonic Audio File | A-Frame Ambisonic Audio Component</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="../aframe-ambisonic-component.js"></script>
<script src="../scripts/play-on-window-click.js"></script>
<script src="../scripts/hide-once-playing.js"></script>
<script src="../scripts/play-on-vrdisplayactivate-or-enter-vr.js"></script>
<script src="https://cdn.jsdelivr.net/gh/supermedium/aframe-environment-component@master/dist/aframe-environment-component.min.js"></script>
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
sans-serif;
}
#model-reference {
position: fixed;
bottom: 8px;
left: 8px;
background-color: rgba(80, 80, 80, 0.5);
padding: 12px;
color: white;
}

a,
a:visited,
a:active {
color: currentColor;
}
</style>
</head>
<body>
<a-scene id="scene">
<a-ambisonic
id="ambisonic"
play-on-window-click
play-on-vrdisplayactivate-or-enter-vr
></a-ambisonic>

<a-entity environment="preset:checkerboard"></a-entity>
<script>
[
'Front',
'Front Right',
'Right',
'Back Right',
'Back',
'Back Left',
'Left',
'Front Left'
].forEach(function (direction, i) {
var entity = document.createElement('a-entity');
entity.setAttribute('text', {
align: 'center',
width: 5,
wrapCount: 100,
color: 'white'
});
entity.setAttribute('text', 'value', direction);

var angle = i * Math.PI * 2 / 8;
var x = Math.sin(angle) * 3;
var z = -Math.cos(angle) * 3;
entity.setAttribute('position', [x, 1.5, z].join(' '));
entity.setAttribute('rotation', [0, -angle * 180 / Math.PI, 0].join(' '));
document.getElementById('scene').appendChild(entity);
});
</script>


<a-camera look-controls="pointerLockEnabled:true">
<!-- Text element for display messaging. Hide once audio is playing. -->
<a-entity id="msg" position="0 -0.3 -1.5" text="align:center;
width:3;
wrapCount:100;
color:white;
value:Click window to make audio play."
hide-once-playing="#ambisonic">
</a-entity>
</a-camera>
</a-scene>

<div id="model-reference">
<div>
<p>Import 4-channel ambisonic audio file from device.</p>
<label for="import-file">Click to select file or drag and drop</label>
<input id="import-file" type="file" accept="audio/*,video/*"/>
</div>
<a
href="https://github.com/supermedium/aframe-environment-component"
target="_blank"
>Aframe Environment Component</a
>
</div>

<!-- GitHub Corner. -->
<a href="https://github.com/datavized/aframe-ambisonic-component" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<script src="./import.js"></script>
</body>
</html>

0 comments on commit ea488f1

Please sign in to comment.