<!DOCTYPE html>
<html lang="en">
<head>
<title>listener_1.html</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/github-mark.png">
<meta name="description" content="http://127.0.0.1/listener_1.html">
<meta name="twitter:image" content="img/ag_baboy_right.png" />
<meta name="twitter:image:type" content="png" />
<meta name="twitter:image:width" content="19" />
<meta name="twitter:image:height" content="47" />
<style>
body{border:none;background-color:#024;font-family:Lucida Console;overflow:hidden;}
a,button,span,input{font-family:Lucida Console;}
td{padding:4px;}
</style>
</head>
<body>
<table style="position:absolute;left:20px;top:8px;color:#fc0;z-index:2;">
<tr>
<td>
<button id="bostart" style="display:;font-size:10pt;height:24px;background-color:#f00;color:#fff;font-weight:bold;cursor:pointer;"> start </button>
<button id="bo" style="display:none;font-size:10pt;height:24px;background-color:#fc0;color:#00c;font-weight:bold;cursor:pointer;"> Play/Pause </button>
</td>
<td>
<span id="spansel" style="display:none;color:#cc0;font-size:12pt;"> audio
<select id="sel" autocomplete="off" style="background-color:#630;color:#ff0;font-size:12pt;border:1px inset #999;cursor:pointer;" onchange="troca();">
<option value="mp3/Supergrass.mp3">Supergrass</option>
<option value="mp3/satisfaction_trim.mp3">Stones</option>
</select>
</span>
</td>
<td><input id="volin" type="range" style="display:none;width:100px;cursor:pointer;" value="0.2" min="0" max="1" step="0.02" onchange="mudavol();" autocomplete="off"></input></td>
<td><span id="spanB" style="display:none;position:relative;top:-2px;color:#fc0;font-size:12pt;"></span></td>
<td style="width:200px;"></td>
<td><a id="h" href="listener_1.txt" target="_blank" style="width:200px;font-size:12pt;background-color:#060;color:#fff;text-decoration:none;border:1px outset #ff0;padding:2px;display:none;"> View code </a></td>
</tr>
</table>
<script type="importmap">
{
"imports":{
"three":"https://unpkg.com/three@0.176.0/build/three.module.js",
"three/addons/":"https://unpkg.com/three@0.176.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
var scene, camera, renderer, mesh,lig;
var file;
var mediaElement, fftSize, listener, audio, format;
var context,gainMP3,source;
var bId=function(id){return document.getElementById(id);}
var volval=bId("volin");
var start=bId("bostart");
var inpA=bId("volin");
var sela=bId("sel");
var dbo=bId("bo");
var dspansel=bId("spansel");
var dspanB=bId("spanB");
var dh=bId("h");
start.onclick=function StartAnimation(){init();}
inpA.onchange=function StartAnimation(){mudavol();}
sela.onchange=function StartAnimation(){troca();}
function init() {
start.style.display="none";
dbo.style.display="";
dspansel.style.display="";
inpA.style.display="";
dspanB.style.display="";
dh.style.display="";
renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth,window.innerHeight);
renderer.setClearColor(0x002244);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
scene=new THREE.Scene();
camera=new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,1,1000);
camera.position.set(0,0,50);
mesh=new THREE.Mesh(new THREE.BoxGeometry(8,8,8),new THREE.MeshNormalMaterial());
scene.add(mesh);
lig=new THREE.AmbientLight('#fff',2);
scene.add(lig);
fftSize=512;
listener=new THREE.AudioListener();
audio=new THREE.Audio(listener);
file='mp3/supergrass.mp3';
mediaElement=new Audio(file);
mediaElement.play();
mediaElement.volume=0.2;
audio.setMediaElementSource(mediaElement);
context=listener.context;
gainMP3=context.createGain();
gainMP3.connect(context.destination);
source=context.createMediaElementSource(mediaElement);
source.connect(gainMP3);
gainMP3.gain.value=2.0;
source.connect(context.destination);
document.getElementById("bo").addEventListener("click",function(){
mediaElement.volume=volval.value;
if(mediaElement.paused){
mediaElement.play();
}else{
mediaElement.pause();
}
})
window.addEventListener('resize',onWindowResize);
animate();
}
function onWindowResize(){
renderer.setSize(window.innerWidth,window.innerHeight);
}
function mudavol(){
mediaElement.volume=volval.value;
document.getElementById("spanB").innerText="gain= "+volval.value;
}
function troca(){
var select=document.getElementById('sel');
var value=select.options[select.selectedIndex].value;
mediaElement.src=value;
mediaElement.play();
}
function animate(){
requestAnimationFrame(animate);
mesh.rotation.x +=0.01;
mesh.rotation.z +=0.01;
renderer.render(scene,camera);
}
document.getElementById("spanB").innerText="vol= "+volval.value;
</script>
</body>
</html>