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

audio-player: added media ID converter

This commit is contained in:
Trek H 2019-08-16 16:21:07 +09:30
parent a40dd4c835
commit 5678384b43
2 changed files with 105 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,66 +8,34 @@
<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" 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> </head>
<body style="height: 100%"> <body style="height: 100%">
<div class="card m-auto" style="width: 30rem;"> <div class="card m-auto" style="width: 40rem;">
<div class="card-body"> <div class="card-body">
<div class="container-fluid"> <div class="container-fluid">
<div class="form-group"> <div class="form-group">
<input class="form-control-file" type="file" id="input"> <input class="form-control-file" type="file" id="fileinput">
</div> </div>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<form action="/search" enctype="multipart/form-data" method="post" onsubmit="presubmit();"> <form action="/search" enctype="multipart/form-data" method="post" onsubmit="presubmit();">
<div class="form-group"> <div class="form-group">
<label>App key:</label> <label>App key:</label>
<input class="form-control form-control-sm" type="input" name="ak"> <input class="form-control form-control-sm" type="input" id="ak">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Media ID:</label> <label>Media ID:</label>
<input class="form-control form-control-sm" type="input" name="id" id="id"> <input class="form-control form-control-sm" type="input" id="id">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Start date or timestamp:</label> <label>Start date or timestamp:</label>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<input class="form-control form-control-sm" name="sd" type="datetime-local" id="sd" onchange="sync('sd', 'st', true);"> <input class="form-control form-control-sm" type="datetime-local" id="sd" onchange="sync('sd', 'st', true);">
</div> </div>
<div class="col"> <div class="col">
<input class="form-control form-control-sm" name="st" type="input" id="st" onchange="sync('sd', 'sd', false);"> <input class="form-control form-control-sm" type="input" id="st" onchange="sync('sd', 'sd', false);">
</div> </div>
</div> </div>
</div> </div>
@ -75,20 +43,27 @@
<label>Finish date or timestamp:</label> <label>Finish date or timestamp:</label>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<input class="form-control form-control-sm" name="fd" type="datetime-local" id="fd" onchange="sync('fd', 'ft', true);"> <input class="form-control form-control-sm" type="datetime-local" id="fd" onchange="sync('fd', 'ft', true);">
</div> </div>
<div class="col"> <div class="col">
<input class="form-control form-control-sm" name="ft" type="input" id="ft" onchange="sync('fd', 'fd', false);"> <input class="form-control form-control-sm" type="input" id="ft" onchange="sync('fd', 'fd', false);">
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<input class="btn btn-primary" type="submit" value="Search" name="submit"> <input class="btn btn-primary" type="submit" value="Get Audio" id="submit">
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="hidden" name="ts" id="ts"> <input type="hidden" id="ts">
</div> </div>
</form> </form>
<span class="form-inline mb-3">
<label>MAC:</label>
<input type="input" class="form-control form-control-sm mx-sm-3" id="ma" placeholder="00:00:00:00:00:00">
<label>Pin:</label>
<input type="input" class="form-control form-control-sm mx-sm-3" id="pn" value="V0" style="width: 3rem">
<button class="btn-sm btn-secondary" onClick="updateMID('ma','pn','id');">Convert to Media ID</button>
</span>
<div class="container-fluid"> <div class="container-fluid">
<audio class="mx-auto" controls="controls" id="audio"> <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.

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

@ -4,6 +4,7 @@ NAME
AUTHOR AUTHOR
Trek Hopton <trek@ausocean.org> Trek Hopton <trek@ausocean.org>
Alan Noble <alan@ausocean.org>
LICENSE LICENSE
This file is Copyright (C) 2018 the Australian Ocean Lab (AusOcean) This file is Copyright (C) 2018 the Australian Ocean Lab (AusOcean)
@ -23,7 +24,7 @@ LICENSE
*/ */
window.onload = function () { window.onload = function () {
document.getElementById('input').addEventListener('change', processData); document.getElementById('fileinput').addEventListener('change', processData);
} }
function processData() { function processData() {
@ -56,3 +57,89 @@ function processData() {
reader.readAsArrayBuffer(input) reader.readAsArrayBuffer(input)
} }
function sync(dateID, tsID, dateChanged) {
if (dateChanged) { // Go from date to Unix timestamp.
var s = document.getElementById(dateID).value;
if (s == "") {
document.getElementById(tsID).value = "";
} else {
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 s = document.getElementById(dateID).value;
if (s == "") {
document.getElementById(tsID).value = "";
} else {
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;
}
}
// encodeMAC encodes a MAC address into a 48-bit integer.
function encodeMAC(mac) {
if (mac.length != 17) {
return 0;
}
var enc = BigInt(0);
for (i = 15, shift = 0; i >= 0; i -= 3, shift += 8) {
var n = BigInt(parseInt(mac.substring(i, i + 2), 16));
enc += (n << BigInt(shift));
}
return enc;
}
// encodePin encodes a pin into a 4-bit integer.
function encodePin(pin) {
var enc = Number(0);
if (pin.charAt(0) == 'S') {
enc = 8;
}
var pn = Number(pin.charAt(1) - '0');
if (pin.length > 2) {
pn = pn * 10 + Number(pin.CharAt(2) - '0');
}
enc |= pn;
return enc;
}
// toMID returns a Media ID as a BigInt given a MAC address and a pin.
function toMID(mac, pin) {
if (mac == "" || pin == "") {
return 0;
}
return (encodeMAC(mac) << BigInt(4)) | BigInt(encodePin(pin))
}
// updateMID updates a Media ID element using values from MAC and pin elements.
function updateMID(mac, pin, mid) {
var macElem = document.getElementById(mac);
var pinElem = document.getElementById(pin);
var midElem = document.getElementById(mid);
if (!macElem || !pinElem || !midElem) {
return;
}
midElem.value = toMID(macElem.value, pinElem.value).toString();
}