katspaugh

// Regions plugin

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7.7.6/dist/wavesurfer.esm.js'
import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@7.7.6/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'

katspaugh

import Multitrack from 'https://unpkg.com/wavesurfer-multitrack'
import WebAudioPlayer from 'https://unpkg.com/wavesurfer-multitrack/dist/webaudio.js'

const audioContext = new AudioContext()

const GAIN = 2

const multitrack = Multitrack.create(
  [
    {

katspaugh

const multitrack = Multitrack.create(
  [
    {
      id: 0,
      options: {
        waveColor: 'hsl(161, 87%, 49%)',
        progressColor: 'hsl(161, 87%, 20%)',
      },
      url: '/examples/audio/audio.wav',
    },

katspaugh

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

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

katspaugh

// Set height on click

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/audio.wav',
})

katspaugh

// Customized Timeline plugin

import WaveSurfer from 'wavesurfer.js'
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'

// Create a timeline plugin instance with custom options
const topTimeline = TimelinePlugin.create({
  height: 20,
  insertPosition: 'beforebegin',
})