2b:null 2c:["$","title",null,{"children":"Wave Surfer | Brett Cooper | Observable"}] 31:T42f,# Plugins https://wavesurfer-js.org/plugins/ https://github.com/katspaugh/wavesurfer.js/tree/master/src/plugin - [Regions plugin](https://wavesurfer-js.org/plugins/regions.html): Adds ability to display and interact with audio regions. Regions are visual overlays that can be resized and dragged around the waveform. You can play back and loop a region. - [Timeline plugin](https://wavesurfer-js.org/plugins/timeline.html): Adds a nice simple timeline to your waveform. By Instajams. - [Microphone plugin](https://wavesurfer-js.org/plugins/microphone.html): Visualizes audio input from a microphone. By Thijs Triemstra. - [Playlist plugin](https://wavesurfer-js.org/plugins/playlist.html): Adds a playlist feature to your waveform. By Enton Biba. - [Cursor plugin](https://wavesurfer-js.org/plugins/cursor.html): Shows a cursor on your waveform. - [Spectrogram plugin](https://wavesurfer-js.org/plugins/spectrogram.html): Shows a spectrogram for your waveform. - [Markers plugin](https://wavesurfer-js.org/plugins/markers.html): Shows markers for your waveform.32:T59c,# spectrogram

https://wavesurfer-js.org/plugins/spectrogram.html ![image@3.png](${await FileAttachment("image@3.png").url()}) https://wavesurfer-js.org/example/spectrogram/index.html?fill ```js var wavesurfer = WaveSurfer.create({ // your options here plugins: [ WaveSurfer.spectrogram.create({ wavesurfer: wavesurfer, container: "#wave-spectrogram", labels: true }) ] }); wavesurfer.load('../media/demo.wav'); ``` ### Options *wavesurfer* - required - a WaveSurfer instance. *container* - required - the element in which to place the spectrogram, or a CSS selector to find it. *fftSamples* - number of FFT samples (512 by default). Number of spectral lines and height of the spectrogram will be a half of this parameter. *frequenciesDataUrl* - URL to load spectral data from. *labels* - Whether or not to display frequency labels. *colorMap* - Specifies the colormap to be used when rendering the spectrogram. ### Generating a colorMap (could use d3) The [colormap npm](https://www.npmjs.com/package/colormap) can be used to generate a colormap. In this example, the colormap has been saved to a json file and is retrieved by the client before initializing the spectrogram. ```js const colormap = require('colormap'); const colors = colormap({ colormap: 'hot', nshades: 256, format: 'float' }); ```33:T408,# ✅Regions

https://wavesurfer-js.org/plugins/regions.html has a lot of methods and events that can be used https://wavesurfer-js.org/example/regions/index.html ![image@4.png](${await FileAttachment("image@4.png").url()}) ```js var wavesurfer = WaveSurfer.create({ container: document.querySelector('#waveform'), waveColor: '#A8DBA8', progressColor: '#3B8686', backend: 'MediaElement', plugins: [ regions.create({ regionsMinLength: 2, regions: [ { start: 1, end: 3, loop: false, color: 'hsla(400, 100%, 30%, 0.5)' }, { start: 5, end: 7, loop: false, color: 'hsla(200, 50%, 70%, 0.4)', minLength: 1, } ], dragSelection: { slop: 5 } }) ] }); ```34:T1975,# [ELAN](https://wavesurfer-js.org/example/elan/index.html)

