katspaugh

651 followers · 89 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

katspaugh / dual-waveform.js

Last active February 2, 2024 15:23

	// Dual waveform

	import WaveSurfer from 'wavesurfer.js'

	const wavesurfer = WaveSurfer.create({
	container: document.body,
	url: '/examples/audio/demo.wav',
	height: 50,
	})

katspaugh / overlapping-tracks.js

Created January 9, 2024 14:58

	// Custom rendering function

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

katspaugh / region-update.js

Created January 8, 2024 15:50

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

Created January 4, 2024 20:22

	// American English vowels

	import WaveSurfer from 'wavesurfer.js'
	import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'

	// Sounds generated with `say -v 'Reed (English (US))' word`
	const vowels = ['i', 'ɪ', 'ɛ', 'æ', 'ɑ', 'ɔ', 'o', 'ʊ', 'u', 'ʌ', 'ə', 'ɝ']
	const files = ['ee', 'ih', 'hen', 'hat', 'ah', 'hot', 'oh', 'hook', 'oo', 'uh', 'ahoy', 'er']

	const table = document.querySelector('table')

katspaugh / custom-copy.js

Last active January 3, 2024 07:06

	// Custom rendering function

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

katspaugh / thumbnails.js

Last active December 24, 2023 12:41

	/*
	<html>
	<style>
	::part(thumbnails) {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	overflow: hidden;
	}
	video {

katspaugh / regions-envelope.js

Created December 8, 2023 21:13

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
	import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js'
	import EnvelopePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/envelope.esm.js'

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

katspaugh / index.html

Created December 6, 2023 12:36

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Video Annotation System</title>

	<link href="data:image/gif;" rel="icon" type="image/x-icon" />

	<!-- Bootstrap -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

katspaugh / video-set-time.js

Created December 3, 2023 10:06

	// Waveform for a video

	// Create a video element
	/*
	<html>
	<video
	src="/examples/audio/nasa.mp4"
	controls
	playsinline
	style="width: 100%; max-width: 600px; margin: 0 auto; display: block;"

katspaugh / realtime.js

Last active November 20, 2023 12:54

	// Web Audio example

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