1.1kvistas

Leer: WaveSurfer.Js: Crea WaveForm con Javascript

Este es el demo que prepare para mostrar el uso de WaveSurfer este plugin javascript, el cual utiliza Web Audio API y HTML5 Canvas, para poder graficar o dibujar este waveform.

Incluí en este algunas formas de poder crear una pequeña lista de reproducción manual, aunque no es el tema en si, es una forma sencilla de hacerlo, trataremos de hacer algo mas complejo mas adelante, estaré trabajando en algo mas.

Los invito a todos en la comunidad que intenten mejorar esto, y lo publiquen en los comentarios o me contacten para yo cooperar. Se que hay muchos expertos en javascript que pueden colaborar. Y sin mas que decirles gente aquí les deje el código y el demo de lo que pude trabajar.



Probando con otros archivos de audio

Ahora probemos cargando otros archivos de audio para ver una forma diferente usando WaveSurfer






<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>wavesurfer.js</title>
  <meta name="description" content="wavesurfer.js is an HTML 5 audio player and waveform visualizer, made with JavaScript and Web Audio.
">
<!-- Incluimos wavesurfer.js desde cdnjs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.4/wavesurfer.min.js"></script>

    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  
</head>
  <body>
<!-- Define los elementos HTML donde waveform se cargara -->
  <div id="waveform">
  <progress id="progress" class="progress progress-striped progress-warning" value="0" max="100"></progress>
  </div>
  <script>
	function tiempo(time){
		var hours = Math.floor( time / 3600 );  
		var minutes = Math.floor( (time % 3600) / 60 );
		var seconds = time % 60;
		 
		//Anteponiendo un 0 a los minutos si son menos de 10 
		minutes = minutes < 10 ? '0' + minutes : minutes;
		 
		//Anteponiendo un 0 a los segundos si son menos de 10 
		seconds = seconds < 10 ? '0' + seconds : seconds;
		 
		return result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
	}
    var ctx = document.createElement('canvas').getContext('2d');
    var linGrad = ctx.createLinearGradient(0, 0, 0, 170);
	linGrad.addColorStop(0, "#FF9751");
	linGrad.addColorStop(0.5, "#FF3A00");
	linGrad.addColorStop(0.75, "#FFBF99");
	linGrad.addColorStop(1, "#FFBF99");

    var wavesurfer = WaveSurfer.create({
      // Usa ID o NOMBRE DE CLASE(CLASS) del elemento que creo como selector
      container: '#waveform',
      // El color puede ser para sea un simple Color CSS o gradiente Canvas
      waveColor: linGrad, // es esto o esto '#000'
      progressColor: '#959595',
      cursorColor: '#fff',
      // Este parametro hace que el aspecto del waveform se parezca a el reproductor de SoundCloud
      barWidth: 2,
	  height: 200,
	  interact: true
    });
	
    wavesurfer.on('loading', function (percents) {
	  document.getElementById('progress').style.display = 'block';
      document.getElementById('progress').value = percents;
    });
    wavesurfer.on('ready', function (percents) {
      document.getElementById('progress').style.display = 'none';
	  wavesurfer.play();
    });
	  wavesurfer.on('audioprocess', function () {
	  document.getElementById('time').innerHTML=tiempo(parseInt(wavesurfer.getCurrentTime()))+'-'+tiempo(parseInt(wavesurfer.getDuration()));
    });
    wavesurfer.load('https://programacionx.net/demos/waveform/media/demo.wav');
  </script>

  <div class="controls">
    <button id="time" type="button" class="btn btn-primary">00:00</button>
    <button type="button" class="btn btn-primary" onclick="wavesurfer.skipBackward()">
      <i class="fa fa-step-backward"></i>
      Atras
    </button>

    <button type="button" class="btn btn-primary" onclick="wavesurfer.playPause()">
      <i class="fa fa-play"></i>
      Play
      /
      <i class="fa fa-pause"></i>
      Pausa
    </button>

    <button type="button" class="btn btn-primary" onclick="wavesurfer.skipForward()">
      <i class="fa fa-step-forward"></i>
      Adelante
    </button>

    <button type="button" class="btn btn-primary" onclick="wavesurfer.toggleMute()">
      <i class="fa fa-volume-off"></i>
      Silenciar
    </button>
	</div> <br />
<h3>Probando con otros archivos de audio	</h3>
<p>Ahora probemos cargando otros archivos de audio para ver una forma diferente usando WaveSurfer</p>
	<button onclick="wavesurfer.load('https://programacionx.net/demos/waveform/media/Iron_Man_OST-Mark_II.wav')" type="button" class="btn btn-outline-warning btn-lg btn-block">Iron Man OST -  Mark II</button>
	<button onclick="wavesurfer.load('https://programacionx.net/demos/waveform/media/Eiffel_65-Blue_Da_Ba_Dee.wav')" type="button" class="btn btn-outline-warning btn-lg btn-block">Eiffel 65 - Blue (Da Ba Dee)</button>
	<button onclick="wavesurfer.load('https://programacionx.net/demos/waveform/media/IRON_MAN_TRIBUTE_Black_Sabbath.wav')" type="button" class="btn btn-outline-warning btn-lg btn-block">IRON MAN TRIBUTE Black Sabbath</button>
  </body>
</html>