Skip to content

Instantly share code, notes, and snippets.

@ablwr
Created Feb 14, 2020
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>BWF MetaEdit display</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
width: 100%;
}
h4 {
padding: 0;
margin: 0;
}
.file {
display: grid;
}
.top {
display: grid;
grid-auto-flow: row;
grid-template-columns: auto 13em;
align-items: end;
}
.expandStatus, .saveStatus {
font-size: 2em;
width: 3em;
float: right;
}
.core, .bext, .info {
display: flex;
flex-flow: row wrap;
}
input {
margin-left: 3px;
margin-right: 9px;
}
</style>
</head>
<body>
<div id="file1" class="file">
<div class="top">
<div class="filepath">/home/ashley/path/path/path/path/path/another-path/path/to/a/file-with-some-metadata-in-it.wav</div>
<div class="actions">
<button class="saveStatus">✔</button>
<button class="expandStatus">➖</button>
</div>
<div class="technicalData">
<!-- <div>{Filesize (human-readable)} {Format} {CodecID}, {Duration},{Channels} Channels {SampleRate} {BitRate} {BitsPerSample}</div> -->
<div>32 MiB Wave 0003, 00:02:57.000, 2 Channels, 44.1 kHz, 128 Kbps, 16 bit</div>
</div>
<div>
<button>XMP</button>
<button>aXML</button>
<button>iXML</button>
</div>
<div class="importantInfo">
<!-- Show these if there is anything to show -->
<!-- <div>Errors</div>
<div>Information</div>
<div>UnsupportedChunks</div> -->
</div>
</div>
<!-- Show these only if options is on -->
<!-- <div>MD5Stored</div> -->
<!-- <div>MD5Generated</div> -->
<h4>CORE</h4>
<div class="core">
<div>LoudnessValue <input type="text" size="2"></input></div>
<div>LoudnessRange <input type="text" size="2"></input></div>
<div>MaxTruePeakLevel <input type="text" size="2"></input></div>
<div>MaxMomentaryLoudness <input type="text" size="2"></input></div>
<div>MaxShortTermLoudness <input type="text" size="2"></input></div>
<div>CodingHistory <input type="text" size="2"></input></div>
</div>
<h4>BEXT</h4>
<div class="bext">
<div>Version #<input type="text" size="1"></input></div>
<div>Description <input type="text" size="10"></input></div>
<div>Originator <input type="text" size="10"></input></div>
<div>OriginatorReference <input type="text" size="10"></input></div>
<div>OriginationDate <input type="text" size="8"></input></div>
<div>OriginationTime <input type="text" size="8"></input></div>
<div>TimeReference <input type="text" size="8"></input> (HH:MM:SS.mmm)</div>
</div>
<div class="umid">
<!-- only show if BEXT Version 1 -->
<!-- <div>UMID <input type="text" size="32"></input></div> -->
</div>
<h4>INFO</h4>
<div class="info">
<div> Archival Location (IARL) <input type="text" size="10"></input></div>
<div> Artist (IART) <input type="text" size="10"></input></div>
<div> Commissioned (ICMS) <input type="text" size="10"></input></div>
<div> Comments (ICMT) <input type="text" size="10"></input></div>
<div> Copyright (ICOP) <input type="text" size="10"></input></div>
<div> Creation date (ICRD) <input type="text" size="10"></input></div>
<div> Engineer (IENG) <input type="text" size="10"></input></div>
<div> Genre (IGNR) <input type="text" size="10"></input></div>
<div> Keywords (IKEY) <input type="text" size="10"></input></div>
<div> Medium (IMED) <input type="text" size="10"></input></div>
<div> Name (Title) (INAM) <input type="text" size="10"></input></div>
<div> Product (Album) (IPRD) <input type="text" size="10"></input></div>
<div> Subject (ISBJ) <input type="text" size="10"></input></div>
<div> Software (ISFT) <input type="text" size="10"></input></div>
<div> Source (ISRC) <input type="text" size="10"></input></div>
<div> Source Form (ISRF) <input type="text" size="10"></input></div>
<div> Technician (ITCH) <input type="text" size="10"></input></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment