130 lines
2.9 KiB
HTML
130 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<body>
|
|
|
|
|
|
|
|
<h1>colles gyro dingens</h1>
|
|
|
|
<marquee>ich bin der Davidmann2</marquee>
|
|
|
|
<fieldset>
|
|
<legend>
|
|
status
|
|
</legend>
|
|
<strong id="status">
|
|
loading
|
|
</strong>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>
|
|
gyro
|
|
</legend>
|
|
<strong id="gyro">
|
|
loading
|
|
</strong>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>
|
|
gyro
|
|
</legend>
|
|
<strong id="gyro2">
|
|
loading
|
|
</strong>
|
|
</fieldset>
|
|
|
|
<script>
|
|
function loadAudioFile(fileName){
|
|
return (
|
|
fetch(fileName)
|
|
.then(response=>{
|
|
return(response.arrayBuffer())
|
|
})
|
|
.then(arrayBuffer=>{
|
|
return(ctx.decodeAudioData(arrayBuffer))
|
|
})
|
|
.then(audioBuffer=>{
|
|
loaded++
|
|
document.getElementById("status").innerHTML = "loaded " + loaded + "/" + fileNames.length
|
|
return(audioBuffer)
|
|
})
|
|
)
|
|
}
|
|
const fileNames = ["AufnahmeLIna.mp3", "blatters.mp3"]
|
|
let buffers = null
|
|
let loaded = 0
|
|
Promise.all(fileNames.map(loadAudioFile))
|
|
.then(audioBuffers=>{
|
|
document.getElementById("status").innerHTML = "Done loading"
|
|
buffers = audioBuffers
|
|
})
|
|
|
|
</script>
|
|
|
|
<script>
|
|
let samples = null
|
|
const ctx = new AudioContext()
|
|
function playStuff(){
|
|
console.log("imStuff")
|
|
if(samples == null){
|
|
samples = []
|
|
for(const buffer of buffers){
|
|
const sample = ctx.createBufferSource()
|
|
sample.buffer = buffer
|
|
|
|
const gain = ctx.createGain()
|
|
|
|
sample.connect(gain)
|
|
gain.connect(ctx.destination)
|
|
|
|
sample.start()
|
|
samples.push({sample:sample, gainNode:gain})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
function stopStuff(){
|
|
for(sample of samples){
|
|
sample.sample.stop()
|
|
}
|
|
samples = null
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
function getGyroPermission(){
|
|
if(!DeviceOrientationEvent.requestPermission){
|
|
return Promise.resolve("granted")
|
|
}
|
|
else{
|
|
return DeviceOrientationEvent.requestPermission()
|
|
}
|
|
}
|
|
function initGyro(){
|
|
//alert(DeviceOrientationEvent.requestPermission())
|
|
getGyroPermission().then(response => {
|
|
window.addEventListener("deviceorientation", e => {
|
|
document.querySelector("#gyro").innerHTML = e.alpha / 360
|
|
document.querySelector("#gyro2").innerHTML = (e.beta + 180) / 360
|
|
if(samples != null){
|
|
samples[0].gainNode.gain.value = e.alpha / 360
|
|
samples[1].gainNode.gain.value = (e.beta + 180) / 360
|
|
}
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<button onclick="playStuff()">PLAY</button>
|
|
|
|
<button onclick="stopStuff()">STOP</button>
|
|
|
|
<button onclick="initGyro()">START GYRO</button>
|
|
|
|
</body>
|
|
</html> |