More subtitle / Karaoke https://wavesurfer-js.org/example/elan-wave-segment/index.html ![image@8.png](${await FileAttachment("image@8.png").url()}) requires: https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.elan.js Options - ELAN: required - The ELAN instance used to parse the elan data - wafesurver: required - The wavesurfer instance used to draw the original waveform - waveSegmentWidth: optional - The width of each wave segment (defaults to 200) - waveSegmentPeaksPerSegment: optional - The number of peaks that should be drawn (defaults to 400) - waveSegmentHeight: optional - The height of each wave segment (defaults to 30) - waveSegmentRenderer: optional - The renderer (drawer) to be used for the wave segments - waveSegmentNormalizeTo: optional - What to normalize each wave segment to [whole, segment,none] - waveSegmentBorderWidth: optional - The width of the border of the container element - waveSegmentBarHeight: optional - the height of the peaks/bars (defaults to 1) ```js 'use strict'; // Create an instance var wavesurfer; // Init & load document.addEventListener('DOMContentLoaded', function() { let options = { container: '#waveform', waveColor: 'violet', progressColor: 'purple', loaderColor: 'purple', cursorColor: 'navy', selectionColor: '#d0e9c6', loopSelection: false, plugins: [ WaveSurfer.elan.create({ url: 'transcripts/001z.xml', container: '#annotations', tiers: { Text: true, Comments: true } }), WaveSurfer.regions.create() ] }; if (location.search.match('scroll')) { options.minPxPerSec = 100; options.scrollParent = true; } if (location.search.match('normalize')) { options.normalize = true; } // Init wavesurfer wavesurfer = WaveSurfer.create(options); /* Progress bar */ (function() { let progressDiv = document.querySelector('#progress-bar'); let progressBar = progressDiv.querySelector('.progress-bar'); let showProgress = function(percent) { progressDiv.style.display = 'block'; progressBar.style.width = percent + '%'; }; let hideProgress = function() { progressDiv.style.display = 'none'; }; wavesurfer.on('loading', showProgress); wavesurfer.on('ready', hideProgress); wavesurfer.on('destroy', hideProgress); wavesurfer.on('error', hideProgress); })(); wavesurfer.elan.on('ready', function(data) { wavesurfer.load('transcripts/' + data.media.url); }); wavesurfer.elan.on('select', function(start, end) { wavesurfer.backend.play(start, end); }); wavesurfer.elan.on('ready', function() { let classList = wavesurfer.elan.container.querySelector('table') .classList; ['table', 'table-striped', 'table-hover'].forEach(function(cl) { classList.add(cl); }); }); let prevAnnotation, prevRow, region; let onProgress = function(time) { let annotation = wavesurfer.elan.getRenderedAnnotation(time); if (prevAnnotation != annotation) { prevAnnotation = annotation; region && region.remove(); region = null; if (annotation) { // Highlight annotation table row let row = wavesurfer.elan.getAnnotationNode(annotation); prevRow && prevRow.classList.remove('success'); prevRow = row; row.classList.add('success'); let before = row.previousSibling; if (before) { wavesurfer.elan.container.scrollTop = before.offsetTop; } // Region region = wavesurfer.addRegion({ start: annotation.start, end: annotation.end, resize: false, color: 'rgba(223, 240, 216, 0.7)' }); } } }; wavesurfer.on('audioprocess', onProgress); wavesurfer.on('error', function(e) { console.warn(e); }); }); ``` key bindings and interaction ```js let ws = window.wavesurfer; var GLOBAL_ACTIONS = { // eslint-disable-line play: function() { window.wavesurfer.playPause(); }, back: function() { window.wavesurfer.skipBackward(); }, forth: function() { window.wavesurfer.skipForward(); }, 'toggle-mute': function() { window.wavesurfer.toggleMute(); } }; // Bind actions to buttons and keypresses document.addEventListener('DOMContentLoaded', function() { document.addEventListener('keydown', function(e) { let map = { 32: 'play', // space 37: 'back', // left 39: 'forth' // right }; let action = map[e.keyCode]; if (action in GLOBAL_ACTIONS) { if (document == e.target || document.body == e.target || e.target.attributes["data-action"]) { e.preventDefault(); } GLOBAL_ACTIONS[action](e); } }); [].forEach.call(document.querySelectorAll('[data-action]'), function(el) { el.addEventListener('click', function(e) { let action = e.currentTarget.dataset.action; if (action in GLOBAL_ACTIONS) { e.preventDefault(); GLOBAL_ACTIONS[action](e); } }); }); }); // Misc document.addEventListener('DOMContentLoaded', function() { // Web Audio not supported if (!window.AudioContext && !window.webkitAudioContext) { let demo = document.querySelector('#demo'); if (demo) { demo.innerHTML = '

