katspaugh

644 followers · 89 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

katspaugh / cache.js

Created January 10, 2025 08:57

	import WaveSurfer from 'wavesurfer.js'

	const url = '/examples/audio/demo.wav'
	const cache = localStorage.getItem('cache' + url)

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

katspaugh / silent.js

Created January 2, 2025 08:01

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

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

	audio.addEventListener('canplay', () => {
	const wavesurfer = WaveSurfer.create({
	container: document.body,
	waveColor: 'rgb(200, 0, 200)',

katspaugh / outside-region.js

Last active December 28, 2024 05:45

	// Custom styling via CSS

	/*
	<html>
	<style>
	#waveform ::part(scroll) {
	padding: 15px;
	}

	#waveform ::part(outside) {

katspaugh / region-color.js

Created December 15, 2024 08:58

	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 ws = WaveSurfer.create({
	container: document.body,
	waveColor: 'rgb(200, 0, 200)',

katspaugh / regions-only-one.js

Created December 9, 2024 07:54

	// Regions plugin

	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 ws = WaveSurfer.create({

katspaugh / panner.js

Created September 25, 2024 07:27

wavesurfer stereo panner

	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.js

Created August 13, 2024 09:40

	// 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.js

Created August 11, 2024 12:21

	// 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 / split-channels.js

Created July 26, 2024 10:17

	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-peaks.js

Created May 11, 2024 13:33

	// 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)',

NewerOlder