Skip to content

Instantly share code, notes, and snippets.

@blha303
Last active December 12, 2016 14:05
Show Gist options
  • Save blha303/bf551067b864b34b203a57656c11f307 to your computer and use it in GitHub Desktop.
Save blha303/bf551067b864b34b203a57656c11f307 to your computer and use it in GitHub Desktop.
A javascript thing to get ukulele tab charts quickly. https://b303.me/uketabs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UkeTabGenerator</title>
</head>
<body>
<form id="form">
<input type="text" id="tabs" style="width:70%" value="E♭|F7|B♭7|G♭" autofocus>
<input type="submit">
</form>
<div id="display"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function showtabs() {
var tabs = $("input#tabs").val().replace(/♭/g, "b");
window.location.hash = tabs.replace(/ /g, ",")
// If multiple chords, support these separators
$.each(" ,|/", function(i,s){
if (tabs.indexOf(s) != -1 && tabs.split) tabs = tabs.split(s);
});
// If only one chord, we need an array
if (!$.isArray(tabs)) {
tabs = [tabs];
}
for (var i=0;i<tabs.length;i++) {
if (tabs[i].indexOf("#") != -1) {
if (!window.sharpalertshown) alert("All sharp chords must be converted to their flat counterpart (D# = Eb)");
window.sharpalertshown = true;
}
else if (tabs[i].indexOf("n") != -1) {
$("<br>").appendTo($('#display'));
} else {
newimg = $("<img class='tabimg'>");
newimg.bind("error", function(e){
e.target.style.display="none"
});
newimg.attr("src", "https://ukutabs.com/chords/" + tabs[i] + "%20.png");
newimg.appendTo($('#display'));
}
}
}
window.onload = function() {
if (window.location.hash) {
tabs = window.location.hash.substr(1)
$("#tabs").val(tabs)
$("#form").submit()
}
}
$("#form").bind("submit", function(e){
e.preventDefault();
$("#display").empty();
showtabs()
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment