mirror
/
av
mirror of https://bitbucket.org/ausocean/av.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

audio-player: added form for filling in timestamp and media info

This commit is contained in:
Trek H 2019-08-11 19:42:51 +09:30
parent 1865ff9c79
commit a40dd4c835
2 changed files with 89 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
cmd/audio-player/index.html
View File

@ -7,27 +7,100 @@
<script type="text/javascript" src="pcm-to-wav.js"></script> <script type="text/javascript" src="pcm-to-wav.js"></script>
<script type="text/javascript" src="adpcm.js"></script> <script type="text/javascript" src="adpcm.js"></script>
<script type="text/javascript" src="main.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" <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">
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> </head>
<body style="height: 100%"> <body style="height: 100%">
<div class="jumbotron"> <div class="card m-auto" style="width: 30rem;">
<div class="card-body">
<div class="container-fluid"> <div class="container-fluid">
<input type="file" id="input"> <div class="form-group">
<input class="form-control-file" type="file" id="input">
</div>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<audio controls="controls" id="audio"> <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. Your browser does not support the <code>audio</code> element.
<source id="source" src="" type="audio/wav" /> <source id="source" src="" type="audio/wav" />
</audio> </audio>
</div> </div>
</div> </div>
<footer id="sticky-footer" class="footer py-4 bg-dark text-white-50" </div>
style="position: absolute; bottom: 0; width: 100%;"> </div>
<footer id="sticky-footer" class="footer fixed-bottom py-4 bg-dark text-white-50" style="width: 100%;">
<div class="container text-center"> <div class="container text-center">
<small>&copy;2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license" <small>&copy;2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license" href="https://www.ausocean.org/license">License</a>)</small>
href="https://www.ausocean.org/license">License</a>)</small>
</div> </div>
</footer> </footer>
</body> </body>

2
cmd/audio-player/main.js
View File

@ -23,7 +23,7 @@ LICENSE
*/ */
window.onload = function () { window.onload = function () {
document.getElementById('input').addEventListener('change', processData) document.getElementById('input').addEventListener('change', processData);
} }
function processData() { function processData() {