implement preload to the audio component

EvandroLG · Nov 3, 2021 · cb517e3 · cb517e3
1 parent e187ecd
commit cb517e3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/demo/audio/src/index.ts b/demo/audio/src/index.ts
@@ -9,8 +9,9 @@ const buttonPause = document.getElementById('bt-pause');
 const buttonStop = document.getElementById('bt-stop');
 const audio: AudioType = Audio({
   file: song,
-  loop: false,
+  loop: true,
   volume: getVolume(range),
+  preload: true,
 });
 
 audio.on('end', () => {

diff --git a/src/audio/Audio.ts b/src/audio/Audio.ts
@@ -5,7 +5,7 @@ import EventHandler from '../EventHandler';
 import initializeSource from './initializeSource';
 import decodeAudioData from './decodeAudioData';
 import { AudioPropType, AudioEventType, AudioType } from './types';
-import { getBuffer } from '../utils';
+import { getBuffer, preloadFiles } from '../utils';
 
 // if audiocontext is initialized before a user gesture on the page, its
 // state become `suspended` by default. once audiocontext.state is `suspended`
@@ -20,6 +20,7 @@ const Audio = ({
   volume = 1,
   autoPlay = false,
   loop = false,
+  preload = false,
 }: AudioPropType): AudioType => {
   const audioCtx = AudioCtx();
   const states = { ...globalStates };
@@ -43,6 +44,10 @@ const Audio = ({
       .catch(console.error);
   };
 
+  if (preload) {
+    preloadFiles([file], 1);
+  }
+
   return {
     play() {
       if (states.hasStarted) {

diff --git a/src/audio/types.ts b/src/audio/types.ts
@@ -3,6 +3,7 @@ export type AudioPropType = {
   volume?: number;
   autoPlay?: boolean;
   loop?: boolean;
+  preload?: boolean;
 };
 
 export type AudioEventType = 'ready' | 'start' | 'state' | 'end';