'; } } // Navbar links let ul = document.querySelector('.nav-pills'); if ( !ul ) { return; } let pills = ul.querySelectorAll('li'); let active = pills[0]; if (location.search) { let first = location.search.split('&')[0]; let link = ul.querySelector('a[href="' + first + '"]'); if (link) { active = link.parentNode; } } active && active.classList.add('active'); }); ```35:T13d9,# [Equalizer Example](https://wavesurfer-js.org/example/equalizer/index.html)

![image@7.png](${await FileAttachment("image@7.png").url()}) ```html

``` ```js 'use strict'; // Create an instance var wavesurfer; // Init & load audio file document.addEventListener('DOMContentLoaded', function() { // Init wavesurfer = WaveSurfer.create({ container: document.querySelector('#waveform'), waveColor: '#A8DBA8', progressColor: '#3B8686' }); // Load audio from URL wavesurfer.load('../media/demo.wav'); // Equalizer wavesurfer.on('ready', function() { let EQ = [ { f: 32, type: 'lowshelf' }, { f: 64, type: 'peaking' }, { f: 125, type: 'peaking' }, { f: 250, type: 'peaking' }, { f: 500, type: 'peaking' }, { f: 1000, type: 'peaking' }, { f: 2000, type: 'peaking' }, { f: 4000, type: 'peaking' }, { f: 8000, type: 'peaking' }, { f: 16000,type: 'highshelf'} ]; // Create filters let filters = EQ.map(function(band) { let filter = wavesurfer.backend.ac.createBiquadFilter(); filter.type = band.type; filter.gain.value = 0; filter.Q.value = 1; filter.frequency.value = band.f; return filter; }); // Connect filters to wavesurfer wavesurfer.backend.setFilters(filters); // Bind filters to vertical range sliders let container = document.querySelector('#equalizer'); filters.forEach(function(filter) { let input = document.createElement('input'); Object.assign(input, { type: 'range', min: -40, max: 40, value: 0, title: filter.frequency.value }); input.style.display = 'inline-block'; input.setAttribute('orient', 'vertical'); wavesurfer.util.style(input, { webkitAppearance: 'slider-vertical', width: '50px', height: '150px' }); container.appendChild(input); let onChange = function(e) { filter.gain.value = ~~e.target.value; }; input.addEventListener('input', onChange); input.addEventListener('change', onChange); }); // For debugging wavesurfer.filters = filters; }); // Log errors wavesurfer.on('error', function(msg) { console.log(msg); }); // Bind play/pause button document .querySelector('[data-action="play"]') .addEventListener('click', wavesurfer.playPause.bind(wavesurfer)); // Progress bar (function() { const progressDiv = document.querySelector('#progress-bar'); const progressBar = progressDiv.querySelector('.progress-bar'); let showProgress = function(percent) { progressDiv.style.display = 'block'; progressBar.style.width = percent + '%'; }; let hideProgress = function() { progressDiv.style.display = 'none'; }; wavesurfer.on('loading', showProgress); wavesurfer.on('ready', hideProgress); wavesurfer.on('destroy', hideProgress); wavesurfer.on('error', hideProgress); })(); }); ```36:Tb5d,# loopslicer https://github.com/kernow-ged/loopslicer/blob/master/js/app.js ```js 'use strict'; // Create an instance var wavesurfer = Object.create(WaveSurfer); // Init & load audio file document.addEventListener('DOMContentLoaded', function () { var options = { container : document.querySelector('#waveform'), waveColor : 'black', progressColor : 'black', cursorColor : 'red', splitChannels: true, height : 120 }; wavesurfer.init(options); // Load audio from URL wavesurfer.load('examples/ol2.wav'); }); wavesurfer.on('ready', function () { wavesurfer.clearRegions(); wavesurfer.resetThreshold(); wavesurfer.initLR(); wavesurfer.setThreshold(45); // this is where first marker-drawing happens wavesurfer.zoom(50); wavesurfer.setTempo(1.0); wavesurfer.setPitch(1.0); wavesurfer.setEnvAttack(0); wavesurfer.setEnvHold(0); wavesurfer.setEnvDecay(10000); wavesurfer.setCompThreshold(0); wavesurfer.setCompRatio(1); wavesurfer.setCompAttack(0.07); wavesurfer.setCompRelease(0.1); wavesurfer.setVolume(1); wavesurfer.setLoFreq(250); wavesurfer.setMidFreq(1000); wavesurfer.setHiFreq(4000); wavesurfer.setLoGain(0); wavesurfer.setMidGain(0); wavesurfer.setHiGain(0); wavesurfer.setMidQ(1); wavesurfer.setScale('chromatic'); wavesurfer.setNoteNumber(0); wavesurfer.initTiming(); wavesurfer.setEstBpm(); }); wavesurfer.on('error', function (err) { console.error("wv err:" + err); }); wavesurfer.on('finished-render', function () { savebutton.disabled=false; $('#saveModal').modal('hide'); }); /* Progress bar */ document.addEventListener('DOMContentLoaded', function () { var progressDiv = document.querySelector('#progress-bar'); var progressBar = progressDiv.querySelector('.progress-bar'); var progressMode = document.querySelector('#progressmode'); var showProgress = function (percent, mode) { progressDiv.style.display = 'block'; progressMode.style.display = 'block'; progressBar.style.width = percent + '%'; progressMode.innerHTML = "

