skottie/modules/skottie-audio-sk/skottie-audio-sk.ts - buildbot - Git at Google

 /**
  * @module skottie-audio-sk
  * @description <h2><code>skottie-audio-sk</code></h2>
  *
  * <p>
  *   A skottie audio sync manager.
  * </p>
  * <p>
  *   This module lets the user upload a song track and synchronize
  *   it with the animation by speeding up or slowing down
  *   the animation to fit the music.
  * </p>
  * <p>
  *   To make this easier, the module can do some analysis of the song
  *   to suggest the tempo of the song (in beats per minute or BPMs).
  *   Once a song is uploaded, we identify the top 5 likely bpms
  *   for the song and suggest those options or read the bpm encoded in the file name.
  *   If none of those options work, BPMs can be set manually.
  * </p>
  * <p>
  *   Once the BPM is established, a second "Beat duration" value is required.
  *   This Beat duration reflects how many frames of the animation
  *   represent a single beat. This value will be used to calculate the final speed
  *   of the animation itself.
  * </p>
  *
  *
  * @evt apply - This event is triggered when the audio settings are set.
  *
  *
  */
 import { define } from 'elements-sk/define';
 import { html } from 'lit-html';
 import { Howl } from 'howler';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk';
 import { LottieAnimation } from '../types';

 const INPUT_FILE_ID = 'fileInput';
 const BPM_ID = 'bpm';
 const BEAT_DURATION_ID = 'beatDuration';
 const START_BUTTON_ID = 'startButton';

 type LoadingState = 'idle' | 'loading' | 'loaded' | 'submitted';

 export interface AudioStartEventDetail {
   speed: number;
 }

 interface animationMarker {
   cm: string;
 }

 interface markerData {
   beat?: number;
   type: string;
 }

 interface tempoInterval {
   count: number;
   tempo: number;
 }

 interface tempoPeak {
   volume: number;
   position: number;
 }

 export class SkottieAudioSk extends ElementSk {
   private static template = (ele: SkottieAudioSk) => html`
   <div>
     <header class="header">
       Audio
     </header>
     <section class=section>
         <div class=inputs>
           <label class=input-label>
             <input
                 type=file
                 name=file
                 id=${INPUT_FILE_ID}
             /> Choose audio file
           </label>
           <checkbox-sk label="Loop"
             ?checked=${ele.shouldLoop}
             @click=${ele.toggleLoop}>
           </checkbox-sk>
           <label class=input-label>
             <input
               type=number
               id=${BPM_ID}
               .value=${ele.bpm}
               required
             /> BPM
           </label>
           ${ele.bpmListTemplate()}
           <label class=input-label>
             <input
               type=number
               id=${BEAT_DURATION_ID}
               .value=${ele.beatDuration}
               required
             /> Beat Duration (in frames)
           </label>
         </div>
         ${ele.startButtonTemplate()}
     <section>
   </div>
 `;

   private startButtonTemplate = () => {
     if (this.loadingState === 'idle' || this.loadingState === 'submitted'
     ) {
       return null;
     }
     if (this.loadingState === 'loading' || this.bpmCalculationState === 'loading') {
       return html`<div>Loading...</div>`;
     }
     return html`
     <button
     class=start
     id=${START_BUTTON_ID}
     @click=${this.start}
     >Start</button>
   `;
   };

   private static bpmListOptionTemplate = (option: tempoInterval, onClick: (t: number)=> void) => html`
   <li class=bpm-options-item>
     <button class=bpm-options-item-button
       @click=${() => onClick(option.tempo)}
     >
       ${option.tempo}
     </button>
   </li>
 `;

   private bpmListTemplate = () => html`
   <ul class=bpm-options>
     ${this.bmpList.map(((b: tempoInterval) => SkottieAudioSk.bpmListOptionTemplate(
     b,
     (option: number) => this.onBpmSelected(option),
   )))}
   </ul>
 `;

   private _animation: LottieAnimation | null = null;

   private beatDuration: number = 0;

   private bmpList: tempoInterval[] = [];

   private bpm: number = 0;

   private bpmCalculationState: LoadingState = 'idle';

   private file: File | null = null;

   private loadingState: LoadingState = 'idle';

   private shouldLoop: boolean = true;

   private sound: Howl | null = null;

   constructor() {
     super(SkottieAudioSk.template);
   }

   set animation(val: LottieAnimation) {
     if (this._animation !== val) {
       this._animation = val;
       this.updateAnimation(val);
     }
   }

   private updateAnimation(animation: LottieAnimation): void {
     const markers = (animation.markers || []) as animationMarker[];
     const marker = markers.find((markerItem: animationMarker) => {
       try {
         const md = JSON.parse(markerItem.cm) as markerData;
         if (md.type === 'beat') {
           return true;
         }
       } catch (err) {
         // Marker does not have beat information
       }
       return false;
     });
     if (marker) {
       const payload = JSON.parse(marker.cm) as markerData;
       if (payload.beat) {
         this.beatDuration = payload.beat;
         this._render();
       }
     }
   }

   private static getPeaks(data: Float32Array[]): tempoPeak[] {
     // What we're going to do here, is to divide up our audio into parts.

     // We will then identify, for each part, what the loudest sample is in that
     // part.

     // It's implied that that sample would represent the most likely 'beat'
     // within that part.

     // Each part is 0.5 seconds long - or 22,050 samples.

     // This will give us 60 'beats' - we will only take the loudest half of
     // those.

     // This will allow us to ignore breaks, and allow us to address tracks with
     // a BPM below 120.

     const partSize = 22050;
     const parts = data[0].length / partSize;
     let peaks: tempoPeak[] = [];

     for (let i = 0; i < parts; i++) {
       let max: tempoPeak | null = null;
       for (let j = i * partSize; j < (i + 1) * partSize; j++) {
         const volume = Math.max(Math.abs(data[0][j]), Math.abs(data[1][j]));
         if (!max || (volume > max.volume)) {
           max = {
             position: j,
             volume: volume,
           };
         }
       }
       peaks.push(max!);
     }
     // We then sort the peaks according to volume...
     peaks.sort((a: tempoPeak, b: tempoPeak) => b.volume - a.volume);
     // ...take the loundest half of those...
     peaks = peaks.splice(0, peaks.length * 0.5);
     // ...and re-sort it back based on position.
     peaks.sort((a: tempoPeak, b: tempoPeak) => a.position - b.position);
     return peaks;
   }

   private getIntervals(peaks: tempoPeak[]) {
     // What we now do is get all of our peaks, and then measure the distance to
     // other peaks, to create intervals.  Then based on the distance between
     // those peaks (the distance of the intervals) we can calculate the BPM of
     // that particular interval.
     // The interval that is seen the most should have the BPM that corresponds
     // to the track itself.
     const groups: tempoInterval[] = [];

     peaks.forEach((peak: tempoPeak, index: number) => {
       for (let i = 1; (index + i) < peaks.length && i < 10; i++) {
         const group = {
           tempo: (60 * 44100) / (peaks[index + i].position - peak.position),
           count: 1,
         };

         while (group.tempo < 90) {
           group.tempo *= 2;
         }

         while (group.tempo > 180) {
           group.tempo /= 2;
         }

         group.tempo = Math.round(group.tempo);

         const groupTempo = groups.find((interval: tempoInterval) => interval.tempo === group.tempo);
         if (!groupTempo) {
           groups.push(group);
         } else {
           groupTempo.count += 1;
         }
       }
     });
     return groups;
   }

   private onOfflineRenderComplete(e: OfflineAudioCompletionEvent): void {
     const buffer = e.renderedBuffer;
     const peaks = SkottieAudioSk.getPeaks([buffer.getChannelData(0), buffer.getChannelData(1)]);
     const groups = this.getIntervals(peaks);

     const top = groups.sort((intA: tempoInterval, intB: tempoInterval) => intB.count - intA.count).splice(0, 5);
     this.bmpList = top;
     if (!this.bpm) {
       this.bpm = top[0].tempo;
     }
     this.bpmCalculationState = 'loaded';
     this._render();
   }

   // It looks for peaks on the audio to estimate best guesses of the bpm
   // more info about it https://jmperezperez.com/bpm-detection-javascript/
   private detectBPMs(ev: ProgressEvent<FileReader>): void {
     const track = ev.target!.result as ArrayBuffer;

     // Create offline context
     const offlineContext = new OfflineAudioContext(2, 30 * 44100, 44100);

     offlineContext.decodeAudioData(track, (buffer: AudioBuffer) => {
       // Create buffer source
       const source = offlineContext.createBufferSource();
       source.buffer = buffer;

       // Beats, or kicks, generally occur around the 100 to 150 hz range.
       // Below this is often the bassline.  So let's focus just on that.

       // First a lowpass to remove most of the song.

       const lowpass = offlineContext.createBiquadFilter();
       lowpass.type = 'lowpass';
       lowpass.frequency.value = 150;
       lowpass.Q.value = 1;

       // Run the output of the source through the low pass.

       source.connect(lowpass);

       // Now a highpass to remove the bassline.

       const highpass = offlineContext.createBiquadFilter();
       highpass.type = 'highpass';
       highpass.frequency.value = 100;
       highpass.Q.value = 1;

       // Run the output of the lowpass through the highpass.

       lowpass.connect(highpass);

       // Run the output of the highpass through our offline context.

       highpass.connect(offlineContext.destination);

       // Start the source, and render the output into the offline conext.

       source.start(0);
       offlineContext.startRendering();
     });

     offlineContext.oncomplete = (e: OfflineAudioCompletionEvent) => this.onOfflineRenderComplete(e);
   }

   private onBpmSelected(option: number): void {
     this.bpm = option;
     if (this.loadingState === 'submitted') {
       this.start();
     } else {
       this._render();
     }
   }

   private onFileDataLoaded(ev: ProgressEvent<FileReader>): void {
     const result = ev.target!.result as string;
     if (this.sound) {
       this.sound.unload();
     }
     this.sound = new Howl({
       src: [result],
       loop: this.shouldLoop,
     });
     this.sound.on('load', () => this.onAudioLoaded());
   }

   private onBpmChange(ev: Event): void {
     ev.preventDefault();
     const value = parseInt((ev.target as HTMLInputElement).value, 10);
     if (this.bpm !== value) {
       this.bpm = value;
       if (this.loadingState === 'submitted') {
         this.start();
       } else {
         this._render();
       }
     }
   }

   private onBeatDurationChange(ev: Event): void {
     ev.preventDefault();
     const value = +(ev.target as HTMLInputElement).value;
     if (this.beatDuration !== value) {
       this.beatDuration = value;
     }
     this._render();
   }

   private toggleLoop(ev: Event): void {
     ev.preventDefault();
     this.shouldLoop = !this.shouldLoop;
     if (this.sound) {
       this.sound.loop(this.shouldLoop);
     }
     this._render();
   }

   private onAudioLoaded(): void {
     this.loadingState = 'loaded';
     this._render();
   }

   // It looks for a bpm as part of the file name.
   // The format of the name should be [name]bpm_[number]
   private static searchBpmOnName(name: string): number {
     const regex = /bpm_([0-9]*)/i;
     const found = name.match(regex);
     if (found) {
       return +found[1];
     }
     return 0;
   }

   private start(): void {
     const animBeat = this.beatDuration;
     const animFps: number = this._animation?.fr || 0;
     const songBpm = this.bpm;
     const songBps = songBpm / 60;
     const animBps = animFps / animBeat;
     let animSpeed = songBps / animBps;
     if (animSpeed > 1.5) {
       animSpeed /= 2;
     }
     this.dispatchEvent(new CustomEvent<AudioStartEventDetail>('apply', {
       detail: {
         speed: animSpeed,
       },
     }));
     if (this.sound) {
       this.sound.seek(0);
       if (!this.sound.playing()) {
         this.sound.play();
       }
     }
     this.loadingState = 'submitted';
     this._render();
   }

   pause(): void {
     if (this.sound) {
       this.sound.pause();
     }
   }

   resume(): void {
     if (this.sound) {
       this.sound.play();
     }
   }

   rewind(): void {
     if (this.sound) {
       this.sound.seek(0);
     }
   }

   private onFileChange(ev: Event): void {
     this.file = (ev.target as HTMLInputElement).files![0];
     this.bpm = SkottieAudioSk.searchBpmOnName(this.file.name);
     this.loadingState = 'loading';
     this.bpmCalculationState = 'loading';
     const reader = new FileReader();
     reader.readAsDataURL(this.file);
     reader.addEventListener('load', (e: ProgressEvent<FileReader>) => this.onFileDataLoaded(e), false);
     const arrayBufferReader = new FileReader();
     arrayBufferReader.readAsArrayBuffer(this.file);
     arrayBufferReader.addEventListener('load', (e: ProgressEvent<FileReader>) => this.detectBPMs(e), false);
     this._render();
   }

   async inputEvent(ev: Event): Promise<void> {
     const target = ev.target as HTMLInputElement;
     if (target.id === INPUT_FILE_ID) {
       this.onFileChange(ev);
     } else if (target.id === BPM_ID) {
       this.onBpmChange(ev);
     } else if (target.id === BEAT_DURATION_ID) {
       this.onBeatDurationChange(ev);
     }
     this._render();
   }

   connectedCallback(): void {
     super.connectedCallback();
     this._render();
     this.addEventListener('input', this.inputEvent);
   }

   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.removeEventListener('input', this.inputEvent);
   }
 }

 define('skottie-audio-sk', SkottieAudioSk);
	/**
	* @module skottie-audio-sk
	* @description <h2><code>skottie-audio-sk</code></h2>
	*
	* <p>
	* A skottie audio sync manager.
	* </p>
	* <p>
	* This module lets the user upload a song track and synchronize
	* it with the animation by speeding up or slowing down
	* the animation to fit the music.
	* </p>
	* <p>
	* To make this easier, the module can do some analysis of the song
	* to suggest the tempo of the song (in beats per minute or BPMs).
	* Once a song is uploaded, we identify the top 5 likely bpms
	* for the song and suggest those options or read the bpm encoded in the file name.
	* If none of those options work, BPMs can be set manually.
	* </p>
	* <p>
	* Once the BPM is established, a second "Beat duration" value is required.
	* This Beat duration reflects how many frames of the animation
	* represent a single beat. This value will be used to calculate the final speed
	* of the animation itself.
	* </p>
	*
	*
	* @evt apply - This event is triggered when the audio settings are set.
	*
	*
	*/
	import { define } from 'elements-sk/define';
	import { html } from 'lit-html';
	import { Howl } from 'howler';
	import { ElementSk } from '../../../infra-sk/modules/ElementSk';
	import { LottieAnimation } from '../types';

	const INPUT_FILE_ID = 'fileInput';
	const BPM_ID = 'bpm';
	const BEAT_DURATION_ID = 'beatDuration';
	const START_BUTTON_ID = 'startButton';

	type LoadingState = 'idle' \| 'loading' \| 'loaded' \| 'submitted';

	export interface AudioStartEventDetail {
	speed: number;
	}

	interface animationMarker {
	cm: string;
	}

	interface markerData {
	beat?: number;
	type: string;
	}

	interface tempoInterval {
	count: number;
	tempo: number;
	}

	interface tempoPeak {
	volume: number;
	position: number;
	}

	export class SkottieAudioSk extends ElementSk {
	private static template = (ele: SkottieAudioSk) => html`
	<div>
	<header class="header">
	Audio
	</header>
	<section class=section>
	<div class=inputs>
	<label class=input-label>
	<input
	type=file
	name=file
	id=${INPUT_FILE_ID}
	/> Choose audio file
	</label>
	<checkbox-sk label="Loop"
	?checked=${ele.shouldLoop}
	@click=${ele.toggleLoop}>
	</checkbox-sk>
	<label class=input-label>
	<input
	type=number
	id=${BPM_ID}
	.value=${ele.bpm}
	required
	/> BPM
	</label>
	${ele.bpmListTemplate()}
	<label class=input-label>
	<input
	type=number
	id=${BEAT_DURATION_ID}
	.value=${ele.beatDuration}
	required
	/> Beat Duration (in frames)
	</label>
	</div>
	${ele.startButtonTemplate()}
	<section>
	</div>
	`;

	private startButtonTemplate = () => {
	if (this.loadingState === 'idle' \|\| this.loadingState === 'submitted'
	) {
	return null;
	}
	if (this.loadingState === 'loading' \|\| this.bpmCalculationState === 'loading') {
	return html`<div>Loading...</div>`;
	}
	return html`
	<button
	class=start
	id=${START_BUTTON_ID}
	@click=${this.start}
	>Start</button>
	`;
	};

	private static bpmListOptionTemplate = (option: tempoInterval, onClick: (t: number)=> void) => html`
	<li class=bpm-options-item>
	<button class=bpm-options-item-button
	@click=${() => onClick(option.tempo)}
	>
	${option.tempo}
	</button>
	</li>
	`;

	private bpmListTemplate = () => html`
	<ul class=bpm-options>
	${this.bmpList.map(((b: tempoInterval) => SkottieAudioSk.bpmListOptionTemplate(
	b,
	(option: number) => this.onBpmSelected(option),
	)))}
	</ul>
	`;

	private _animation: LottieAnimation \| null = null;

	private beatDuration: number = 0;

	private bmpList: tempoInterval[] = [];

	private bpm: number = 0;

	private bpmCalculationState: LoadingState = 'idle';

	private file: File \| null = null;

	private loadingState: LoadingState = 'idle';

	private shouldLoop: boolean = true;

	private sound: Howl \| null = null;

	constructor() {
	super(SkottieAudioSk.template);
	}

	set animation(val: LottieAnimation) {
	if (this._animation !== val) {
	this._animation = val;
	this.updateAnimation(val);
	}
	}

	private updateAnimation(animation: LottieAnimation): void {
	const markers = (animation.markers \|\| []) as animationMarker[];
	const marker = markers.find((markerItem: animationMarker) => {
	try {
	const md = JSON.parse(markerItem.cm) as markerData;
	if (md.type === 'beat') {
	return true;
	}
	} catch (err) {
	// Marker does not have beat information
	}
	return false;
	});
	if (marker) {
	const payload = JSON.parse(marker.cm) as markerData;
	if (payload.beat) {
	this.beatDuration = payload.beat;
	this._render();
	}
	}
	}

	private static getPeaks(data: Float32Array[]): tempoPeak[] {
	// What we're going to do here, is to divide up our audio into parts.

	// We will then identify, for each part, what the loudest sample is in that
	// part.

	// It's implied that that sample would represent the most likely 'beat'
	// within that part.

	// Each part is 0.5 seconds long - or 22,050 samples.

	// This will give us 60 'beats' - we will only take the loudest half of
	// those.

	// This will allow us to ignore breaks, and allow us to address tracks with
	// a BPM below 120.

	const partSize = 22050;
	const parts = data[0].length / partSize;
	let peaks: tempoPeak[] = [];

	for (let i = 0; i < parts; i++) {
	let max: tempoPeak \| null = null;
	for (let j = i * partSize; j < (i + 1) * partSize; j++) {
	const volume = Math.max(Math.abs(data[0][j]), Math.abs(data[1][j]));
	if (!max \|\| (volume > max.volume)) {
	max = {
	position: j,
	volume: volume,
	};
	}
	}
	peaks.push(max!);
	}
	// We then sort the peaks according to volume...
	peaks.sort((a: tempoPeak, b: tempoPeak) => b.volume - a.volume);
	// ...take the loundest half of those...
	peaks = peaks.splice(0, peaks.length * 0.5);
	// ...and re-sort it back based on position.
	peaks.sort((a: tempoPeak, b: tempoPeak) => a.position - b.position);
	return peaks;
	}

	private getIntervals(peaks: tempoPeak[]) {
	// What we now do is get all of our peaks, and then measure the distance to
	// other peaks, to create intervals. Then based on the distance between
	// those peaks (the distance of the intervals) we can calculate the BPM of
	// that particular interval.
	// The interval that is seen the most should have the BPM that corresponds
	// to the track itself.
	const groups: tempoInterval[] = [];

	peaks.forEach((peak: tempoPeak, index: number) => {
	for (let i = 1; (index + i) < peaks.length && i < 10; i++) {
	const group = {
	tempo: (60 * 44100) / (peaks[index + i].position - peak.position),
	count: 1,
	};

	while (group.tempo < 90) {
	group.tempo *= 2;
	}

	while (group.tempo > 180) {
	group.tempo /= 2;
	}

	group.tempo = Math.round(group.tempo);

	const groupTempo = groups.find((interval: tempoInterval) => interval.tempo === group.tempo);
	if (!groupTempo) {
	groups.push(group);
	} else {
	groupTempo.count += 1;
	}
	}
	});
	return groups;
	}

	private onOfflineRenderComplete(e: OfflineAudioCompletionEvent): void {
	const buffer = e.renderedBuffer;
	const peaks = SkottieAudioSk.getPeaks([buffer.getChannelData(0), buffer.getChannelData(1)]);
	const groups = this.getIntervals(peaks);

	const top = groups.sort((intA: tempoInterval, intB: tempoInterval) => intB.count - intA.count).splice(0, 5);
	this.bmpList = top;
	if (!this.bpm) {
	this.bpm = top[0].tempo;
	}
	this.bpmCalculationState = 'loaded';
	this._render();
	}

	// It looks for peaks on the audio to estimate best guesses of the bpm
	// more info about it https://jmperezperez.com/bpm-detection-javascript/
	private detectBPMs(ev: ProgressEvent<FileReader>): void {
	const track = ev.target!.result as ArrayBuffer;

	// Create offline context
	const offlineContext = new OfflineAudioContext(2, 30 * 44100, 44100);

	offlineContext.decodeAudioData(track, (buffer: AudioBuffer) => {
	// Create buffer source
	const source = offlineContext.createBufferSource();
	source.buffer = buffer;

	// Beats, or kicks, generally occur around the 100 to 150 hz range.
	// Below this is often the bassline. So let's focus just on that.

	// First a lowpass to remove most of the song.

	const lowpass = offlineContext.createBiquadFilter();
	lowpass.type = 'lowpass';
	lowpass.frequency.value = 150;
	lowpass.Q.value = 1;

	// Run the output of the source through the low pass.

	source.connect(lowpass);

	// Now a highpass to remove the bassline.

	const highpass = offlineContext.createBiquadFilter();
	highpass.type = 'highpass';
	highpass.frequency.value = 100;
	highpass.Q.value = 1;

	// Run the output of the lowpass through the highpass.

	lowpass.connect(highpass);

	// Run the output of the highpass through our offline context.

	highpass.connect(offlineContext.destination);

	// Start the source, and render the output into the offline conext.

	source.start(0);
	offlineContext.startRendering();
	});

	offlineContext.oncomplete = (e: OfflineAudioCompletionEvent) => this.onOfflineRenderComplete(e);
	}

	private onBpmSelected(option: number): void {
	this.bpm = option;
	if (this.loadingState === 'submitted') {
	this.start();
	} else {
	this._render();
	}
	}

	private onFileDataLoaded(ev: ProgressEvent<FileReader>): void {
	const result = ev.target!.result as string;
	if (this.sound) {
	this.sound.unload();
	}
	this.sound = new Howl({
	src: [result],
	loop: this.shouldLoop,
	});
	this.sound.on('load', () => this.onAudioLoaded());
	}

	private onBpmChange(ev: Event): void {
	ev.preventDefault();
	const value = parseInt((ev.target as HTMLInputElement).value, 10);
	if (this.bpm !== value) {
	this.bpm = value;
	if (this.loadingState === 'submitted') {
	this.start();
	} else {
	this._render();
	}
	}
	}

	private onBeatDurationChange(ev: Event): void {
	ev.preventDefault();
	const value = +(ev.target as HTMLInputElement).value;
	if (this.beatDuration !== value) {
	this.beatDuration = value;
	}
	this._render();
	}

	private toggleLoop(ev: Event): void {
	ev.preventDefault();
	this.shouldLoop = !this.shouldLoop;
	if (this.sound) {
	this.sound.loop(this.shouldLoop);
	}
	this._render();
	}

	private onAudioLoaded(): void {
	this.loadingState = 'loaded';
	this._render();
	}

	// It looks for a bpm as part of the file name.
	// The format of the name should be [name]bpm_[number]
	private static searchBpmOnName(name: string): number {
	const regex = /bpm_([0-9]*)/i;
	const found = name.match(regex);
	if (found) {
	return +found[1];
	}
	return 0;
	}

	private start(): void {
	const animBeat = this.beatDuration;
	const animFps: number = this._animation?.fr \|\| 0;
	const songBpm = this.bpm;
	const songBps = songBpm / 60;
	const animBps = animFps / animBeat;
	let animSpeed = songBps / animBps;
	if (animSpeed > 1.5) {
	animSpeed /= 2;
	}
	this.dispatchEvent(new CustomEvent<AudioStartEventDetail>('apply', {
	detail: {
	speed: animSpeed,
	},
	}));
	if (this.sound) {
	this.sound.seek(0);
	if (!this.sound.playing()) {
	this.sound.play();
	}
	}
	this.loadingState = 'submitted';
	this._render();
	}

	pause(): void {
	if (this.sound) {
	this.sound.pause();
	}
	}

	resume(): void {
	if (this.sound) {
	this.sound.play();
	}
	}

	rewind(): void {
	if (this.sound) {
	this.sound.seek(0);
	}
	}

	private onFileChange(ev: Event): void {
	this.file = (ev.target as HTMLInputElement).files![0];
	this.bpm = SkottieAudioSk.searchBpmOnName(this.file.name);
	this.loadingState = 'loading';
	this.bpmCalculationState = 'loading';
	const reader = new FileReader();
	reader.readAsDataURL(this.file);
	reader.addEventListener('load', (e: ProgressEvent<FileReader>) => this.onFileDataLoaded(e), false);
	const arrayBufferReader = new FileReader();
	arrayBufferReader.readAsArrayBuffer(this.file);
	arrayBufferReader.addEventListener('load', (e: ProgressEvent<FileReader>) => this.detectBPMs(e), false);
	this._render();
	}

	async inputEvent(ev: Event): Promise<void> {
	const target = ev.target as HTMLInputElement;
	if (target.id === INPUT_FILE_ID) {
	this.onFileChange(ev);
	} else if (target.id === BPM_ID) {
	this.onBpmChange(ev);
	} else if (target.id === BEAT_DURATION_ID) {
	this.onBeatDurationChange(ev);
	}
	this._render();
	}

	connectedCallback(): void {
	super.connectedCallback();
	this._render();
	this.addEventListener('input', this.inputEvent);
	}

	disconnectedCallback(): void {
	super.disconnectedCallback();
	this.removeEventListener('input', this.inputEvent);
	}
	}

	define('skottie-audio-sk', SkottieAudioSk);