Skip to content

Instantly share code, notes, and snippets.

View katspaugh's full-sized avatar

katspaugh

583 followers · 86 following
View GitHub Profile
@katspaugh
katspaugh / bar-height.js
Created January 11, 2024 20:54
// 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',
})
@katspaugh
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
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
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
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
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
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
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
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
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;"