Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
<script type="text/javascript" src="/static/assets/js/tagger.js"></script>
<script src="https://unpkg.com/moment"></script>
<!-- mediainfo.js for getting length of audio files like m4a/aif -->
<script src="https://unpkg.com/mediainfo.js@0.1.4/dist/mediainfo.min.js"></script>
<!-- page main content -->
<div class="container-fluid" style='color: {{textColor5}}' onload='checkFileAPI();'>
<div style="margin-top:-30px;">
<!-- Header Text -->
<h5 class="widgettitle">Use a Discogs URL or local files to generate a timestamped tracklist and metadata tags.
</h5>
<hr>
<!-- inputs -->
<div class="container" style='padding-right:0;margin-left:0;margin-right:0;'>
<div class="row">
<!-- discogs input -->
<div class="col" style='min-width: 200px; padding-left:0;padding-right:0;'>
<div id="drop-area">
<form class="my-form">
<h7>Upload multiple files with the file dialog or by dragging and dropping files here.</h7>
<br>
<input style="cursor: pointer;" type="file" id="file" multiple="multiple" />
</form>
</div>
</div>
<!-- drag & drop -->
<div class="col" style='min-width: 200px; padding-left:0;padding-right:0;'>
<div class="form-group" style="text-align:center;margin-top:5%">
<div id='taggerErrDisplay'></div>
<input size="22" type="text" placeholder='Discogs URL' name="url" id="urlInput">
<button style="cursor: pointer;" id='urlInputButton' name="data" type="button"
onclick="submitDiscogsURL(document.getElementById('urlInput').value); ">Submit</button>
</div>
</div>
</div>
</div>
<!-- loading spinner -->
<div style='display: none;' id='loading'><div class="loader"></div><a>Loading...</a></div>
<style>
.loader {
border: 10px solid #f3f3f3; /* Light grey */
border-top: 10px solid #3498db; /* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<!-- new tagger output -->
<hr>
<h3>Timestamped Tracklist:</h3>
<div class="container" style='padding-right:0;margin-left:0;margin-right:0;'>
<div class="row">
<!-- textarea -->
<div class="col" style='min-width: 200px; padding-left:0;padding-right:0;'>
<textarea style='resize: none;' class="w-100 h-100 inputbox" id="inputBox" rows="7" cols="44" placeholder="Tracklist generated by http://tagger.site:
00:00 - 09:29 01 - wedding song
09:29 - 13:31 02 - she
13:31 - 19:14 03 - long song
19:14 - 20:30 04 - sea gull
20:30 - 24:42 05 - for priscilla
24:42 - 34:14 06 - the delta song
34:14 - 39:35 07 - why "></textarea>
</div>
<!-- table -->
<div class="col" style='min-width: 200px; padding-left:0;padding-right:0;'>
<table class="w-100 h-100" align="left" style="white-space:nowrap; table-layout: fixed;"
id="adjustments">
<tbody>
<!-- Columns -->
<th style="text-align:center; width: 6%;">
<select class='taggerOptions' id="taggerOption1">
<option value="startTime" selected>start</option>
<option value="blank">(blank)</option>
</select>
<select class='taggerOptions' id="taggerOption2">
<option value="dash" selected><a style="text-align:center;">-</a></option>
<option value="blank">(blank)</option>
</select>
<select class='taggerOptions' id="taggerOption3">
<option value="endTime" selected>end</option>
<option value="blank">(blank)</option>
</select>
<select class='taggerOptions' id="taggerOption4">
<option value="title">title</option>
</select>
<select class='taggerOptions' id="taggerOption5">
<option value="artist">artist</option>
<option value="blank" selected>(blank)</option>
</select>
</th>
</tbody>
</table>
</div>
</div>
<div class='row'>
<button class="btn default copyButton" style="cursor: pointer; width: 100%;" id='tracklistCopy' onclick="copyToClipboard('inputBox')" type="button">Copy 0 Chars to Clipboard</button>
<script>
document.getElementById('inputBox').addEventListener('input', function() {
$("#tracklistCopy").text(`Copy ${($('#inputBox').val().length)} Chars to Clipboard`);
});
$('#inputBox').keyup(function(){
$("#tracklistCopy").text(`Copy ${($(this).val().length)} Chars to Clipboard`);
});
$("#inputBox").change( function() {
$("#tracklistCopy").text(`Copy ${($(this).val().length)} Chars to Clipboard`);
});
$("#inputBox").keyup(function(){
$("#tracklistCopy").text(`Copy ${($(this).val().length)} Chars to Clipboard`);
});
</script>
<div id='checkboxURLTitlesFileTimes' class="container" style="display:none">
<a>Check box to use URL input song titles with file timestamps:<input id='useUrlTitlesCheck' type="checkbox"/></a>
</div>
</div>
</div>
<!-- new discogstagger output -->
<hr>
<h3>Comma-Separated Discogs Tags:</h3>
<div class="container" style='padding-right:0;margin-left:0;margin-right:0;'>
<div class="row">
<!-- textarea -->
<div class="col" style='display:inline-block;position:relative; min-width: 300px; padding-left:0;padding-right:0;'>
<textarea style='resize: none;display:block;' class="w-100 h-100 inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
</div>
<!-- table -->
<div class="col" style='min-width: 300px; padding-left:0;padding-right:0;'>
<!-- discogstagger options table -->
<table class="w-100 h-100" align="left" style="white-space:nowrap; table-layout: fixed;"
id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked>
</th>
<th style="text-align:center; width: 14%;">Tags Type</th>
<th style="text-align:center; width: 20%;">Tags</th>
</tr>
<script>
$(document).ready(function () {
//release artist
var releaseArtistsSlider = document.getElementById("releaseArtistsSlider");
var releaseArtistsSliderPercent = document.getElementById("releaseArtistsSliderPercent");
releaseArtistsSliderPercent.innerHTML = `${releaseArtistsSlider.value}%`; // Display the default releaseArtistsSlider value
// Update the current releaseArtistsSlider value (each time you drag the releaseArtistsSlider handle)
releaseArtistsSlider.oninput = function () {
releaseArtistsSliderPercent.innerHTML = `${this.value}%`;
prepUpdateTagsBox()
}
//release info
var releaseInfoSlider = document.getElementById("releaseInfoSlider");
var releaseInfoSliderSliderPercent = document.getElementById("releaseInfoSliderPercent");
releaseInfoSliderSliderPercent.innerHTML = `${releaseInfoSlider.value}%`; // Display the default releaseInfoSlider value
// Update the current releaseInfoSlider value (each time you drag the releaseInfoSlider handle)
releaseInfoSlider.oninput = function () {
releaseInfoSliderPercent.innerHTML = `${this.value}%`;
prepUpdateTagsBox()
}
//tracklist
var tracklistSlider = document.getElementById("tracklistSlider");
var tracklistSliderPercent = document.getElementById("tracklistSliderPercent");
tracklistSliderPercent.innerHTML = `${tracklistSlider.value}%`;
tracklistSlider.oninput = function () {
tracklistSliderPercent.innerHTML = `${this.value}%`;
prepUpdateTagsBox()
}
//combinations
var combinationsSlider = document.getElementById("combinationsSlider");
var combinationsSliderPercent = document.getElementById("combinationsSliderPercent");
combinationsSliderPercent.innerHTML = `${combinationsSlider.value}%`;
combinationsSlider.oninput = function () {
combinationsSliderPercent.innerHTML = `${this.value}%`;
prepUpdateTagsBox()
}
})
</script>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox"
checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" min="0" max="100" value="100" onchange="prepUpdateTagsBox()"
id="releaseArtistsSlider">
<span id="releaseArtistsSliderPercent"></span>
<div class='row'>
<div class='col'
style='font-size: 15px;white-space:nowrap;text-align:center'
id='releaseArtistsNumber'>0 chars</div>
<div class='col'
style='font-size: 15px;white-space:nowrap;text-align:center'
id='releaseArtistsTagNum'>0/0 tags</div>
</div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox"
checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Album</td>
<td style="text-align:center;">
<input type="range" min="0" max="100" value="100" onchange="prepUpdateTagsBox()"
id="releaseInfoSlider">
<span id="releaseInfoSliderPercent"></span>
<div class='row'>
<div class='col' style='font-size: 15px;white-space:nowrap;text-align:center'
id='releaseInfoNumber'>0 chars</div>
<div class='col' style='font-size: 15px;white-space:nowrap;text-align:center'
id='releaseInfoTagNum'>0/0 tags</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked=""
onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td style="text-align:center;">
<input type="range" min="0" max="100" value="100" onchange="prepUpdateTagsBox()"
id="tracklistSlider">
<span id="tracklistSliderPercent"></span>
<div class='row'>
<div class='col' style='font-size: 15px;white-space:nowrap;text-align:center'
id='tracklistNumber'>0 chars</div>
<div class='col' style='font-size: 15px;white-space:nowrap;text-align:center'
id='tracklistTagNum'>0/0 tags</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox"
checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td style="text-align:center;">
<input type="range" id="combinationsSlider" min="0" max="100" value="100"
onchange="prepUpdateTagsBox()">
<span id="combinationsSliderPercent">100%</span>
<div class='row'>
<div class='col' style='font-size: 15px;white-space:nowrap;text-align:center'
id='combinationsNumber'>0 chars</div>
<div class='col' style='font-size: 15px;white-space:nowrap;text-align:center'
id='combinationsTagNum'>0/0 tags</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='row'>
<button class="btn default copyButton" style="cursor: pointer; width: 100%;" id='copyToClipboarad'
onclick="copyToClipboard('tagsBox')" type="button"><div id="tagsCharCount">Copy 0 Chars to Clipboard</div></button>
</div>
<script>
$("#tagsBox").bind('input propertychange', function() {
$("#tagsCharCount").text(`Copy ${($(this).val().length)} Chars to Clipboard`);
});
</script>
</div>
<!-- Changelog -->
<hr>
<h3>Changelog:</h3>
<div class="container" style='padding-right:0;margin-left:0;margin-right:0;'>
<ul>
<li>10/25/2022: Added new checkbox 'Check box to use URL input song titles with file timestamps' which will appear when a Discogs URL is used as input. If selected, the next time you drag/choose files, it will use the song title values from the discogs url input, but use the timestamps from your files.</li>
<li>04/17/2021: Added loading spinner when tags are being generated, changed artist tags generation system so that tags for each artist are organized smarter.</li>
<li>11/18/2020: tagger.site now accepts a Discogs URL as input by appending the Discogs URL after tagger.site. So If you visit <a class='hoverURLClassBody' href='https://tagger.site/https://www.discogs.com/New-Golden-Wings-Its-Rough-Its-Tough/release/5390422'>https://tagger.site/https://www.discogs.com/New-Golden-Wings-Its-Rough-Its-Tough/release/5390422</a> it will have the Discogs data already generated when the page loads.</li>
<li>11/17/2020: .cue files now work for generating a timestamped tracklist, and I improved the error handling for <a class='hoverURLClassBody' href='https://www.discogs.com/New-Golden-Wings-Its-Rough-Its-Tough/release/5390422'>release URLs like this</a> which have a broken artist page. </li>
</ul>
<h3>Roadmap:</h3>
<div class="container" style='padding-right:0;margin-left:0;margin-right:0;'>
<ul>
<li>10/25/2022: Currently working on a react.js rewrite, as well as adding tons of new features.</li>
</ul>
</div>
</div>
</div>
<!-- page css -->
<style>
.copyButton {
border: 2px solid black;
}
table,
th,
td {
border: 2px solid black;
background: white;
color: black;
height: 100%;
white-space: normal;
word-wrap: break-word;
}
textarea {
font-family: "Lucida Console";
/* font-size: 18px; */
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var discogs_url = `{{discogs_url}}`
if(discogs_url && discogs_url!=''){
submitDiscogsURL(discogs_url)
}
//call function to set drag and drop colors
setDragAndDropColors()
function setDragAndDropColors() {
var sheet = document.createElement('style')
let innerHTMLHoverColorStyle = `
#drop-area.highlight {
border-color: {{LightVibrant}};
}
#drop-area {
border: 2px dashed {{textColor5}};
}
`;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
})
</script>