mirror of https://bitbucket.org/ausocean/av.git
audio-player: added form for filling in timestamp and media info
This commit is contained in:
Trek H
parent
1865ff9c79
commit
a40dd4c835
|
|
@ -7,27 +7,100 @@
|
|||
<script type="text/javascript" src="pcm-to-wav.js"></script>
|
||||
<script type="text/javascript" src="adpcm.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<script type="text/javascript">
|
||||
function sync(dateID, tsID, dateChanged) {
|
||||
if (dateChanged) { // Go from date to Unix timestamp.
|
||||
var s = document.getElementById(dateID).value;
|
||||
if (s.length == 16) {
|
||||
s += ':00'; // Append seconds.
|
||||
}
|
||||
s += 'Z';
|
||||
var dt = new Date(s)
|
||||
document.getElementById(tsID).value = (dt.getTime() / 1000).toString();
|
||||
} else { // Go from Unix timestamp to local date.
|
||||
var ts = parseInt(document.getElementById(tsID).value) * 1000;
|
||||
var dt = new Date(ts).toISOString().slice(0, -1);
|
||||
document.getElementById(dateID).value = dt;
|
||||
}
|
||||
}
|
||||
|
||||
function presubmit() {
|
||||
if (document.getElementById('st').value == "" && document.getElementById('sd').value != "") {
|
||||
sync('sd', 'st', true);
|
||||
}
|
||||
if (document.getElementById('ft').value == "" && document.getElementById('fd').value != "") {
|
||||
sync('fd', 'ft', true);
|
||||
}
|
||||
if (document.getElementById('ft').value == "") {
|
||||
document.getElementById('ts').value = document.getElementById('st').value;
|
||||
} else {
|
||||
document.getElementById('ts').value = document.getElementById('st').value + '-' + document
|
||||
.getElementById('ft').value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body style="height: 100%">
|
||||
<div class="jumbotron">
|
||||
<div class="container-fluid">
|
||||
<input type="file" id="input">
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<audio controls="controls" id="audio">
|
||||
Your browser does not support the <code>audio</code> element.
|
||||
<source id="source" src="" type="audio/wav" />
|
||||
</audio>
|
||||
<div class="card m-auto" style="width: 30rem;">
|
||||
<div class="card-body">
|
||||
<div class="container-fluid">
|
||||
<div class="form-group">
|
||||
<input class="form-control-file" type="file" id="input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<form action="/search" enctype="multipart/form-data" method="post" onsubmit="presubmit();">
|
||||
<div class="form-group">
|
||||
<label>App key:</label>
|
||||
<input class="form-control form-control-sm" type="input" name="ak">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Media ID:</label>
|
||||
<input class="form-control form-control-sm" type="input" name="id" id="id">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Start date or timestamp:</label>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input class="form-control form-control-sm" name="sd" type="datetime-local" id="sd" onchange="sync('sd', 'st', true);">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input class="form-control form-control-sm" name="st" type="input" id="st" onchange="sync('sd', 'sd', false);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Finish date or timestamp:</label>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input class="form-control form-control-sm" name="fd" type="datetime-local" id="fd" onchange="sync('fd', 'ft', true);">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input class="form-control form-control-sm" name="ft" type="input" id="ft" onchange="sync('fd', 'fd', false);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="btn btn-primary" type="submit" value="Search" name="submit">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="hidden" name="ts" id="ts">
|
||||
</div>
|
||||
</form>
|
||||
<div class="container-fluid">
|
||||
<audio class="mx-auto" controls="controls" id="audio">
|
||||
Your browser does not support the <code>audio</code> element.
|
||||
<source id="source" src="" type="audio/wav" />
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer id="sticky-footer" class="footer py-4 bg-dark text-white-50"
|
||||
style="position: absolute; bottom: 0; width: 100%;">
|
||||
<footer id="sticky-footer" class="footer fixed-bottom py-4 bg-dark text-white-50" style="width: 100%;">
|
||||
<div class="container text-center">
|
||||
<small>©2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license"
|
||||
href="https://www.ausocean.org/license">License</a>)</small>
|
||||
<small>©2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license" href="https://www.ausocean.org/license">License</a>)</small>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ LICENSE
|
|||
*/
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('input').addEventListener('change', processData)
|
||||
document.getElementById('input').addEventListener('change', processData);
|
||||
}
|
||||
|
||||
function processData() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue