can you improve this code::<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multitrack Editor</title>
    <script src="https://unpkg.com/wavesurfer.js@7.8.0-beta.2"></script>
    <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>
    <script src="https://unpkg.com/wavesurfer-multitrack/dist/multitrack.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #1c1c1c;
            margin: 0;
            padding: 20px;
            color: #fff;
        }

        #waveform {
            width: 80%;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
            margin: 0 auto;
        }

        button {
            background-color: #8b008b;
            border: none;
            color: #fff;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            width: 100%;
            max-width: 120px;
        }

        button:hover {
            background-color: #ff69b4;
            box-shadow: 0 8px 12px rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        button:disabled {
            background-color: #333;
            cursor: not-allowed;
        }

        button i {
            display: block;
            margin: auto;
        }

        input[type="file"] {
            display: none;
        }

        .upload-label {
            background-color: #8b008b;
            border: none;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            width: 100%;
            max-width: 120px;
        }

        .upload-label:hover {
            background-color: #ff69b4;
            box-shadow: 0 8px 12px rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 10px;
            background: #8b008b;
            outline: none;
            opacity: 0.7;
            transition: opacity .15s ease-in-out;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: #ff69b4;
            cursor: pointer;
            border-radius: 50%;
        }

        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #ff69b4;
            cursor: pointer;
            border-radius: 50%;
        }

        #cntrlbuttons {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
            width: 100%;
            max-width: 900px;
            margin: 10px auto;
        }

        #track-controls-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        #track-controls-container > input[type="range"] {
            width: 100%;
            margin: 0 auto;
        }

        #wavcontrols {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 0 auto;
        }

        .individualcntrls {
            width: 100%;
            height: 130px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
            margin: 10px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 5px;
            background-color: #2c2c2c;
            margin: 5px;
        }

        .track-control {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5px;
        }

        .track-control-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .track-control-sliders {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }

        .track-control i {
            margin-right: 10px;
        }

        .track-control input[type="range"] {
            flex-grow: 1;
            margin-left: 0px;
        }

        #individualcntrls-container {
            width: 20%;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
            margin: 10px 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            background-color: #2c2c2c;
        }
    </style>
</head>
<body>
    <div id="wavcontrols">
        <div id="waveform"></div>
        <div id="individualcntrls-container"></div>
    </div>
    <div id="track-controls-container">
        <input type="range" min="10" max="100" value="10" />
        <div id="cntrlbuttons">
            <label for="track-upload" class="upload-label">
                <i class="fas fa-upload icon"></i>
            </label>
            <input type="file" id="track-upload" multiple />
            <button id="play" disabled><i class="fas fa-play icon"></i></button>
            <button id="forward"><i class="fas fa-forward icon"></i></button>
            <button id="backward"><i class="fas fa-backward icon"></i></button>
            <button id="zoomIn"><i class="fas fa-search-plus icon"></i></button>
            <button id="zoomOut"><i class="fas fa-search-minus icon"></i></button>
        </div>
    </div>

    <script type="module">
        let multitrack;
        let tracks = [];

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        document.querySelector('#track-upload').addEventListener('change', function (e) {
            if (multitrack) {
                multitrack.destroy();
            }
            const files = e.target.files;
            const newTracks = Array.from(files).map((file, index) => ({
                id: `track${tracks.length + index}`,
                url: URL.createObjectURL(file),
                draggable: true,
                envelope: false,
                volume: 1,
                options: {
                    waveColor: getRandomColor(),
                    progressColor: 'hsl(161, 87%, 20%)',
                    normalize: true,
                    audioRate: 1
                }
            }));

            initMultitrack(newTracks);
        });

        async function initMultitrack(newTracks) {
            if (multitrack) {
                multitrack.destroy();
            }

            tracks = [...tracks, ...newTracks];

            multitrack = Multitrack.create(tracks, {
                container: document.querySelector('#waveform')
            });

            const playButton = document.querySelector('#play');
            playButton.disabled = true;

            multitrack.once('canplay', async () => {
                playButton.disabled = false;
                playButton.onclick = () => {
                    multitrack.isPlaying() ? multitrack.pause() : multitrack.play();
                    playButton.innerHTML = multitrack.isPlaying() ? '<i class="fas fa-pause icon"></i>' : '<i class="fas fa-play icon"></i>';
                }
            });

            document.querySelector('#zoomIn').addEventListener('click', function () {
                multitrack.zoom(1.1);
            });

            document.querySelector('#zoomOut').addEventListener('click', function () {
                multitrack.zoom(0.9);
            });

            addTrackControls(newTracks);
            syncHeights();
        }

        function addTrackControls(tracks) {
            const controlsContainer = document.querySelector('#individualcntrls-container');
            tracks.forEach((track, index) => {
                const trackControls = document.createElement('div');
                trackControls.classList.add('individualcntrls');
                trackControls.setAttribute('data-track-id', track.id); // Assign track ID

                const muteButton = document.createElement('button');
                muteButton.innerHTML = '<i class="fas fa-volume-mute"></i>';
                muteButton.onclick = () => toggleMute(track.id);

                const soloButton = document.createElement('button');
                soloButton.innerHTML = '<i class="fas fa-headphones"></i>';
                soloButton.onclick = () => toggleSolo(track.id);

                const volumeSlider = document.createElement('input');
                volumeSlider.type = 'range';
                volumeSlider.min = 0;
                volumeSlider.max = 100;
                volumeSlider.value = 100;
                volumeSlider.oninput = (e) => setVolume(track.id, e.target.value / 100);

                const panSlider = document.createElement('input');
                panSlider.type = 'range';
                panSlider.min = -1;
                panSlider.max = 1;
                panSlider.step = 0.01;
                panSlider.value = 0;
                panSlider.oninput = (e) => setPan(track.id, e.target.value);

                const trackControlButtons = document.createElement('div');
                trackControlButtons.classList.add('track-control-buttons');
                trackControlButtons.appendChild(muteButton);
                trackControlButtons.appendChild(soloButton);

                const trackControlSliders = document.createElement('div');
                trackControlSliders.classList.add('track-control-sliders');
                trackControlSliders.appendChild(volumeSlider);
                trackControlSliders.appendChild(panSlider);

                trackControls.appendChild(trackControlButtons);
                trackControls.appendChild(trackControlSliders);
                controlsContainer.appendChild(trackControls);
            });
        }

        function syncHeights() {
            const waveformHeight = document.querySelector('#waveform').offsetHeight;
            document.querySelector('#individualcntrls-container').style.height = `${waveformHeight}px`;
        }

function toggleMute(trackId) {
  const trackIndex = tracks.findIndex(track => track.id === trackId);
  if (trackIndex !== -1) {
    tracks[trackIndex].muted = !tracks[trackIndex].muted;
    multitrack.setTrackVolume(trackIndex, tracks[trackIndex].muted ? 0 : tracks[trackIndex].volume);
  }
}

function toggleSolo(trackId) {
  const trackIndex = tracks.findIndex(track => track.id === trackId);
  if (trackIndex !== -1) {
    const isSoloed = !tracks[trackIndex].soloed;
    tracks.forEach((track, index) => {
      track.soloed = false;
      multitrack.setTrackVolume(index, 0);
    });
    tracks[trackIndex].soloed = isSoloed;
    multitrack.setTrackVolume(trackIndex, isSoloed ? tracks[trackIndex].volume : 0);
  }
}

        function setVolume(trackId, volume) {
          const trackIndex = tracks.findIndex(track => track.id === trackId);
            if (trackIndex !== -1) {
            tracks[trackIndex].volume = volume;
            if (!tracks[trackIndex].muted && !tracks[trackIndex].soloed) {
             multitrack.setTrackVolume(trackIndex, volume);
    }
  }
}

        function setPan(trackId, pan) {
            const track = multitrack.getTrackById(trackId);
            track.setPan(pan);
        }

        // Zoom
        const slider = document.querySelector('input[type="range"]');
        slider.oninput = () => {
            multitrack.zoom(slider.valueAsNumber);
        };

        // Forward/back buttons
        const forward = document.querySelector('#forward');
        forward.onclick = () => {
            multitrack.setTime(multitrack.getCurrentTime() + 30);
        };
        const backward = document.querySelector('#backward');
        backward.onclick = () => {
            multitrack.setTime(multitrack.getCurrentTime() - 30);
        };

        // Observe changes in the waveform container height
        const observer = new MutationObserver(syncHeights);
        observer.observe(document.querySelector('#waveform'), { attributes: true, childList: true, subtree: true });

        window.addEventListener('resize', syncHeights);
    </script>
</body>
</html>