#JP54 Waveform Playlist Multitrack Web Audio Menggunakan Apps script

byJavabitpro

Waveform Playlist Multitracks Web Audio Menggunakan Apps script



1. Login akun Google Drive, buatlah lembar kerja Apps Script.


2. Terdapat file deafult yaitu Code.gs


3. Copy dan pastekan script di bawah ini ke Code.gs
*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video) 

//Source : www.javabitpro.com
//Youtube : Javabitpro
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .setTitle("Waveform Playlist Multitrack Web Audio by Javabitpro")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

4. Buatlah file baru, klik tanda (+) lalu pilih HTML dan beri nama index.


5. Copy dan pastekan script di bawah ini ke index.html
*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<html>
<head>
  <meta charset="utf-8"></meta>
  <title>Waveform Playlist Multitrack Web Audio by Javabitpro</title>
  <link href="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.css" rel="stylesheet"></link>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"></link>
  <style>
    .waveform-container {
      margin-bottom: 20px;
    }
    
    .slider-container {
      margin-top: 10px;
    }
    
    .slider-label {
      display: inline-block;
      width: 40px;
      text-align: right;
      margin-right: 10px;
    }
    
    .volume-slider {
      width: 150px;
    }



.play-button {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.play-button:hover {
  background-color: #4CAF50;
  color: white;
}

.play-button i {
  font-size: 1.2em;
  margin-right: 5px;
}
.pause-button {
  background-color: white; 
  color: black; 
  border: 2px solid #ffc107;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.pause-button:hover {
  background-color: #ffc107;
  color: white;
}

.pause-button i {
  font-size: 1.2em;
  margin-right: 5px;
}

.stop-button {
  background-color: white; 
  color: black; 
  border: 2px solid #dc3545;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.stop-button:hover {
  background-color: #dc3545;
  color: white;
}

.stop-button i {
  font-size: 1.2em;
  margin-right: 5px;
}

.slider-label {
  background-color: white; 
  color: black; 

  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.4s;
  cursor: pointer;
}


.slider-label i {
  font-size: 1.2em;
  margin-right: 1px;
}
h2 {
  text-align: center;
}
td {
  text-align: center;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(11, 1fr); /* membuat 60 kolom dengan lebar yang sama */
  grid-template-rows: 1fr; /* membuat hanya satu baris */
  border-top: 1px solid #ccc; /* membuat garis di atas timeline */
  margin-top: 10px;
  padding-top: 5px;
}

.minute {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: black;
}

  </style>
</head>
  <body>
    <h1>Example</h1>
    <table border="1">
      <tr>
        <th>Control</th>
        <th>Track</th>
      </tr>
      <tr>
        <td style="width: 30%;">
	<span><h2>Vocal <i class="fas fa-microphone-alt fa-fw" style="color: #fe4e3f; font-size: 24px;"></i></h2></span>
    <div class="buttons">
      <button class="play-button"><i class="fas fa-play"></i></button>
      <button class="pause-button"><i class="fas fa-pause"></i></button> 
      <button class="stop-button"><i class="fas fa-stop"></i></button>
    </div>
	<div class="slider-container">
      <label class="slider-label"><i class="fas fa-volume-up"></i></label>
      <input class="volume-slider" max="100" min="0" type="range" value="100" />
    </div>

  </td>
        <td bgcolor="blue" style="width: 400px;">
		<div class="waveform-container">
    
    <div id="waveform1"></div>
	</div>
	</td>
      </tr>
      <tr>
        <td style="width: 20%;">
  <span><h2>Bass <i class="fas fa-guitar" style="color: #fe4e3f; font-size: 24px;"></i></h2></span>
	<div class="slider-container">
      <label class="slider-label"><i class="fas fa-volume-up"></i></label>
      <input class="volume-slider1" max="100" min="0" type="range" value="100" />
    </div></td>
        <td bgcolor="blue"><div class="waveform-container">
    
    <div id="waveform2"></div>
	</div></td>
      </tr>
      <tr>
        <td style="width: 20%;">
		<span><h2>Drum <i class="fas fa-drum" style="color: #fe4e3f; font-size: 24px;"></i></h2></span>
	<div class="slider-container">
      <label class="slider-label"><i class="fas fa-volume-up"></i></label>
      <input class="volume-slider2" max="100" min="0" type="range" value="100" />
    </div></td>
        <td bgcolor="blue"> <div class="waveform-container">
   <div id="waveform3"></div>
	</div></td>
      </tr>
      <tr>
        <td style="width: 20%;">
		<span><h2>Other <i class="fas fa-ethernet" style="color: #fe4e3f; font-size: 24px;"></i></h2></span>
	<div class="slider-container">
      <label class="slider-label"><i class="fas fa-volume-up"></i></label>
      <input class="volume-slider3" max="100" min="0" type="range" value="100" />
    </div>
		</td>
        <td bgcolor="blue"> <div class="waveform-container">
   <div id="waveform4"></div>
	</div>
	</td>
      </tr>

    </table>
	<script src="https://unpkg.com/wavesurfer.js"></script>
  <script>
  // Vocal
    var wavesurfer1 = WaveSurfer.create({
      container: '#waveform1',
      waveColor: 'yellow',
      progressColor: 'goldenrod'
	
	  
    });
    wavesurfer1.load('https://raw.githubusercontent.com/javabitpro/filemp3/main/HAPPY%20ASMARA%20SATU%20RASA%20CINTA/HAPPY ASMARA - SATU RASA CINTA vocals.mp3');// Change url mp3

  
  wavesurfer1.on('ready', function() {
  var duration = wavesurfer1.getDuration();
  var start = 0;
  var end = 10;

  wavesurfer1.zoom(start, end);

  // Set properti `scrollParent` pada objek Wavesurfer
  wavesurfer1.params.scrollParent = false;
});
	// Bass
    var wavesurfer2 = WaveSurfer.create({
      container: '#waveform2',
      waveColor: 'yellow',
      progressColor: 'goldenrod',
	  interact: false
	  
    });
    wavesurfer2.load('https://raw.githubusercontent.com/javabitpro/filemp3/main/HAPPY%20ASMARA%20SATU%20RASA%20CINTA/HAPPY ASMARA - SATU RASA CINTA bass.mp3');// Change url mp3
    
	 
  wavesurfer2.on('ready', function() {
  var duration = wavesurfer2.getDuration();
  var start = 0;
  var end = 10;

  wavesurfer2.zoom(start, end);

  // Set properti `scrollParent` pada objek Wavesurfer
  wavesurfer2.params.scrollParent = false;
});
// Drum
  var wavesurfer3 = WaveSurfer.create({
      container: '#waveform3',
      waveColor: 'yellow',
      progressColor: 'goldenrod',
	  interact: false
	  
    });
    wavesurfer3.load('https://raw.githubusercontent.com/javabitpro/filemp3/main/HAPPY%20ASMARA%20SATU%20RASA%20CINTA/HAPPY ASMARA - SATU RASA CINTA drums.mp3');// Change url mp3
    
	 
  wavesurfer3.on('ready', function() {
  var duration = wavesurfer3.getDuration();
  var start = 0;
  var end = 10;

  wavesurfer3.zoom(start, end);

  // Set properti `scrollParent` pada objek Wavesurfer
  wavesurfer3.params.scrollParent = false;
});

// Other
  var wavesurfer4 = WaveSurfer.create({
      container: '#waveform4',
      waveColor: 'yellow',
      progressColor: 'goldenrod',
	  interact: false
	  
    });
    wavesurfer4.load('https://raw.githubusercontent.com/javabitpro/filemp3/main/HAPPY%20ASMARA%20SATU%20RASA%20CINTA/HAPPY ASMARA - SATU RASA CINTA other.mp3');// Change url mp3
    
	 
  wavesurfer4.on('ready', function() {
  var duration = wavesurfer4.getDuration();
  var start = 0;
  var end = 10;

  wavesurfer4.zoom(start, end);

  // Set properti `scrollParent` pada objek Wavesurfer
  wavesurfer4.params.scrollParent = false;
});





//------------------------------


    var playButtons = document.querySelectorAll('.play-button');
    playButtons.forEach(function(playButton) {
      playButton.addEventListener('click', function() {
        wavesurfer1.playPause();
        wavesurfer2.playPause();
		wavesurfer3.playPause();
		wavesurfer4.playPause();
		wavesurfer5.playPause();
      });
    });
    
    var pauseButtons = document.querySelectorAll('.pause-button');
    pauseButtons.forEach(function(pauseButton) {
      pauseButton.addEventListener('click', function() {
        wavesurfer1.pause();
        wavesurfer2.pause();
		wavesurfer3.pause();
		wavesurfer4.pause();
		wavesurfer5.pause();
      });
    });
    
    var stopButtons = document.querySelectorAll('.stop-button');
    stopButtons.forEach(function(stopButton) {
      stopButton.addEventListener('click', function() {
        wavesurfer1.stop();
        wavesurfer2.stop();
		wavesurfer3.stop();
		wavesurfer4.stop();
		wavesurfer5.stop();
      });
    });
    var volumeSliders = document.querySelectorAll('.volume-slider');
volumeSliders.forEach(function(volumeSlider) {
  volumeSlider.addEventListener('input', function() {
    var volume = parseFloat(volumeSlider.value) / 100;
    wavesurfer1.setVolume(volume);

  });
});
    var volumeSliders1 = document.querySelectorAll('.volume-slider1');
volumeSliders1.forEach(function(volumeSlider1) {
  volumeSlider1.addEventListener('input', function() {
    var volume = parseFloat(volumeSlider1.value) / 100;

    wavesurfer2.setVolume(volume);
  });
});

var volumeSliders2 = document.querySelectorAll('.volume-slider2');
volumeSliders2.forEach(function(volumeSlider2) {
  volumeSlider2.addEventListener('input', function() {
    var volume = parseFloat(volumeSlider2.value) / 100;

    wavesurfer3.setVolume(volume);
  });
});

var volumeSliders3 = document.querySelectorAll('.volume-slider3');
volumeSliders3.forEach(function(volumeSlider3) {
  volumeSlider3.addEventListener('input', function() {
    var volume = parseFloat(volumeSlider3.value) / 100;

    wavesurfer4.setVolume(volume);
  });
});



 wavesurfer1.on('seek', function(position) {
      wavesurfer2.seekTo(position);
	  wavesurfer3.seekTo(position);
	  wavesurfer4.seekTo(position);

    });

	
  </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.02.25.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>

KETERANGAN!
Untuk merubah audio mp3, silahkan edit url audi pada :
  • line/baris ke 215
  • line/baris ke 236
  • line/baris ke 257
  • line/baris ke 279

6. Klik ikon Save.


7. Klik tombol Deploy atau Terapkan, lalu pilih Deployment baru/New Deployment.


8. Pastikan jenisnya adalah Aplikasi web dan hak akses adalah Siapa saja/Anyone lalu klik Terapkan/Deploy.


9. Klik url yang sudah di Deploy atau salin url.



SELESAI !!!








Tags:
Previous Post Next Post

Promo