" + mode + " " + percent + '%

'; }; var hideProgress = function () { progressDiv.style.display = 'none'; progressMode.style.display = 'none'; }; wavesurfer.on('loading', function(percent) { showProgress(percent, 'Loading'); }); wavesurfer.on('analysing', function(percent) { showProgress(percent, 'Analysing'); }); wavesurfer.on('ready', hideProgress); wavesurfer.on('destroy', hideProgress); wavesurfer.on('error', hideProgress); }); document.addEventListener('DOMContentLoaded', function () { if(!wavesurfer.backend.supportsWebAudio()) { document.getElementById("incompat").style.display="block"; } if (!(window.File && window.FileReader && window.FileList && window.Blob)) { document.getElementById("incompat").style.display="block"; } }); ```37:Td6d,wavesurfer = { d3.select('#wavDiv > wave').remove() let ws = WaveSurfer.create({ container: '#wavDiv', // waveColor: 'violet', // progressColor: 'purple', cursorColor: '#A4036F', cursorWidth: 1, height: 300, scrollParent: true, splitChannels: true, splitChannelsOptions: { overlay: false, // overlay (boolean) This determines whether channels are drawn on top of each other. channelColors: { 0: { progressColor: '#16DB93', waveColor: '#048BA8' }, 1: { progressColor: '#F29E4C', waveColor: '#048BA8' } }, // filterChannels: [0] // Array of channel numbers. Channels included in the array will not be drawn // relativeNormalization: true // When normalize & splitChannels are both true the channels will be normalized individually // or proportionally to each other. Defaults to false (each channel will be normalized in isolation) }, // barWidth: 2, // barRadius: 3, // optional as it makes bars rounded. they are square if not used // barHeight: 3, // the height of the wave // barGap: 0, // the optional spacing between bars of the wave, if not provided will be calculated in legacy format backend: 'MediaElement', // let extensions access the media (player speed) // =================================================================================== // plugins: [ // spectrogram.create({ // wavesurfer: ws, // container: "#wave-spectrogram", // labels: true // }) // ] // =================================================================================== // plugins: [ // regions.create({ // regionsMinLength: 2, // regions: [ // { // start: 1, // end: 3, // loop: false, // color: 'hsla(400, 100%, 30%, 0.5)' // }, { // start: 5, // end: 7, // loop: false, // color: 'hsla(200, 50%, 70%, 0.4)', // minLength: 1, // } // ], // dragSelection: { // slop: 5 // } // }) // ] // =================================================================================== // plugins: [ // cursor.create({ // showTime: true, // opacity: 1, // customShowTimeStyle: { // 'background-color': '#000', // color: '#fff', // padding: '2px', // 'font-size': '10px' // } // }) // ] // ====================================================================================== // plugins: [ // playhead.create({ // returnOnPause: true, // moveOnSeek: true, // draw: true // }) // ] // ====================================================================================== // plugins: [ // markers.create({ // markers: [ // { // time: 5.5, // label: "V1", // color: '#ff990a' // }, // { // time: 10, // label: "V2", // color: '#00ffcc', // position: 'top' // } // ] // }) // ] // ====================================================================================== }); ws.load(audioURL2) return ws}38:[{"id":"09afc5826eb7c637ed742c585de4e31f77498633ede045f4ec63cc166dd743ef423b40eb963b6643bf64281be5937d9a1928a01a6769b3062f8f8513ece83541","href":"https://static.observableusercontent.com/files/09afc5826eb7c637ed742c585de4e31f77498633ede045f4ec63cc166dd743ef423b40eb963b6643bf64281be5937d9a1928a01a6769b3062f8f8513ece83541","name":"image@5.png","type":"image/png","lastModified":1630385955182.214,"size":32277},{"id":"0c4c4de05692757be402102ae5ec7156348c3fbf0abc258b380ed61764f71232d9765081386eec4cdf7104f1035521951ea049a5218e6d844f3ce8b5c7907969","href":"https://static.observableusercontent.com/files/0c4c4de05692757be402102ae5ec7156348c3fbf0abc258b380ed61764f71232d9765081386eec4cdf7104f1035521951ea049a5218e6d844f3ce8b5c7907969","name":"image@2.png","type":"image/png","lastModified":1630382185583.284,"size":30360},{"id":"1dba5ced44121791840689c59ba8f29175c296156a1d1158fa4ddff1689ee4bb1a078f303a5185c3e5565de61fa5ce9c4463a5acde61bf8969185492bb3314ff","href":"https://static.observableusercontent.com/files/1dba5ced44121791840689c59ba8f29175c296156a1d1158fa4ddff1689ee4bb1a078f303a5185c3e5565de61fa5ce9c4463a5acde61bf8969185492bb3314ff","name":"image@10.png","type":"image/png","lastModified":1630817700806.066,"size":25725},{"id":"2f0b0879ce055e30f0f544cfd9caeea549b0c146fdda7ad15019787877483eb71b5bf0e460220037b5cf328390828cd357fa3b8e5eaeef860e51eb2ad58af6b8","href":"https://static.observableusercontent.com/files/2f0b0879ce055e30f0f544cfd9caeea549b0c146fdda7ad15019787877483eb71b5bf0e460220037b5cf328390828cd357fa3b8e5eaeef860e51eb2ad58af6b8","name":"image@9.png","type":"image/png","lastModified":1630817664332.323,"size":49902},{"id":"b21002292c0931e7dba6f1a63d53bdf2b7684d3a6215d91b47335421d0a6d5223bc2e2c59c0d56dc031a11cda048bb55e1eaf2f191bf12955d752e2e537cc156","href":"https://static.observableusercontent.com/files/b21002292c0931e7dba6f1a63d53bdf2b7684d3a6215d91b47335421d0a6d5223bc2e2c59c0d56dc031a11cda048bb55e1eaf2f191bf12955d752e2e537cc156","name":"image@8.png","type":"image/png","lastModified":1630816999509.913,"size":52075},{"id":"3fd5c87a07b77234909935aa80ad26f2b6bd0f064413bf59e16a53b6c1936acb43241e930de739855eb92ffca2a7cb4438dcd4c19ef07b976a12ed51f6f5db71","href":"https://static.observableusercontent.com/files/3fd5c87a07b77234909935aa80ad26f2b6bd0f064413bf59e16a53b6c1936acb43241e930de739855eb92ffca2a7cb4438dcd4c19ef07b976a12ed51f6f5db71","name":"image@7.png","type":"image/png","lastModified":1630816155913.38,"size":17071},{"id":"3a6de56cdff0b60452872ef5c255c1ea951a4f4f342b1bbfcf20c8f6aab75d8f8cf421b5c93e8b111559eb7c9963364c4f4e321aea29e9038de957d58e449085","href":"https://static.observableusercontent.com/files/3a6de56cdff0b60452872ef5c255c1ea951a4f4f342b1bbfcf20c8f6aab75d8f8cf421b5c93e8b111559eb7c9963364c4f4e321aea29e9038de957d58e449085","name":"image@6.png","type":"image/png","lastModified":1630815714775.435,"size":23553},{"id":"f25c3203570a452d1249e31efc0c387a4735fb828615c4eff32e63c2ff4971535c8d05d2a58bd8d223665225f2194ecbb0019c212c4afa538afe6f1bf42296f5","href":"https://static.observableusercontent.com/files/f25c3203570a452d1249e31efc0c387a4735fb828615c4eff32e63c2ff4971535c8d05d2a58bd8d223665225f2194ecbb0019c212c4afa538afe6f1bf42296f5","name":"Level music.mp3","type":"audio/mpeg","lastModified":1630380844664.751,"size":4406251},{"id":"9617357dda08b4937e78f034d71178a088977349da677e5c5fb17f3d701531a83a287749538776bc81fb338101ce69c238751c6c8225eb0ee3c5b1c16796a76b","href":"https://static.observableusercontent.com/files/9617357dda08b4937e78f034d71178a088977349da677e5c5fb17f3d701531a83a287749538776bc81fb338101ce69c238751c6c8225eb0ee3c5b1c16796a76b","name":"image@4.png","type":"image/png","lastModified":1630383853226.808,"size":29209},{"id":"313af79fa7853185a82831a1ca0f15e23ff2c03d0a398efefa3830f4d02a14d61436feba1b8859a117de2ffa415feea0f87607ff799a1fee328921f9b0500e2d","href":"https://static.observableusercontent.com/files/313af79fa7853185a82831a1ca0f15e23ff2c03d0a398efefa3830f4d02a14d61436feba1b8859a117de2ffa415feea0f87607ff799a1fee328921f9b0500e2d","name":"image@3.png","type":"image/png","lastModified":1630382349305.702,"size":199814},{"id":"6c8bff412077b1826a8707489eccca17919ddd934cdfa28e7f39cfd7f1e15a1a80f3c406b5efd225d626770056dcb6d4d7cfd297081c1d614315ed0caab98db4","href":"https://static.observableusercontent.com/files/6c8bff412077b1826a8707489eccca17919ddd934cdfa28e7f39cfd7f1e15a1a80f3c406b5efd225d626770056dcb6d4d7cfd297081c1d614315ed0caab98db4","name":"Trish Mar 13a.mp3","type":"audio/mpeg","lastModified":1630992996124.363,"size":2174615},{"id":"d65e2209067b65f5943d447703398fdd922669908fefee6515eae7c4278002e50e279a5c91f7a47a4af6dd1f3a6b10aa5e3e15e2c312c92b5410b07ada7248a5","href":"https://static.observableusercontent.com/files/d65e2209067b65f5943d447703398fdd922669908fefee6515eae7c4278002e50e279a5c91f7a47a4af6dd1f3a6b10aa5e3e15e2c312c92b5410b07ada7248a5","name":"image@11.png","type":"image/png","lastModified":1630991875964.905,"size":124316},{"id":"0a63f77e9fddf2192d0659fb0b60c5794ab0f6c9074a59203003b1d1900b7d834f0e1eb43c7877dcd0f557ad612e2525752bbf65b86ac06d861b5b4f5b3bd49f","href":"https://static.observableusercontent.com/files/0a63f77e9fddf2192d0659fb0b60c5794ab0f6c9074a59203003b1d1900b7d834f0e1eb43c7877dcd0f557ad612e2525752bbf65b86ac06d861b5b4f5b3bd49f","name":"image@12.png","type":"image/png","lastModified":1630994459302.331,"size":65703}] 2f:{"id":"800286024dcb2680","slug":"wave-surfer","title":"Wave Surfer","thumbnail":"db6ef848dc3d92c8dc204d8185c78626bd44990742ed12fe9c0ed0ef0ef462f1","access_level":"public","create_time":"$D2021-08-29T02:06:41.104Z","update_time":"$D2021-09-08T13:50:29.854Z","view_time":null,"first_public_time":"$D2021-09-05T03:21:15.927Z","fork":{"id":"3aac7ee604a487e8","slug":"the-impact-of-vaccines","title":"The Impact of Vaccines","owner":{"id":"c3fcb9cb878665a2","login":"nickolasboyer","name":"Will Willems"}},"stars":3,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":1173,"publish_version":1173,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Wave Surfer","cells":[{"id":0,"value":"\n# Wave Surfer\n

\n\nChecking out: https://wavesurfer-js.org/\n\nhttps://wavesurfer-js.org/docs/methods.html\n\nhttps://wavesurfer-js.org/docs/options.html\n\nhttps://wavesurfer-js.org/docs/events.html\n\nhttps://github.com/katspaugh/wavesurfer.js\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":911,"value":"$31","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":922,"value":"# WaveSurfer options:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":920,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1054,"value":"---","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":655,"value":"[HTML initialisation API](https://wavesurfer-js.org/example/html-init/index.html)\n

\n\n***This might be how the spectrograph can be done.***\n\n```js\n\n\n//------------------------ \n\n\n

\n```\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"---","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":963,"value":"# ⁉ Split Wave / 🚫Point Plot \n

\n\n*link/demo doesn't seem to be working*\n\nhttps://wavesurfer-js.org/example/split-wave-point-plot/index.html\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":930,"value":"\n# ✅[Bars Example](https://wavesurfer-js.org/example/bars/index.html)\n

\n# rounded bars\n```js\nvar wavesurfer = WaveSurfer.create({\n container: document.querySelector('#waveform'),\n waveColor: '#D9DCFF',\n progressColor: '#4353FF',\n cursorColor: '#4353FF',\n barWidth: 3,\n barRadius: 3,\n cursorWidth: 1,\n height: 200,\n barGap: 3\n});\n ```\n# Split Channels\n```js\nvar wavesurfer = WaveSurfer.create({\n container: document.querySelector('#wave'),\n splitChannels: true,\n splitChannelsOptions: {\n overlay: false,\n channelColors: {\n 0: {\n progressColor: 'green',\n waveColor: 'pink'\n },\n 1: {\n progressColor: 'orange',\n waveColor: 'purple'\n }\n }\n }\n});\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":936,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":946,"value":"# ✅Cursor Plugin [Example](https://wavesurfer-js.org/example/cursor/index.html)\n

\nhttps://wavesurfer-js.org/plugins/cursor.html\n\n```js\nlet wavesurfer = WaveSurfer.create({\n container: document.querySelector('#waveform'),\n plugins: [\n cursor.create({\n showTime: true,\n opacity: 1,\n customShowTimeStyle: {\n 'background-color': '#000',\n color: '#fff',\n padding: '2px',\n 'font-size': '10px'\n }\n })\n ]\n});\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":978,"value":"\n\n# ✅[Markers](https://wavesurfer-js.org/example/markers/index.html) \n\nMarkers plugin very similar to what Pro Tools gives you. Just a way to easily jump around in a waveform.\nhttps://wavesurfer-js.org/plugins/markers.html\n\n![image@12.png](${await FileAttachment(\"image@12.png\").url()})\n\n```js\nvar wavesurfer = WaveSurfer.create({\n container: document.querySelector('#waveform'),\n plugins: [\n markers.create({\n markers: [\n {\n time: 5.5,\n label: \"V1\",\n color: '#ff990a'\n },\n {\n time: 10,\n label: \"V2\",\n color: '#00ffcc',\n position: 'top'\n }\n ]\n })\n ]\n});\n ```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":951,"value":"\n# ✅[Playhead plugin](https://wavesurfer-js.org/example/playhead/index.html)\n

