Youtube audio splitter

Youtube audio splitting using spleeter2019, Spleeter: A Fast And State-of-the Art Music Source Separation Tool With Pre-trained Models

by thepirat000

HTML

<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>

<p class="banner-message">
Moved to:

<a href="https://bit.do/spleeter2">https://bit.do/spleeter2</a>

</p>

<div style="display:none;" id="div-main" class="banner-message">
  <p style="font-size: x-large;">YouTube audio splitter</p>
  <div>
    <input type="checkbox" id="chk-hf" value="hf"> <label for="chk-hf">Include HF</label>
  </div>
  <br/>
  <select id='type' title="Type">
    <option value='karaoke' selected>Karaoke</option>
		<option value='2stems' selected>2 stems (Vocals + Accompaniment)</option>
		<option value='4stems' selected>4 stems (Bass, Drums, Vocals, Other)</option>
		<option value='5stems'>5 stems (Piano, Bass, Drums, Vocals, Other)</option>
  </select>
  <br/> <br/>
  <div>
    <span>URL or vid:</span>
    <input type="text" id="url" value="" />
    <button id="btn-split">Split</button>
    <div class="loader" id="spinner" style="display:none;" ></div>
    <p id="duration"></p>
  </div>
  <div id="work-log" class="worklog" style="display:none;">
   
  </div>
</div>
<br/>
<div class="banner-message" style="display:none;">
  <div>
    <span>Youtube search:</span>
    <input type="search" id="search" name="search_query" value="" />
    <button id="btn-search">Search</button>
  </div>
  
  <div id="search-results">

  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.wait {
  cursor: wait;
  user-select: none;
}

.worklog {
  height:120px;
  border:1px solid #ccc;
  overflow: auto;
  font-size: x-small;
}

.banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 15px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
}
.clickable {
  text-align: left;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.loader {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 32px;
  height: 32px;
  -webkit-animation: spin 700ms linear infinite; /* Safari */
  animation: spin 700ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript

gapi.client.setApiKey('AIzaSyDuekF_Hf7i2GqDZ_6ExQ1Iyfn_P_-ACkg');

// find elements
var buttonSplit = $("#btn-split");
var buttonSearch = $("#btn-search");
var max_duration_mins = 25;
var split_api = 'https://spleeter.eastus.cloudapp.azure.com/yt';

// handle click and add class
buttonSplit.on("click", function(){
  let vid = validateUrl();
  let format = $("#type").val();
  if (vid === null || format === null) {
  	return;
  }

  startWait();
  
  // Validate duration
  getYoutubeVideoDuration(vid, function(dur) {
  	let durationInMinutes = parseInt(dur.split(':')[0]) * 60 + parseInt(dur.split(':')[1]);
    if (dur == "00:00:00") {
    	alert("Can't process live videos");
      stopWait();
      return;
    }
  	if (durationInMinutes > max_duration_mins) {
    	alert("Video duration must be less than " + max_duration_mins + " minutes");
      stopWait();
      return;
    }
    
    // Split !
    split(vid, format);
    
    
  });
});

buttonSearch.on("click", function() {
	let q = $("#search").val();
  if (!q) {
  	return;
  }
  if (q.length < 3) {
  	return;
  }
  $(this).attr("disabled", true);
  $('#search-results').empty();
  let restRequest = gapi.client.request({
    'path': 'youtube/v3/search',
    'params': {'q': q, 'part': 'snippet', 'maxResults': 25, 'type': 'video'}
  });
  restRequest.execute(function(resp) { 
      //$('#info').text(JSON.stringify(resp.items[0].id.videoId));
      for (let i in resp.items){
      		if (resp.items[i].id.videoId) {
            $('<div/>', {
                id: 'result' + i,
                "class": 'clickable',
                title: resp.items[i].id.videoId
            }).appendTo('#search-results');
          	$('<img/>', {
            		style: 'vertical-align:middle',
                src: resp.items[i].snippet.thumbnails.default.url
            }).appendTo('#result' + i);
            $('<span/>', {
                html: resp.items[i].snippet.title
            }).appendTo('#result' + i);
           ...