99 lines
2.2 KiB
HTML
99 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="js/p5.min.js"></script>
|
|
<script src="js/Tone.min.js"></script>
|
|
|
|
<title>Sketch</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
}
|
|
|
|
.overlay-userinput {
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 255, 255, 0.5);
|
|
color: black;
|
|
z-index: 2;
|
|
/* display: none; */
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<button class='overlay-userinput' onclick='requestPermissions();'>
|
|
<div>터치하고-시작하기!</div>
|
|
</button>
|
|
|
|
<!-- <audio controls>
|
|
<source src="https://radio.dianaband.in:8000/stream" type="audio/aac" />
|
|
<source src="audio/delayecho.mp3" type="audio/mpeg" />
|
|
</audio> -->
|
|
|
|
<script>
|
|
// const audioCtx = new AudioContext();
|
|
// const myAudio = document.querySelector("audio");
|
|
// const source = audioCtx.createMediaElementSource(myAudio);
|
|
// const gainNode = audioCtx.createGain();
|
|
// gainNode.gain.value = 1;
|
|
// // source.connect(gainNode);
|
|
// gainNode.connect(audioCtx.destination);
|
|
// https://radio.dianaband.in:8000/stream
|
|
|
|
let silence;
|
|
let clap;
|
|
|
|
//clear all permissions
|
|
function requestPermissions() {
|
|
|
|
// sound playback permission
|
|
silence.start();
|
|
clap.start();
|
|
|
|
//
|
|
let veil = document.querySelector(".overlay-userinput");
|
|
veil.style.display = 'none';
|
|
|
|
//
|
|
ready = true;
|
|
}
|
|
|
|
//promisify -> new Tone.Player
|
|
function AudioImport(url) {
|
|
return new Promise((resolve, reject) => {
|
|
var audio = new Tone.Player(url, () => resolve(audio));
|
|
});
|
|
}
|
|
|
|
async function preload() {
|
|
//some sounds for check-in
|
|
silence = (await AudioImport("./audio/_silence.wav")).toDestination();
|
|
clap = (await AudioImport("./audio/clap01.mp3")).toDestination();
|
|
}
|
|
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight);
|
|
angleMode(DEGREES);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |