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.
Full Changelog: https://github.com/naomiaro/waveform-playlist/compare/v4.3.2...v4.3.3
getInfo aka print ouputs effects for tracks and playlists as functions instead of strings.
Full Changelog: https://github.com/naomiaro/waveform-playlist/compare/v4.3.1...v4.3.2
Hello, I've changed the default import to be the umd import as I think that will be easier for a lot of people using the library. If you would like to import and customise parts of the library, please import individual files from the lib/ folder.
https://unpkg.com/browse/[email protected]/
You can render tracks in the playlist with "bars" using barWidth and barGap options on the playlist.
Ex: https://naomiaro.github.io/waveform-playlist/bars.html
Thank-you @oguz3 !
Javascript and CSS assets have been better built and supplied for https://unpkg.com/
https://unpkg.com/browse/[email protected]/
A new basic html site example can be found here: https://github.com/naomiaro/waveform-playlist/tree/main/examples/basic-html This example can be placed on a web server to run with no other setup.
Dependency on Bootstrap is gone.
styles/playlist.scss now has variables allowing you to easily override colours when you include it.
$wp-mute-solo-color: #343a40 !default;
$wp-mute-solo-hover-color: #fff !default;
$wp-mute-solo-focus-color: rgba(52, 58, 64, 0.5) !default;
$wp-btn-danger-background-hover-color: #c82333 !default;
$wp-btn-danger-border-hover-color: #bd2130 !default;
$wp-btn-danger-background-color: #dc3545 !default;
$wp-btn-danger-border-color: #dc3545 !default;
$wp-btn-danger-focus-color: rgba(225, 83, 97, 0.5) !default;
$wp-btn-danger-color: #fff !default;
$wp-btn-info-background-hover-color: #138496 !default;
$wp-btn-info-border-hover-color: #117a8b !default;
$wp-btn-info-background-color: #17a2b8 !default;
$wp-btn-info-border-color: #17a2b8 !default;
$wp-btn-info-focus-color: rgba(58, 176, 195, 0.5) !default;
$wp-btn-info-color: #fff !default;
$wp-selection-background-color: rgba(0, 0, 0, 0.1) !default;
$wp-selection-point-color: red !default;
$wp-fade-background-color: rgba(0, 0, 0, 0.1) !default;
$wp-channel-color: grey !default;
$wp-channel-progress-color: #fbbc04 !default;
$wp-cursor-color: black !default;
$wp-tracks-container-background-color: #e0eff1 !default;
$wp-controls-background-color: #fff !default;
$wp-controls-border-color: #000 !default;
$wp-range-slider-label-color: black !default;
$wp-range-slider-color: goldenrod !default;
$wp-range-slider-focus-color: black !default;
$wp-range-slider-background-color: #ddd !default;
$wp-range-slider-background-focus-color: #bbb !default;
$wp-annotation-box-border-color: grey !default;
$wp-annotation-current-background-color: #ebf4f6 !default;
$wp-annotation-icon-hover-color: orange !default;
Implement #134 Implement #32