Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Wavesurfer.js Alternatives
Similar projects and alternatives to wavesurfer.js
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Nuxt.js
Discontinued Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
Kaminari
⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps
-
waveform-playlist
Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Add effects from Tone.js. Project inspired by Audacity.
-
sphinx-wavedrom
A sphinx extension that allows including wavedrom diagrams by using its text-based representation
-
waveform-data.js
Audio Waveform Data Manipulation API – resample, offset and segment waveform data in JavaScript.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
wavesurfer.js reviews and mentions
- Wavesurfer.js
-
Theme Customization (Expanse from Archetype Themes)
Actually I want to modify the Expanse theme from Archetype Themes in a way that its possible to implement an audio player (using Wavesurfer JS library) which keeps playing when a new page is loaded. So there cant be an entire page reload, I need to modify the theme so the main content is fetched instead.
-
Wavesurfer waveform not appearing
I'm trying to get a basic version of wavesurfer working. I followed the tutorial from this youtube video and downloaded the same code from the github. The buttons appear, but the waveform doesn't appear.
-
Does anybody know the code to that player?
Could be this though: https://github.com/katspaugh/wavesurfer.js
-
delete
/*! * wavesurfer.js regions plugin 6.0.2 (2022-02-20) * https://wavesurfer-js.org * @license BSD-3-Clause */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("WaveSurfer",[],t):"object"==typeof exports?exports.WaveSurfer=t():(e.WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.regions=t())}(self,(function(){return(()=>{"use strict";var e={23:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(638);function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function a(e){for(var t=1;t=this.maxRegions}},{key:"add",value:function(e){var t=this;if(this.wouldExceedMaxRegions())return null;!(e=a({edgeScrollWidth:this.params.edgeScrollWidth||this.defaultEdgeScrollWidth},e)).formatTimeCallback&&this.params.formatTimeCallback&&(e=a(a({},e),{},{formatTimeCallback:this.params.formatTimeCallback})),!e.minLength&&this.regionsMinLength&&(e=a(a({},e),{},{minLength:this.regionsMinLength}));var r=new this.wavesurfer.Region(e,this.util,this.wavesurfer);return this.list[r.id]=r,r.on("remove",(function(){delete t.list[r.id]})),r}},{key:"clear",value:function(){var e=this;Object.keys(this.list).forEach((function(t){e.list[t].remove()}))}},{key:"enableDragSelection",value:function(e){var t=this;this.disableDragSelection();var r,i,n,a,s,o,l,h=e.slop||2,u=this.wavesurfer.drawer.container,d=!1!==e.scroll&&this.wavesurfer.params.scrollParent,c=e.scrollSpeed||1,f=e.scrollThreshold||10,v=this.wavesurfer.getDuration(),g=0,p=function e(r){if(a&&o){var s=t.wrapper.scrollLeft+c*o;t.wrapper.scrollLeft=s=Math.min(i,Math.max(0,s));var l=t.wavesurfer.drawer.handleEvent(r);a.update({start:Math.min(l*v,n*v),end:Math.max(l*v,n*v)}),s0&&window.requestAnimationFrame((function(){e(r)}))}},m=function(h){if(!(h.touches&&h.touches.length>1)){if(v=t.wavesurfer.getDuration(),s=h.targetTouches?h.targetTouches[0].identifier:null,i=t.wrapper.scrollWidth-t.wrapper.clientWidth,l=t.util.withOrientation(t.wrapper.getBoundingClientRect(),t.vertical),t.wavesurfer.params.splitChannels){var u=(h.touches?h.touches[0].clientY:h.clientY)-l.top,d=null!=t.wavesurfer.backend.buffer?t.wavesurfer.backend.buffer.numberOfChannels:1,c=t.wrapper.clientHeight/d,f=Math.floor(u/c);e.channelIdx=f;var g=t.wavesurfer.params.splitChannelsOptions.channelColors[f];g&&g.dragColor&&(e.color=g.dragColor)}r=!0,n=t.wavesurfer.drawer.handleEvent(h,!0),a=null,o=null}};this.wrapper.addEventListener("mousedown",m),this.wrapper.addEventListener("touchstart",m),this.on("disable-drag-selection",(function(){t.wrapper.removeEventListener("touchstart",m),t.wrapper.removeEventListener("mousedown",m)}));var w=function(e){e.touches&&e.touches.length>1||(r=!1,g=0,o=null,a&&(t.util.preventClick(),a.fireEvent("update-end",e),t.wavesurfer.fireEvent("region-update-end",a,e)),a=null)};this.wrapper.addEventListener("mouseleave",w),this.wrapper.addEventListener("mouseup",w),this.wrapper.addEventListener("touchend",w),document.body.addEventListener("mouseup",w),document.body.addEventListener("touchend",w),this.on("disable-drag-selection",(function(){document.body.removeEventListener("mouseup",w),document.body.removeEventListener("touchend",w),t.wrapper.removeEventListener("touchend",w),t.wrapper.removeEventListener("mouseup",w),t.wrapper.removeEventListener("mouseleave",w)}));var b=function(i){if(r&&!(++g<=h)&&!(i.touches&&i.touches.length>1)&&(!i.targetTouches||i.targetTouches[0].identifier==s)&&(a||(a=t.add(e||{})))){var c=t.wavesurfer.drawer.handleEvent(i),m=t.wavesurfer.regions.util.getRegionSnapToGridValue(n*v),w=t.wavesurfer.regions.util.getRegionSnapToGridValue(c*v);a.update({start:Math.min(w,m),end:Math.max(w,m)});var b=t.util.withOrientation(i,t.vertical);if(d&&u.clientWidth=l.right-f?1:null)&&p(i)}}};this.wrapper.addEventListener("mousemove",b),this.wrapper.addEventListener("touchmove",b),this.on("disable-drag-selection",(function(){t.wrapper.removeEventListener("touchmove",b),t.wrapper.removeEventListener("mousemove",b)})),this.wavesurfer.on("region-created",(function(e){t.regionsMinLength&&(e.minLength=t.regionsMinLength)}))}},{key:"disableDragSelection",value:function(){this.fireEvent("disable-drag-selection")}},{key:"getCurrentRegion",value:function(){var e=this,t=this.wavesurfer.getCurrentTime(),r=null;return Object.keys(this.list).forEach((function(i){var n=e.list[i];n.start<=t&&n.end>=t&&(!r||n.end-n.start{function r(e,t){for(var r=0;r=0&&se&&(r=e-((i=e)-r)),null!=this.minLength&&(i=Math.max(r+this.minLength,i)),null!=this.maxLength&&(i=Math.min(r+this.maxLength,i)),null!=this.element){var n=Math.round(r/e*t),a=Math.round(i/e*t)-n;for(var s in this.style(this.element,{left:n+"px",width:a+"px",backgroundColor:this.color,cursor:this.drag?"move":"default"}),this.attributes)this.element.setAttribute("data-region-"+s,this.attributes[s]);this.showTooltip&&(this.element.title=this.formatTime(this.start,this.end))}}},{key:"bindInOut",value:function(){var e=this;this.firedIn=!1,this.firedOut=!1;var t=function(t){var r=Math.round(10*e.start)/10,i=Math.round(10*e.end)/10;t=Math.round(10*t)/10,!e.firedOut&&e.firedIn&&(r>t||i<=t)&&(e.firedOut=!0,e.firedIn=!1,e.fireEvent("out"),e.wavesurfer.fireEvent("region-out",e)),!e.firedIn&&r<=t&&i>t&&(e.firedIn=!0,e.firedOut=!1,e.fireEvent("in"),e.wavesurfer.fireEvent("region-in",e))};this.wavesurfer.backend.on("audioprocess",t),this.on("remove",(function(){e.wavesurfer.backend.un("audioprocess",t)})),this.on("out",(function(){if(e.loop){var t=e.wavesurfer.getCurrentTime();t>=e.start&&t<=e.end&&e.wavesurfer.play(e.start)}}))}},{key:"bindEvents",value:function(){var e=this,t=this.preventContextMenu;this.element.addEventListener("mouseenter",(function(t){e.fireEvent("mouseenter",t),e.wavesurfer.fireEvent("region-mouseenter",e,t)})),this.element.addEventListener("mouseleave",(function(t){e.fireEvent("mouseleave",t),e.wavesurfer.fireEvent("region-mouseleave",e,t)})),this.element.addEventListener("click",(function(t){t.preventDefault(),e.fireEvent("click",t),e.wavesurfer.fireEvent("region-click",e,t)})),this.element.addEventListener("dblclick",(function(t){t.stopPropagation(),t.preventDefault(),e.fireEvent("dblclick",t),e.wavesurfer.fireEvent("region-dblclick",e,t)})),this.element.addEventListener("contextmenu",(function(r){t&&r.preventDefault(),e.fireEvent("contextmenu",r),e.wavesurfer.fireEvent("region-contextmenu",e,r)})),(this.drag||this.resize)&&this.bindDragEvents()}},{key:"bindDragEvents",value:function(){var e,t,r,i,n,a,s,o,l,h=this,u=this.wavesurfer.drawer.container,d=this.scrollSpeed,c=(this.scrollThreshold,!1),f=function t(u){var c=h.util.withOrientation(u,h.vertical),f=h.wavesurfer.getDuration();if(a&&(r||n)){var v=c.clientX,g=0,p=0,m=0,w=h.regionsUtil.getRegionSnapToGridValue(h.wavesurfer.drawer.handleEvent(u)*f);if(r)-1===a?(p=o*h.wavesurfer.params.minPxPerSec,g=v-s.left):(p=l*h.wavesurfer.params.minPxPerSec,g=s.right-v);else{var b=h.minLength;b||(b=0),"start"===n?(w>h.end-b&&(w=h.end-b,m=d*a),w<0&&(w=0)):"end"===n&&(wf&&(w=f))}var y=h.wrapper.scrollLeft;if(-1===a){if(0===Math.round(y))return;if(Math.round(y-p+g)<=0)return}else{if(Math.round(y)===i)return;if(Math.round(y+p-g)>=i)return}var E=y-m+d*a;if(-1===a){var L=Math.max(0+p-g,E);h.wrapper.scrollLeft=E=L}else{var k=Math.min(i-p+g,E);h.wrapper.scrollLeft=E=k}var x=w-e;e=w,r?h.onDrag(x):h.onResize(x,n),window.requestAnimationFrame((function(){t(u)}))}},v=function(a){var u=h.wavesurfer.getDuration();a.touches&&a.touches.length>1||(t=a.targetTouches?a.targetTouches[0].identifier:null,(h.drag||h.resize)&&a.stopPropagation(),e=h.regionsUtil.getRegionSnapToGridValue(h.wavesurfer.drawer.handleEvent(a,!0)*u),o=e-h.start,l=h.end-e,i=h.wrapper.scrollWidth-h.wrapper.clientWidth,s=h.util.withOrientation(h.wrapper.getBoundingClientRect(),h.vertical),h.isResizing=!1,h.isDragging=!1,"handle"===a.target.tagName.toLowerCase()?(h.isResizing=!0,n=a.target.classList.contains("wavesurfer-handle-start")?"start":"end"):(h.isDragging=!0,r=!0,n=!1))},g=function(e){e.touches&&e.touches.length>1||((r||n)&&(h.isDragging=!1,h.isResizing=!1,r=!1,a=null,n=!1),c&&(c=!1,h.util.preventClick(),h.fireEvent("update-end",e),h.wavesurfer.fireEvent("region-update-end",h,e)))},p=function(i){var d=h.wavesurfer.getDuration(),v=h.util.withOrientation(i,h.vertical);if(!(i.touches&&i.touches.length>1)&&(!i.targetTouches||i.targetTouches[0].identifier==t)&&(r||n)){var g=h.regionsUtil.getRegionSnapToGridValue(h.wavesurfer.drawer.handleEvent(i)*d);if(r){var p=h.wavesurfer.getDuration();g>p-l&&(g=p-l),g-o<0&&(g=o)}if(n){var m=h.minLength;m||(m=0),"start"===n?(g>h.end-m&&(g=h.end-m),g<0&&(g=0)):"end"===n&&(gd&&(g=d))}var w=g-e;if(e=g,h.drag&&r&&(c=c||!!w,h.onDrag(w)),h.resize&&n&&(c=c||!!w,h.onResize(w,n)),h.scroll&&u.clientWidths.right-h.edgeScrollWidth?1:null)&&f(i)}}};this.element.addEventListener("mousedown",v),this.element.addEventListener("touchstart",v),document.body.addEventListener("mousemove",p),document.body.addEventListener("touchmove",p,{passive:!1}),document.addEventListener("mouseup",g),document.body.addEventListener("touchend",g),this.on("remove",(function(){document.removeEventListener("mouseup",g),document.body.removeEventListener("touchend",g),document.body.removeEventListener("mousemove",p),document.body.removeEventListener("touchmove",p)})),this.wavesurfer.on("destroy",(function(){document.removeEventListener("mouseup",g),document.body.removeEventListener("touchend",g)}))}},{key:"onDrag",value:function(e){var t=this.wavesurfer.getDuration();this.end+e>t&&(e=t-this.end),this.start+e<0&&(e=-1\*this.start);var r={direction:this.\_getDragDirection(e),action:"drag"};this.update({start:this.start+e,end:this.end+e},r)}},{key:"\_getDragDirection",value:function(e){return e<0?"left":e>0?"right":null}},{key:"onResize",value:function(e,t){var r=this.wavesurfer.getDuration(),i={action:"resize",direction:"start"===t?"left":"right"};"start"===t?(e>0&&this.end-(this.start+e)this.maxLength&&(e=this.end-this.start-this.maxLength),e<0&&this.start+e<0&&(e=-1\*this.start),this.update({start:Math.min(this.start+e,this.end),end:Math.max(this.start+e,this.end)},i)):(e<0&&this.end+e-this.start0&&this.end+e-this.start>this.maxLength&&(e=this.maxLength-(this.end-this.start)),e>0&&this.end+e>r&&(e=r-this.end),this.update({start:Math.min(this.end+e,this.start),end:Math.max(this.end+e,this.start)},i))}},{key:"updateHandlesResize",value:function(e){var t;t=e?this.vertical?"row-resize":"col-resize":"auto",this.handleLeftEl&&this.style(this.handleLeftEl,{cursor:t}),this.handleRightEl&&this.style(this.handleRightEl,{cursor:t})}}])&&r(t.prototype,i),n&&r(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.Region=i}},t={};var r=function r(i){var n=t[i];if(void 0!==n)return n.exports;var a=t[i]={exports:{}};return e[i](a,a.exports,r),a.exports}(23);return r})()}));
-
Svelte Performance Test | Frame Accurate Subtitle Display
Thanks so much! The timeline actually isn't as complicated as it may look. There are lots of really awesome projects to take inspiration from (e.g. WavesurferJS). The one thing I wanted to point out is that the component was much easier to build in Svelte than in Vue. When we had the timeline component in Vue it used dependencies from other projects (because they were readily available). With Svelte there was nothing to install from NPM so we built it from scratch... and it was actually a lot of fun! It also scales really nicely for larger projects!
- What is this thing called?
-
Improvements to my Rails app!
- Track preview with a Waveform display with Wavesurfer (https://wavesurfer-js.org/)
- HTML5 Player for Shopify
-
How to create a video editor that works in your browser.
wavesufer.js
-
A note from our sponsor - InfluxDB
www.influxdata.com | 23 Apr 2024
Stats
katspaugh/wavesurfer.js is an open source project licensed under BSD 3-clause "New" or "Revised" License which is an OSI approved license.
The primary programming language of wavesurfer.js is TypeScript.
Popular Comparisons
- wavesurfer.js VS RictyDiminished
- wavesurfer.js VS waveform-playlist
- wavesurfer.js VS Vega
- wavesurfer.js VS tonejs-instruments
- wavesurfer.js VS vue-audio-visual
- wavesurfer.js VS spectrum-vue
- wavesurfer.js VS webm-writer-js
- wavesurfer.js VS Kaminari
- wavesurfer.js VS sphinx-wavedrom
- wavesurfer.js VS spectrum-css
Sponsored