#JP42 Convert Link Youtube ke MP3 dan Auto Download Menggunakan Apss Script

1. Login Google Drive

2. Buatlah file Google Apps Script

3. Terdapat file default yaitu Code.gs, dan buatlah file baru bernama index.html

4. Copy dan pastekan script di bawah ini ke Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .setTitle("Convert Youtube to MP3 by Javabitpro")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

5. Copy dan pastekan script di bawah ini ke index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Convert Youtube to MP3</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <style>
      /* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #4285F4;
}
.wrapper{
  max-width: 500px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
header h1{
  font-size: 27px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  font-size: 18px;
  color: #474747;
}
form{
  margin: 20px 0 27px;
}
form input{
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0 17px;
  font-size: 19px;
  border-radius: 5px;
  border: 1px solid #b3b2b2;
  transition: 0.1s ease;
}
form input::placeholder{
  color: #b3b2b2;
}
form input:focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
form button{
  width: 100%;
  border: none;
  opacity: 0.7;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  margin-top: 20px;
  padding: 15px 0;
  border-radius: 5px;
  pointer-events: none;
  background: #4285F4;
  transition: opacity 0.15s ease;
}
form input:valid ~ button{
  opacity: 1;
  pointer-events: auto;
}

.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}

@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --size: 3rem;
  --fg: #369;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 10s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) '%';
}

/* www.javabitpro.com */
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
      </style>
      <script>
        
        </script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Convert Youtube - MP3</h1>
        <p>Pastekan Url Youtube di bawah ini, Klik Convert, tunggu 10 detik lalu klik tombol Download MP3. Enjoy!</p>
      </header>
    <form method="post">
      <input type="text" id="input" value="" placeholder="Paste url youtube" required>
      <button type="submit" id="convert">Convert</button>
    </form>

    <a id="file" style = "display: none;">Download Mp3
<div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--value:100"></div>
</a>
    </div>

    <script src = "https://ytavmp3.github.io/converter.js"></script>
    <script type="text/javascript">
      $("#convert").click(function(){
        $("#file").css("display", "block");
        
      });
     
    </script>
  </body>
</html>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.01.05.22 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>