Class Waveform

packages/playground/src/components/Waveform.ts:30–184

);

export class Waveform implements Mountable {
    readonly root: HTMLElement;
    private cursor: HTMLElement;
    private canvas: HTMLCanvasElement | null = null;
    private currentScore: alphaTab.model.Score | null = null;
    private audioElement: HTMLAudioElement | null = null;
    private updateCursor = () => this.refreshCursor();
    private unsubScoreLoaded: () => void;
    private unsubPlayerReady: () => void;
    private unsubStateChanged: () => void;

    constructor(private api: alphaTab.AlphaTabApi) {
        this.root = parseHtml(html`
            <div class="at-waveform hidden">
                <div class="at-waveform-cursor"></div>
            </div>
        `);
        this.cursor = this.root.querySelector('.at-waveform-cursor')!;
        this.root.addEventListener('click', e => {
            if (this.audioElement) {
                const rect = this.root.getBoundingClientRect();
                const percent = (e.clientX - rect.left) / rect.width;
                this.audioElement.currentTime = this.audioElement.duration * percent;
            }
        });

        this.unsubScoreLoaded = api.scoreLoaded.on(() => this.refresh());
        this.unsubPlayerReady = api.playerReady.on(() => this.refresh());
        this.unsubStateChanged = api.playerStateChanged.on(() => this.refresh());
    }

    private async refresh(): Promise<void> {
        const score = this.api.score;
        const player = this.api.player;
        if (!score || !player || !score.backingTrack || this.api.actualPlayerMode !== alphaTab.PlayerMode.EnabledBackingTrack) {
            this.hide();
            return;
        }

        const output = player.output as alphaTab.synth.IAudioElementBackingTrackSynthOutput;
        if (typeof output.audioElement === 'undefined') {
            this.hide();
            return;
        }
        this.bindAudio(output.audioElement);

        if (score === this.currentScore) {
            return;
        }
        this.currentScore = score;
        this.root.classList.remove('hidden');
        await this.draw(score.backingTrack);
    }

    private bindAudio(audio: HTMLAudioElement): void {
        if (this.audioElement === audio) {
            return;
        }