katspaugh

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/stereo.mp3',
  mediaControls: true,
})

katspaugh

// Record plugin

import WaveSurfer from 'https://unpkg.com/[email protected]/dist/wavesurfer.esm.js'
import RecordPlugin from 'https://unpkg.com/[email protected]/dist/plugins/record.esm.js'

const wavesurfer2 = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',

katspaugh

// Regions click through

import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'

// Initialize the Regions plugin
const regions = RegionsPlugin.create()

// Create a WaveSurfer instance
const wavesurfer = WaveSurfer.create({

katspaugh

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/stereo.mp3',
  splitChannels: true,
  mediaControls: true,
})

katspaugh

// Huge randomized peaks array

import WaveSurfer from 'wavesurfer.js'

const peaks = Array.from({ length: 1000000 }, (_, i) => Math.sin(i * Math.random() * 0.01))

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',

katspaugh

// Regions plugin

import WaveSurfer from 'https://unpkg.com/[email protected]/dist/wavesurfer.esm.js'
import RegionsPlugin from 'https://unpkg.com/[email protected]/dist/plugins/regions.esm.js'

// Create an instance of WaveSurfer
const ws = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',

katspaugh

addEventListener('fetch', event => {
  event.respondWith(handleSSE(event.request))
});

const sseServerUrl = 'https://safe-events.safe.global/events/sse';

async function handleSSE(request) {
  // Parse the incoming request URL
  const incomingUrl = new URL(request.url);

katspaugh

import WaveSurfer from 'wavesurfer.js'
import WebAudioPlayer from 'wavesurfer.js/dist/webaudio.js'

const media = new WebAudioPlayer()
media.src = '/examples/audio/audio.wav'

function playSegment(fromTime, toTime) {
  media.currentTime = fromTime
  media.play()
  media.stopAt(toTime)

katspaugh

// Silent mode

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  backend: 'WebAudio',
  peaks: [

katspaugh

// Web Audio example

import WaveSurfer from 'wavesurfer.js'

// Create a WaveSurfer instance and pass the media element
const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav'