CINXE.COM
wavesurfer.js | audio waveform player JavaScript library
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>wavesurfer.js | audio waveform player JavaScript library</title> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" /> <link rel="manifest" href="/site.webmanifest" /> <link rel="stylesheet" href="/style.css" /> </head> <body> <header> <a class="logo" href="/"> <img src="/logo-small.png" alt="wavesurfer.js logo" /> <h1>wavesurfer.js</h1> </a> <div class="links"> <a href="/examples">Examples</a> <a href="/docs">Docs</a> <a class="github" href="https://github.com/katspaugh/wavesurfer.js">GitHub</a> </div> </header> <div class="content"> <div class="editor-layout"> <link rel="stylesheet" href="./examples.css" /> <aside> <h3>Basics</h3> <ul> <li><a href="/examples?basic.js">Basic</a></li> <li><a href="/examples?all-options.js">Options</a></li> <li><a href="/examples?events.js">Events</a></li> <li><a href="/examples?zoom.js">Zoom</a></li> <li><a href="/examples?bars.js">Bars</a></li> <li><a href="/examples?webaudio.js">Web Audio</a></li> <li><a href="/examples?react.js">React</a></li> <li><a href="/examples?predecoded.js">Pre-decoded</a></li> <li><a href="/examples?video.js">Video</a></li> <li><a href="/examples?speed.js">Speed</a></li> </ul> <h3>Plugins</h3> <ul> <li><a href="/examples?regions.js">Regions</a></li> <li><a href="/examples?timeline.js">Timeline</a></li> <li><a href="/examples?timeline-custom.js">Timeline<sup>2</sup></a></li> <li><a href="/examples?minimap.js">Minimap</a></li> <li><a href="/examples?envelope.js">Envelope</a></li> <li><a href="/examples?spectrogram.js">Spectrogram</a></li> <li><a href="/examples?record.js">Record</a></li> <li><a href="/examples?zoom-plugin.js">Zoom</a></li> <li><a href="/examples?hover.js">Hover</a></li> </ul> <h3>Customization</h3> <ul> <li><a href="/examples?styling.js">Custom CSS</a></li> <li><a href="/examples?gradient.js">Gradients</a></li> <li><a href="/examples?custom-render.js">Custom render</a></li> <li><a href="/examples?soundcloud.js">Soundcloud</a></li> </ul> <h3>Experiments</h3> <ul> <li><a href="/examples?silence.js">Silence</a></li> <li><a href="/examples?pitch.js">Pitch contour</a></li> <li><a href="/examples?multitrack.js">Multi-track</a></li> <li><a href="/examples?vowels.js">Vowels</a></li> <li><a href="/examples?fm-synth.js">FM synth</a></li> </ul> </aside> <section> <div id="editor"></div> <div id="preview"> <iframe sandbox="allow-scripts allow-same-origin" title="wavesurfer.js example preview"></iframe> <div class="carbon-pages"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIE237&placement=wavesurfer-jsorg" id="_carbonads_js"></script> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="module" src="./init.js"></script> </div> </div> <footer> <ul> <li> 漏 2012–2024 <a href="https://github.com/katspaugh" target="_blank">katspaugh</a> </li> <li> <a href="/about">About</a> </li> <li> <a href="/privacy-policy">Privacy policy</a> </li> <li> <a href="/contact-us">Contact us</a> </li> <li> <a href="/example">V6 examples</a> </li> <li> <a href="https://github.com/katspaugh/wavesurfer.js/blob/beta/LICENSE" target="_blank">BSD-3-Clause License</a> </li> </ul> </footer> </body> </html>