wavesurfer.xyz

by Eugene Trounev

HTML

<div id="waveform">

</div>
<script src="https://unpkg.com/wavesurfer.js@7"></script>
<!-- <audio id="audioElement" src="path/to/your/audio/file.wav"></audio>
<canvas id="waveformCanvas" width="800" height="200"></canvas> -->

JavaScript

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  url: 'https://upload.wikimedia.org/wikipedia/commons/2/28/Caldhu.wav',
  "height": 128,
  /* "width": 771, */
  "splitChannels": false,
  "normalize": false,
  "waveColor": "#ff4e00",
  "progressColor": "#dd5e98",
  "cursorColor": "#ddd5e9",
  "cursorWidth": 2,
  "barWidth": 3,
  "barGap": null,
  "barRadius": 30,
  "barHeight": null,
  "barAlign": "",
  "minPxPerSec": 1,
  "fillParent": true,
  "mediaControls": true,
  "autoplay": false,
  "interact": true,
  "dragToSeek": true,
  "hideScrollbar": false,
  "audioRate": 1,
  "autoScroll": true,
  "autoCenter": true,
  "sampleRate": 8000
});

/* wavesurfer.on('click', () => {
  wavesurfer.play()
}) */
/* // Create an Audio Context
const audioContext = new (window.AudioContext || window.webkitAudioContext)()

// Load your audio file and decode it into an AudioBuffer
function loadAudioFile(url, callback) {
  const request = new XMLHttpRequest()
  request.open("GET", url, true)
  request.responseType = "arraybuffer"

  request.onload = function () {
    audioContext.decodeAudioData(
      request.response,
      (buffer) => {
        callback(buffer)
      },
      (e) => {
        console.error("Error decoding audio data: ", e)
      },
    )
  }

  request.send()
}

// Example usage
loadAudioFile("https://upload.wikimedia.org/wikipedia/commons/2/28/Caldhu.wav", (buffer) => {
  const bufferSource = audioContext.createBufferSource()
  bufferSource.buffer = buffer
  bufferSource.connect(audioContext.destination)
  bufferSource.start()

  // Set up the AnalyserNode to analyze the waveform data
  const analyser = audioContext.createAnalyser()
  analyser.fftSize = 2048
  const bufferLength = analyser.frequencyBinCount
  const dataArray = new Uint8Array(bufferLength)

  // Get the canvas context and set up the drawing loop
  const canvas = document.getElementById("waveformCanvas")
  const ctx = canvas.getContext("2d")

  function draw() {
   ...