215 lines
5.4 KiB
HTML
215 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
<!-- lib -->
|
|
<script src="js/p5.min.js"></script>
|
|
<script src="js/Tone.min.js"></script>
|
|
<!-- css -->
|
|
<link rel="stylesheet" href="css/default.css">
|
|
<!-- script -->
|
|
<script>
|
|
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
let audioCtx;
|
|
</script>
|
|
<script src="js/util.js"></script>
|
|
<script src="js/classes.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<button class='overlay-userinput' onclick='initialize();'>
|
|
<div>터치하고-시작하기!</div>
|
|
</button>
|
|
|
|
<audio controls crossorigin="anonymous" style="display:none;">
|
|
<!-- <source src="https://radio.dianaband.in:8000/stream" type="audio/aac" /> -->
|
|
</audio>
|
|
|
|
<script>
|
|
//shared
|
|
//device location & motion
|
|
let heading = 0;
|
|
let latitude = 37.574973;
|
|
let longitude = 126.925708;
|
|
// let latitude = 37.576774;
|
|
// let longitude = 126.931232;
|
|
|
|
// 맞는 결과 (예) : 작업실 -> 베지스
|
|
// p1 = [37.574973, 126.925708]
|
|
// p2 = [37.576774, 126.931232]
|
|
// getBearing(p1[0], p1[1], p2[0], p2[1])
|
|
// 67.6373956496954 (deg)
|
|
// getDistance(p1[0], p1[1], p2[0], p2[1])
|
|
// 0.5263963610554471 (km)
|
|
|
|
//audio playback permission checker
|
|
let silence;
|
|
let clap;
|
|
let radio;
|
|
//all ready flag (not used)
|
|
let ready = false;
|
|
|
|
//clear all permissions
|
|
async function initialize() {
|
|
|
|
// device orientation data permission
|
|
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
|
|
requestOrientationPermission();
|
|
}
|
|
|
|
// start audiocontext
|
|
audioCtx = new AudioContext;
|
|
|
|
// some sounds for check-in
|
|
silence = (await AudioImport("./audio/_silence.wav")).toDestination();
|
|
clap = (await AudioImport("./audio/clap01.mp3")).toDestination();
|
|
|
|
// start loading for all sounds
|
|
sounds.forEach(async item => await item.load());
|
|
|
|
// unfreeze audio playback for Tone.js
|
|
silence.start();
|
|
|
|
// remove the veil
|
|
let veil = document.querySelector(".overlay-userinput");
|
|
veil.style.display = 'none';
|
|
|
|
// activate radio by adding source tag
|
|
const audiotag = document.querySelector('audio'); // N.B. assuming there's only 1 audio tag for streaming...
|
|
const sourcetag = document.createElement('source');
|
|
sourcetag.setAttribute('src', 'https://radio.dianaband.in:8000/stream');
|
|
sourcetag.setAttribute('type', 'audio/aac');
|
|
audiotag.appendChild(sourcetag);
|
|
audiotag.play();
|
|
|
|
// //link a sounder object to radio streaming..
|
|
// radio = new Sounder({
|
|
// // location: [37.576013, 126.927912],
|
|
// location: [37.574973, 126.935708],
|
|
// soundfile: "./audio/clap01.mp3",
|
|
// gain: 6,
|
|
// spread: 15,
|
|
// distmap: [0.005, 0.05, 0, -10],
|
|
// //testing
|
|
// volmin: -30,
|
|
// });
|
|
// // radio.radiolink(audiotag);
|
|
// radio.load();
|
|
|
|
//
|
|
ready = true;
|
|
}
|
|
|
|
let compass_target;
|
|
let compass_north;
|
|
let sounds = [];
|
|
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight);
|
|
compass_target = new Compass(200, ['#97FFFF', '#33A1DE', 'white']);
|
|
compass_north = new Compass(40, ['yellow', 'navy', 'white']);
|
|
angleMode(DEGREES);
|
|
|
|
// register sounders to the list
|
|
sounds.push(new Sounder({
|
|
location: [37.576774, 126.931232],
|
|
soundfile: "./audio/01.mp3",
|
|
gain: 6,
|
|
spread: 15,
|
|
distmap: [0.005, 0.05, 0, -10],
|
|
//testing
|
|
volmin: -30,
|
|
}));
|
|
}
|
|
|
|
function draw() {
|
|
//
|
|
background('#202325');
|
|
|
|
//all data is ready to be used.
|
|
if (ready) {
|
|
|
|
//update sounders
|
|
sounds.forEach(async item => await item.update());
|
|
// radio.update();
|
|
|
|
//
|
|
let target = sounds[0];
|
|
|
|
////main group
|
|
|
|
//(push)
|
|
push();
|
|
|
|
//compass (the North)
|
|
translate(20, 20, 0);
|
|
compass_target.heading = target.angerr; //target #0
|
|
compass_target.draw();
|
|
|
|
//(pop)
|
|
pop();
|
|
|
|
//(push)
|
|
push();
|
|
//debug
|
|
fill('white');
|
|
translate(30, 200, 0);
|
|
Textline.restart();
|
|
Textline.put('ang');
|
|
Textline.put(target.ang);
|
|
Textline.put('angerr');
|
|
Textline.put(target.angerr);
|
|
Textline.put('distance');
|
|
Textline.put(target.dist);
|
|
// Textline.put('pan');
|
|
// Textline.put(target.pv.pan.value);
|
|
// Textline.put('distvol');
|
|
// Textline.put(target.distvol);
|
|
// Textline.put('vol');
|
|
// Textline.put(target.pv.volume.value);
|
|
Textline.put('target_lat');
|
|
Textline.put(target.latitude);
|
|
Textline.put('target_lon');
|
|
Textline.put(target.longitude);
|
|
|
|
//(pop)
|
|
pop();
|
|
|
|
////status-left group
|
|
|
|
//(push)
|
|
push();
|
|
|
|
//
|
|
translate(20, windowHeight - 100, 0);
|
|
fill('white');
|
|
Textline.restart();
|
|
Textline.put('current location');
|
|
Textline.put(latitude);
|
|
Textline.put(longitude);
|
|
|
|
//(pop)
|
|
pop();
|
|
|
|
|
|
////status-right group
|
|
|
|
//(push)
|
|
push();
|
|
|
|
//
|
|
translate(windowWidth - 50, windowHeight - 50, 0);
|
|
compass_north.heading = heading;
|
|
compass_north.draw();
|
|
|
|
//(pop)
|
|
pop();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |