wincentbalin/metrum.html

## metrum.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Media time converter</title>
<style type="text/css">
body {
    margin: 0 auto;
    max-width: 27em
}

fieldset, noscript
{
    display: block;
    font-family: sans-serif
}

input, fieldset {
    margin: 0.5ex auto
}

label {
    display: inline-block;
    width: 8em
}

input {
    box-sizing: border-box;
    font-size: 1em;
    width: 4em
}

input#tsig, input#tsig + input {
    width: 3em
}

button {
    margin-left: 1em
}

@media (max-width: 420px) {
    #measures + button {
        width: 8em;
        height: 8ex;
        vertical-align: top
    }
}
</style>
<script type="text/javascript">
var secondsInMinute = 60;

function calculateTempo()
{
    var tsig = parseFloat(document.getElementById('tsig').value);
    var measures = parseFloat(document.getElementById('measures').value);
    var duration = parseFloat(document.getElementById('duration').value);

    var tempo = tsig * measures / (duration / secondsInMinute);
    document.getElementById('tempo').value = tempo;
};

function calculateMeasures()
{
    var tempo = parseFloat(document.getElementById('tempo').value);
    var tsig = parseFloat(document.getElementById('tsig').value);
    var duration = parseFloat(document.getElementById('duration').value);

    var measures = (duration / secondsInMinute) * tempo / tsig;
    document.getElementById('measures').value = measures;
};

function calculateDuration()
{
    var tempo = parseFloat(document.getElementById('tempo').value);
    var tsig = parseFloat(document.getElementById('tsig').value);
    var measures = parseFloat(document.getElementById('measures').value);

    var duration = tsig * measures / tempo * secondsInMinute;
    document.getElementById('duration').value = duration;
};

function setVideoDuration()
{
    var frames = parseFloat(document.getElementById('frames').value);
    var framefrequency = parseFloat(document.getElementById('framefrequency').value);

    var duration = frames / framefrequency;
    document.getElementById('duration').value = duration;
};
</script>
</head>
<body>
<noscript><h1>This page does not work without JavaScript!</h1><br/></noscript>
<fieldset>
<legend>Audio</legend>
<label for="tempo">tempo (bpm)</label><input type="number" id="tempo"/><button onclick="calculateTempo()">calculate tempo</button><br/>
<label for="tsig">time signature</label><input type="number" id="tsig" value="4"/>/<input type="number" value="4"/><br/>
<label for="measures">measures</label><input type="number" id="measures"/><button onclick="calculateMeasures()">calculate amount of measures</button><br/>
<label for="duration">duration (s)</label><input type="number" id="duration"/><button onclick="calculateDuration()">calculate duration</button><br/>
</fieldset>
<fieldset>
<legend>Video</legend>
<label for="framefrequency">frame rate (fps)</label><input type="number" id="framefrequency" value="25"/><br/>
<label for="frames">frames in video</label><input type="number" id="frames"/><button onclick="setVideoDuration()">set video duration</button><br/>
</fieldset>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>Media time converter</title>
	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 27em
	}

	fieldset, noscript
	{
	display: block;
	font-family: sans-serif
	}

	input, fieldset {
	margin: 0.5ex auto
	}

	label {
	display: inline-block;
	width: 8em
	}

	input {
	box-sizing: border-box;
	font-size: 1em;
	width: 4em
	}

	input#tsig, input#tsig + input {
	width: 3em
	}

	button {
	margin-left: 1em
	}

	@media (max-width: 420px) {
	#measures + button {
	width: 8em;
	height: 8ex;
	vertical-align: top
	}
	}
	</style>
	<script type="text/javascript">
	var secondsInMinute = 60;

	function calculateTempo()
	{
	var tsig = parseFloat(document.getElementById('tsig').value);
	var measures = parseFloat(document.getElementById('measures').value);
	var duration = parseFloat(document.getElementById('duration').value);

	var tempo = tsig * measures / (duration / secondsInMinute);
	document.getElementById('tempo').value = tempo;
	};

	function calculateMeasures()
	{
	var tempo = parseFloat(document.getElementById('tempo').value);
	var tsig = parseFloat(document.getElementById('tsig').value);
	var duration = parseFloat(document.getElementById('duration').value);

	var measures = (duration / secondsInMinute) * tempo / tsig;
	document.getElementById('measures').value = measures;
	};

	function calculateDuration()
	{
	var tempo = parseFloat(document.getElementById('tempo').value);
	var tsig = parseFloat(document.getElementById('tsig').value);
	var measures = parseFloat(document.getElementById('measures').value);

	var duration = tsig * measures / tempo * secondsInMinute;
	document.getElementById('duration').value = duration;
	};

	function setVideoDuration()
	{
	var frames = parseFloat(document.getElementById('frames').value);
	var framefrequency = parseFloat(document.getElementById('framefrequency').value);

	var duration = frames / framefrequency;
	document.getElementById('duration').value = duration;
	};
	</script>
	</head>
	<body>
	<noscript><h1>This page does not work without JavaScript!</h1><br/></noscript>
	<fieldset>
	<legend>Audio</legend>
	<label for="tempo">tempo (bpm)</label><input type="number" id="tempo"/><button onclick="calculateTempo()">calculate tempo</button><br/>
	<label for="tsig">time signature</label><input type="number" id="tsig" value="4"/>/<input type="number" value="4"/><br/>
	<label for="measures">measures</label><input type="number" id="measures"/><button onclick="calculateMeasures()">calculate amount of measures</button><br/>
	<label for="duration">duration (s)</label><input type="number" id="duration"/><button onclick="calculateDuration()">calculate duration</button><br/>
	</fieldset>
	<fieldset>
	<legend>Video</legend>
	<label for="framefrequency">frame rate (fps)</label><input type="number" id="framefrequency" value="25"/><br/>
	<label for="frames">frames in video</label><input type="number" id="frames"/><button onclick="setVideoDuration()">set video duration</button><br/>
	</fieldset>
	</body>
	</html>