Skip to content

Commit c8ff5a3

Browse files
katspaughkatspaugh
authored
Move Multitrack into a separate repo (#2808)
* Move Multitrack into a separate repo * Styles
1 parent 7b6c6c9 commit c8ff5a3

File tree

8 files changed

+35
-712
lines changed

8 files changed

+35
-712
lines changed

‎cypress.config.ts‎ renamed to ‎cypress.config.js‎

File renamed without changes.

‎examples/_preview.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ const loadPreview = (code) => {
1515
<meta name="viewport" content="width=device-width, initial-scale=1" />
1616
<title>wavesurfer.js examples</title>
1717
<style>
18+
body {
19+
margin: 0;
20+
padding: 1rem;
21+
font-family: sans-serif;
22+
}
1823
@media (prefers-color-scheme: dark) {
1924
body {
2025
background: #333;

‎examples/multitrack.js‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1-
// Multi-track mixer
1+
/**
2+
* Multi-track mixer
3+
*
4+
* @see https://github.com/katspaugh/wavesurfer-multitrack
5+
*/
26

3-
// Import wavesurfer and plugins
4-
import Multitrack from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/multitrack.js'
5-
6-
// If you prefer a script tag, use this instead:
77
/*
8-
<script>
9-
window.WaveSurfer = {}
10-
</script>
11-
<script src="https://unpkg.com/wavesurfer.js@beta/dist/wavesurfer.Multitrack.min.js"></script>
12-
<script>
13-
window.Multitrack = window.WaveSurfer.Multitrack
14-
</script>
8+
<html>
9+
<label>
10+
Zoom: <input type="range" min="10" max="100" value="10" />
11+
</label>
12+
13+
<div style="margin: 2em 0">
14+
<button id="play">Play</button>
15+
<button id="forward">Forward 30s</button>
16+
<button id="backward">Back 30s</button>
17+
</div>
18+
19+
<div id="multitrack" style="background: #2d2d2d; color: #fff"></div>
20+
21+
<script src="https://unpkg.com/wavesurfer-multitrack/dist/multitrack.min.js"></script>
22+
</html>
1523
*/
1624

17-
// Call Multitrack.create to initialize the multitrack mixer
18-
// Pass the tracks array and WaveSurfer options with a container element
25+
// Call Multitrack.create to initialize a multitrack mixer
26+
// Pass a tracks array and WaveSurfer options with a container element
1927
const multitrack = Multitrack.create(
2028
[
2129
{
@@ -79,7 +87,7 @@ const multitrack = Multitrack.create(
7987
},
8088
],
8189
{
82-
container: document.body, // required!
90+
container: document.querySelector('#multitrack'), // required!
8391
minPxPerSec: 10, // zoom level
8492
rightButtonDrag: true, // drag tracks with the right mouse button
8593
cursorWidth: 2,
@@ -118,6 +126,8 @@ multitrack.on('fade-out-change', ({ id, fadeOutStart }) => {
118126
multitrack.on('intro-end-change', ({ id, endTime }) => {
119127
console.log(`Track ${id} intro end updated to ${endTime}`)
120128
})
129+
130+
// Drag'n'drop a track object (not an audio file!)
121131
multitrack.on('drop', ({ id }) => {
122132
multitrack.addTrack({
123133
id,
@@ -131,24 +141,6 @@ multitrack.on('drop', ({ id }) => {
131141
})
132142
})
133143

134-
// Page styles
135-
document.body.style.background = '#161313'
136-
document.body.style.color = '#fff'
137-
138-
/*
139-
<html>
140-
<label>
141-
Zoom: <input type="range" min="10" max="100" value="10" />
142-
</label>
143-
144-
<div style="margin: 1em 0 2em;">
145-
<button id="play">Play</button>
146-
<button id="forward">Forward 30s</button>
147-
<button id="backward">Back 30s</button>
148-
</div>
149-
</html>
150-
*/
151-
152144
// Play/pause button
153145
const button = document.querySelector('#play')
154146
button.disabled = true
@@ -176,7 +168,7 @@ slider.oninput = () => {
176168
multitrack.zoom(slider.valueAsNumber)
177169
}
178170

179-
// Destroy all wavesurfer instances on unmount
171+
// Destroy the plugin on unmount
180172
// This should be called before calling initMultiTrack again to properly clean up
181173
window.onbeforeunload = () => {
182174
multitrack.destroy()

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
margin: 0;
1616
min-height: 100vh;
1717
font-size: 16px;
18+
font-family: sans-serif;
1819
}
1920
body * {
2021
box-sizing: border-box;

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@
2828
"import": "./dist/wavesurfer.js",
2929
"require": "./dist/wavesurfer.min.js"
3030
},
31+
"./dist/event-emitter.js": {
32+
"import": "./dist/event-emitter.js"
33+
},
3134
"./dist/plugins/*": {
3235
"import": "./dist/plugins/*.js",
3336
"require": "./dist/plugins/*.min.js"

0 commit comments

Comments
 (0)