katspaugh’s gists

katspaugh / audio.js

Created October 16, 2023 12:55

	/*
	<html>
	<audio controls src="https://assets.uitsprekend.webleren.be/s3fs-public/2023-03/TH-Z-TE-2%20%282%29_0.mp3" />
	</html>
	*/

katspaugh / gist:287d9cb11765ab0229f7d03bd89e84c9

Created October 16, 2023 12:53

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

	const wavesurfer = WaveSurfer.create({
	container: document.body,
	waveColor: 'rgb(200, 0, 200)',
	progressColor: 'rgb(100, 0, 100)',
	url: 'https://assets.uitsprekend.webleren.be/s3fs-public/2023-03/TH-Z-TE-2%20%282%29_0.mp3',
	})

	wavesurfer.on('click', () => {

katspaugh / zoom-timeline.js

Created October 6, 2023 08:05

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
	import TimelinePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.esm.js'

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

katspaugh / line.js

Last active September 29, 2023 17:38

	// Custom rendering function

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

	const wavesurfer = WaveSurfer.create({
	container: document.body,
	waveColor: 'rgb(200, 0, 200)',
	progressColor: 'rgb(100, 0, 100)',
	url: '/examples/audio/demo.wav',
	renderFunction: (channels, ctx) => {

katspaugh / wavesurfer-flex.js

Created September 28, 2023 16:20

	/*
	<html>
	<div style="display: flex">
	<div id="container" style="width: 600px"></div>
	</div>
	</html>
	*/

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

katspaugh / volume-meter.js

Created September 4, 2023 17:39

	// Record plugin

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
	import RecordPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/record.esm.js'

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

katspaugh / custom-media.js

Last active September 3, 2023 07:59

	/*
	<html>
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Tsunami_by_hokusai_19th_century.jpg/2880px-Tsunami_by_hokusai_19th_century.jpg" width="300" />
	<p>Drag the blue line to change the image opacity 👇</p>
	</html>
	*/

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

katspaugh / video-source.js

Created August 28, 2023 06:15

	// Waveform for a video

	// Create a video element
	/*
	<html>
	<video
	width="620"
	controls
	poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
	<source

katspaugh / safe-cells.js

Created August 25, 2023 15:59

	// Generate unique avatars based on Ethereum addresses.
	// It uses celluar automata to generate the avatars which are unique for each address.

	// Define the color pallets.
	// Each pallet is an array of 3 colors: background, foreground, and highlight.
	// The colors are in the RGB format, and we use soft pastel colors.
	const palettes = [
	// Palette 1
	[
	[255, 182, 193], // Background: Light Pink

katspaugh / drag.js

Last active August 27, 2023 09:50

	// Drag-n-drop

	/*
	<html>
	<div id="container" draggable="true" style="width: 300px; cursor: grab; border: 10px solid red;">
	Drag me
	</div>

	<div id="droparea" style="border: 2px dashed; margin: 2em; padding: 4em 2em; text-align: center">
	Drop here