weather.html (Source)

<!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 + '&deg;';
    document.getElementById('location').innerHTML = d.name;
    document.getElementById('humidity').innerHTML = 'Humidity: '+humidity;
}

</script>
</html>


Contents © Henrik von Coler 2020 - Contact