Skip to content

Instantly share code, notes, and snippets.

@williamho

williamho/mediatags.html

Last active February 15, 2017 02:40
Show Gist options
  • Save williamho/52d8d1123c6a66cb29242f7a17735d71 to your computer and use it in GitHub Desktop.
Save williamho/52d8d1123c6a66cb29242f7a17735d71 to your computer and use it in GitHub Desktop.
Download ZIP
Frontend JS to extract title/artist from audio files
Raw
mediatags.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Song metadata</title>
</head>
<body>
<script src="https://rawgit.com/aadsm/jsmediatags/master/dist/jsmediatags.min.js"></script>
<!-- Remove webkitdirectory and directory for single file input -->
<!--
<input id="file-input" type="file" id="input" accept=".mp3,.ogg,.wav,.wma,.flac" webkitdirectory="" directory="">
-->
<input id="file-input" type="file" id="input" accept=".mp3,.ogg,.wav,.wma,.flac" multiple="">
<div id="output"></div>
<script>
(function(){
var d = document;
var input = d.querySelector("#file-input");
var output = d.querySelector("#output");
input.addEventListener("change", function(event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
jsmediatags.read(file, {
onSuccess: function(result) {
var tags = result.tags || {};
var extracted = {
title: tags.title,
artist: tags.artist
};
var p = d.createElement("p");
p.innerHTML = extracted.title + " by " + extracted.artist;
output.appendChild(p);
},
onError: function(x) {
console.log(x);
}
});
}
}, false);
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment