Skip to content

Instantly share code, notes, and snippets.

@katspaugh

katspaugh/set-track-volume.js

Created January 19, 2024 15:50
Show Gist options
  • Save katspaugh/a33e2fa96802a35e1bdb125a6c0c5517 to your computer and use it in GitHub Desktop.
Save katspaugh/a33e2fa96802a35e1bdb125a6c0c5517 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
set-track-volume.js
const multitrack = Multitrack.create(
[
{
id: 0,
options: {
waveColor: 'hsl(161, 87%, 49%)',
progressColor: 'hsl(161, 87%, 20%)',
},
url: '/examples/audio/audio.wav',
},
{
id: 1,
options: {
waveColor: 'hsl(121, 87%, 49%)',
progressColor: 'hsl(161, 87%, 20%)',
},
url: '/examples/audio/demo.wav',
},
],
{
container: document.querySelector('#container'), // required!
minPxPerSec: 10, // zoom level
rightButtonDrag: false, // set to true to drag with right mouse button
cursorWidth: 2,
cursorColor: '#D72F21',
trackBackground: '#2D2D2D',
trackBorderColor: '#7C7C7C',
dragBounds: true,
envelopeOptions: {
lineColor: 'rgba(255, 0, 0, 0.7)',
lineWidth: 4,
dragPointSize: window.innerWidth < 600 ? 20 : 10,
dragPointFill: 'rgba(255, 255, 255, 0.8)',
dragPointStroke: 'rgba(255, 255, 255, 0.3)',
},
},
)
document.querySelector('#play').addEventListener('click', () => {
multitrack.setTime(0)
multitrack.play()
})
document.querySelector('#only-0').addEventListener('click', () => {
multitrack.setTrackVolume(1, 0)
multitrack.setTrackVolume(0, 1)
})
document.querySelector('#only-1').addEventListener('click', () => {
multitrack.setTrackVolume(0, 0)
multitrack.setTrackVolume(1, 1)
})
/*
<html>
<script src="https://unpkg.com/wavesurfer-multitrack/dist/multitrack.min.js"></script>
<label>
Zoom: <input type="range" min="10" max="100" value="10" />
</label>
<div style="margin: 2em 0">
<button id="play">Play</button>
<button id="only-0">Only track #0</button>
<button id="only-1">Only track #1</button>
</div>
<div id="container" style="background: #2d2d2d; color: #fff"></div>
</html>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment