|
<!doctype html>
<html>
<head>
<title>Where would you rather be?</title>
</head>
<blockquote style="border: 2px solid #122; padding: 10px; background-color: #ccc;">
<body>
<p>What does the weather sound like in ...?</p>
<p>
<button onclick="myFunction()">Enter City Name</button>
<button onclick="stop()">Stop</button>
<p id="demo"></p>
</p>
</body>
<div id="location"></div>
<div id="weather">
<div id="description"></div>
<h1 id="temp"></h1>
<h1 id="humidity"></h1>
</div>
</blockquote>
<script>
var audioContext = new window.AudioContext
var oscillator = audioContext.createOscillator()
var modulator = audioContext.createOscillator()
// the output gain
var gainNode = audioContext.createGain()
var modInd = audioContext.createGain();
modInd.gain.value = 100;
gainNode.gain.value = 0
modulator.connect(modInd)
modInd.connect(oscillator.detune)
oscillator.connect(gainNode)
gainNode.connect(audioContext.destination)
oscillator.start(0)
oscillator.frequency.setValueAtTime(100, audioContext.currentTime);
modulator.start(0)
modulator.frequency.setValueAtTime(100, audioContext.currentTime);
function myFunction() {
var city = prompt("Enter City Name", "Potsdam");
if (city != null) {
get_weather(city)
}
}
function stop()
{
gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 1);
}
function frequency(y)
{
oscillator.frequency.value = y
}
function get_weather( cityName )
{
var key = 'eab7c410674e15bfdd841f66941a92c2';
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + cityName+ '&appid=' + key)
.then(function(resp) { return resp.json()}) // Convert data to json
.then(function(data) {
setSynth(data);
})
.catch(function() {
// catch any errors
});
}
function setSynth(d)
{
var celcius = Math.round(parseFloat(d.main.temp)-273.15);
var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
var humidity = d.main.humidity;
oscillator.frequency.linearRampToValueAtTime(1000*(100/(celcius*celcius)), audioContext.currentTime + 1);
modulator.frequency.linearRampToValueAtTime(humidity, audioContext.currentTime + 1);
gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 1);
document.getElementById('description').innerHTML = d.weather[0].description;
document.getElementById('temp').innerHTML = celcius + '°';
document.getElementById('location').innerHTML = d.name;
document.getElementById('humidity').innerHTML = 'Humidity: '+humidity;
}
</script>
</html>
|