Skip to content

Instantly share code, notes, and snippets.

@katspaugh
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,
})
// Record plugin
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7.8.4-beta.0/dist/wavesurfer.esm.js'
import RecordPlugin from 'https://unpkg.com/wavesurfer.js@7.8.4-beta.0/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',
// 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({
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,
})
// 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)',
// 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)',
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);
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)
// 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: [
// 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'