\n\n![image@5.png](${await FileAttachment(\"image@5.png\").url()})\n```js\nvar wavesurfer = WaveSurfer.create({\n container: document.querySelector('#waveform'),\n waveColor: '#A8DBA8',\n progressColor: '#3B8686',\n backend: 'MediaElement',\n plugins: [\n playhead.create({\n returnOnPause: true,\n moveOnSeek: true,\n draw: true\n })\n ]\n });\n\n wavesurfer.on('ready', function(e) {\n wavesurfer.playhead.setPlayheadTime(2.3);\n });\n ```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":960,"value":"$34","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":989,"value":"# Time Line\n\n![image@11.png](${await FileAttachment(\"image@11.png\").url()})\n\n```js\n'use strict';\n\nvar wavesurfer;\n\n// Init & load\ndocument.addEventListener('DOMContentLoaded', function() {\n var options = {\n container: '#waveform',\n waveColor: 'violet',\n progressColor: 'purple',\n loaderColor: 'purple',\n cursorColor: 'navy',\n plugins: [\n WaveSurfer.timeline.create({\n container: '#wave-timeline'\n })\n ]\n };\n\n if (location.search.match('scroll')) {\n options.minPxPerSec = 100;\n options.scrollParent = true;\n }\n\n if (location.search.match('normalize')) {\n options.normalize = true;\n }\n\n // Init wavesurfer\n wavesurfer = WaveSurfer.create(options);\n\n wavesurfer.load('../example/media/demo.wav');\n});\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":942,"value":"# [Annotations Tool](https://wavesurfer-js.org/example/annotation/index.html)\n\n

\n\nThis is for the control and editing of text events related to the audio position (subtitles)\n\n![image@6.png](${await FileAttachment(\"image@6.png\").url()})\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":956,"value":"$35","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":967,"value":"# [Panner Filter Example](https://wavesurfer-js.org/example/panner/index.html)\n

\n\n![image@10.png](${await FileAttachment(\"image@10.png\").url()})","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":644,"value":"# [MediaElementWebAudio Backend Example](https://wavesurfer-js.org/example/mediaelement-webaudio/index.html)\n

\n\n![image@9.png](${await FileAttachment(\"image@9.png\").url()})\n\n\n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":994,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":341,"value":"audioURL = await FileAttachment(\"Level music.mp3\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1006,"value":"audioURL2 = await FileAttachment(\"Trish Mar 13a.mp3\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"WaveForm \n

\n \n\n\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":784,"value":"viewof zoom = Inputs.range([0, 5000], {value: 0, step: 1, label: \"Zoom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":866,"value":"viewof pan = Inputs.range([0, 180], {value: 90, step: 1, label: \"Panning - this is not working\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"// update zoom level\nwavesurfer.zoom(zoom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":886,"value":"// panner ={\n// let paner = wavesurfer.backend.ac.createPanner()\n// wavesurfer.backend.setFilter(paner)\n// return paner\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"// wavesurfer.panner.setPosition(Math.sin(pan * (Math.PI / 180)), 0, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":710,"value":"# Buttons and...\n\nAdd these buttons:\n- wavesurfer.play()\n- wavesurfer.stop()\n- wavesurfer.pause()\n- wavesurfer.skipForward()\n- wavesurfer.toggleMute()\n- \ntodo: ⏮⏪⏩⏭🔁 https://wavesurfer-js.org/docs/methods.html \n\nadd getDuration() \n\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":571,"value":"addButtons = { \n d3.select('#playb').on('click',() => wavesurfer.play())\n d3.select('#pauseb').on('click',() => wavesurfer.pause())\n d3.select('#stopb').on('click',() => wavesurfer.stop())\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1058,"value":"---","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":680,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1077,"value":"# Playhead function\nOn ready the start of the music is at the *setPlayheadTime*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":854,"value":"// PlayHead function\nwavesurfer.on('ready', function(e) {\n playhead.setPlayheadTime(0);\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":" spec = spectrogram.create({\n wavesurfer: wavesurfer,\n container: \"wave-spectrogram\",\n labels: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"WaveSurfer = require(\"wavesurfer.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":892,"value":"spectrogram = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1017,"value":"regions = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"cursor = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.cursor.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"markers = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.markers.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"playhead = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.playhead.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1025,"value":"elan = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.elan.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1019,"value":"timeline = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.timeline.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"mediasession = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.mediasession.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1030,"value":"minimap = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.minimap.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1029,"value":"microphone = require(\"https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.microphone.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"