diff --git a/frontend/src/components/Playback/Autoplay.js b/frontend/src/components/Playback/Autoplay.js
index c5bead82c..f3bdf985b 100644
--- a/frontend/src/components/Playback/Autoplay.js
+++ b/frontend/src/components/Playback/Autoplay.js
@@ -2,24 +2,15 @@ import React, { useRef, useState, useEffect } from "react";
 
 import * as audio from "../../util/audio";
 import * as webAudio from "../../util/webAudio";
-import { MEDIA_ROOT } from "../../config";
 
 import Circle from "../Circle/Circle";
 import ListenCircle from "../ListenCircle/ListenCircle";
-import Preload from "../Preload/Preload";
-
-const PRELOAD = "PRELOAD";
-const RECOGNIZE = "RECOGNIZE";
-
 
 const AutoPlay = ({instruction, preloadMessage, onPreloadReady, playConfig, sections, time, startedPlaying, finishedPlaying, responseTime, className=''}) => {
     // player state
-    const [state, setState] = useState({ view: RECOGNIZE });
+    
     const running = useRef(playConfig.auto_play);
-    const setView = (view, data = {}) => {
-        setState({ view, ...data });
-    }
-
+    
     const section = sections[0];
 
     const onCircleTimerTick = (t) => {
@@ -27,90 +18,61 @@ const AutoPlay = ({instruction, preloadMessage, onPreloadReady, playConfig, sect
     };
 
     // Handle view logic
-    useEffect(() => {
-        switch (state.view) {
-            case RECOGNIZE:
-                let latency = 0;
-                // Play audio at start time            
-                if (!playConfig.mute) {
-                    if (playConfig.play_method === 'BUFFER' && !playConfig.external_audio) {
-                        console.log('Autoplay buffer');
-                        latency = webAudio.getTotalLatency();
-                        webAudio.playBufferFrom(section.id, 0, Math.max(0, playConfig.playhead));
-                    } else {
-                        console.log('Autoplay HTML audio')
-                        audio.playFrom(Math.max(0, playConfig.playhead));
-                    }                    
-                }
-                setTimeout(startedPlaying(), latency);
-                break;
-            default:
-            // nothing
+    useEffect(() => {        
+        let latency = 0;
+        // Play audio at start time            
+        if (!playConfig.mute) {
+            if (playConfig.play_method === 'BUFFER' && !playConfig.external_audio) {
+                console.log('Autoplay buffer');
+                latency = webAudio.getTotalLatency();
+                webAudio.playBufferFrom(section.id, 0, Math.max(0, playConfig.playhead));
+            } else {
+                console.log('Autoplay HTML audio')
+                audio.playFrom(Math.max(0, playConfig.playhead));
+            }                    
+            setTimeout(startedPlaying(), latency);
         }
+    }, [playConfig, startedPlaying]);
 
-        // Clean up
-        return () => {
-            audio.pause();
-        };
-    }, [state, playConfig, startedPlaying]);
-
-
-    // Render component based on view
-    switch (state.view) {
-        case PRELOAD:           
-            return (
-                <Preload
-                    instruction={preloadMessage}
-                    duration={playConfig.ready_time}
-                    url={MEDIA_ROOT + section.url}
-                    onNext={() => {                        
-                        setView(RECOGNIZE);
-                        onPreloadReady();
+    // Render component
+    return (
+        <div>
+            <div className="circle">
+                <Circle
+                    running={running}
+                    duration={responseTime}
+                    color="white"
+                    animateCircle={playConfig.show_animation}
+                    onTick={onCircleTimerTick}
+                    onFinish={() => {
+                        // Stop audio
+                        finishedPlaying();
                     }}
                 />
-            );
-        case RECOGNIZE:            
-            return (
-                <div>
-                    <div className="circle">
-                        <Circle
-                            running={running}
+                <div className="circle-content">
+                    {playConfig.show_animation
+                        ? <ListenCircle
                             duration={responseTime}
-                            color="white"
-                            animateCircle={playConfig.show_animation}
-                            onTick={onCircleTimerTick}
-                            onFinish={() => {
-                                // Stop audio
-                                finishedPlaying();
-                            }}
+                            histogramRunning={running}
+                            countDownRunning={running}
                         />
-                        <div className="circle-content">
-                            {playConfig.show_animation
-                                ? <ListenCircle
-                                    duration={responseTime}
-                                    histogramRunning={running}
-                                    countDownRunning={running}
-                                />
-                                : <div className="stationary">
-                                    <span className="fa-solid fa-headphones fa-6x"></span>
-                                </div>
-                            }
+                        : <div className="stationary">
+                            <span className="fa-solid fa-headphones fa-6x"></span>
                         </div>
-                    </div>
-                    <div className={
-                        "aha__listen d-flex flex-column justify-content-center align-items-center " +
-                        className
                     }
-                    >
-                    {/* Instruction */}
-                    {instruction && (<div className="instruction d-flex justify-content-center align-items-center">
-                        <h3 className="text-center">{instruction}</h3>
-                    </div>)}
                 </div>
             </div>
-            )
-            default:
-                return <div>Unknown view: {state.view}</div>;
-        }
+            <div className={
+                "aha__listen d-flex flex-column justify-content-center align-items-center " +
+                className
+            }
+            >
+            {/* Instruction */}
+            {instruction && (<div className="instruction d-flex justify-content-center align-items-center">
+                <h3 className="text-center">{instruction}</h3>
+            </div>)}
+        </div>
+    </div>
+    )   
 }
 export default AutoPlay;
diff --git a/frontend/src/components/Playback/Playback.js b/frontend/src/components/Playback/Playback.js
index 4aa39c176..edd1028d1 100644
--- a/frontend/src/components/Playback/Playback.js
+++ b/frontend/src/components/Playback/Playback.js
@@ -9,13 +9,14 @@ import PlayButton from "../PlayButton/PlayButton";
 import MultiPlayer from "./MultiPlayer";
 import SpectrogramPlayer from "./SpectrogramPlayer";
 import MatchingPairs from "./MatchingPairs";
-import Loading from "../Loading/Loading";
+import Preload from "../Preload/Preload";
 
 export const AUTOPLAY = "AUTOPLAY";
 export const BUTTON = "BUTTON";
 export const MULTIPLAYER = "MULTIPLAYER";
 export const SPECTROGRAM = "SPECTROGRAM";
 export const MATCHINGPAIRS = "MATCHINGPAIRS";
+export const PRELOAD = "PRELOAD";
 
 const Playback = ({
     playerType,
@@ -31,10 +32,13 @@ const Playback = ({
     startedPlaying,
     finishedPlaying,
 }) => {
-    const [sectionsLoaded, setSectionsLoaded] = useState(null);    
     const [playerIndex, setPlayerIndex] = useState(-1);
     const lastPlayerIndex = useRef(-1);
     const activeAudioEndedListener = useRef(null);
+    const [state, setState] = useState({ view: PRELOAD });
+    const setView = (view, data = {}) => {
+        setState({ view, ...data });
+    }
 
     // Keep track of which player has played, in a an array of player indices
     const [hasPlayed, setHasPlayed] = useState([]);
@@ -50,31 +54,6 @@ const Playback = ({
         prevPlayerIndex.current = parseInt(playerIndex);
     }, [playerIndex]);
 
-    
-    useEffect(() => {
-        if (playConfig.play_method === 'BUFFER' && !playConfig.external_audio) {
-            // Use Web-audio and preload sections in buffers            
-            sections.map((section, index) => {
-                // Clear buffers if this is the first section
-                if (index === 0) {
-                    webAudio.clearBuffers();
-                } 
-                return webAudio.loadBuffer(section.id, MEDIA_ROOT + section.url, () => {                    
-                    if (index === (sections.length-1)) {
-                        setSectionsLoaded(1);
-                    }                                        
-                });
-            })
-        } else {
-            if (playConfig.external_audio) {
-                webAudio.closeWebAudio();
-            }
-            setSectionsLoaded(1);
-            // Preload first section
-            return audio.loadUntilAvailable(MEDIA_ROOT + sections[0].url, () => {});
-        }        
-    }, [sections]);
-
     // Cancel events
     const cancelAudioListeners = useCallback(() => {
         activeAudioEndedListener.current && activeAudioEndedListener.current();
@@ -97,7 +76,6 @@ const Playback = ({
         } else {
             finishedPlaying();
         }
-
     }, []);
 
     // Play audio
@@ -106,42 +84,46 @@ const Playback = ({
             let latency = 0;
             if (playConfig.play_method === 'BUFFER' && !playConfig.external_audio) {
                 console.log('Play buffer (local)');                
+
                 // Determine latency for current audio device
                 latency = webAudio.getTotalLatency();
+
                 // Store player index
                 setPlayerIndex(index);
+
                 // Determine if audio should be played
                 if (playConfig.mute) {
                     setPlayerIndex(-1);
                     webAudio.stopBuffer();
                     return;
                 }
-                // Volume 1
-                // audio.setVolume(1);
     
                 // Cancel active events
                 cancelAudioListeners();           
-    
-                // Play audio
-                // audio.playFrom(Math.max(0, playConfig.playhead || 0));
                 
+                // Play audio
                 webAudio.playBuffer(sections[index].id);
+
                 // listen for active audio events
                 activeAudioEndedListener.current = webAudio.listenOnce("ended", onAudioEnded);                
             } else {
                 console.log('Play HTML audo')
+
                 // Only initialize webaudio if section is local            
                 if (!playConfig.external_audio) {                    
                     latency = webAudio.initWebAudio();
                 }
+
                 // Store player index
                 setPlayerIndex(index);
+
                 // Determine if audio should be played
                 if (playConfig.mute) {
                     setPlayerIndex(-1);
                     audio.pause();
                     return;
                 }
+
                 // Volume 1
                 audio.setVolume(1);
 
@@ -178,6 +160,7 @@ const Playback = ({
                     playAudio(index);
                     return;
                 }
+
                 // Stop playback
                 if (lastPlayerIndex.current === index) {
                     webAudio.suspend();
@@ -191,6 +174,7 @@ const Playback = ({
                 if (playConfig.external_audio) {
                     // webAudio.closeWebAudio();
                 }
+
                 // Play section from <AUDIO> tag
                 if (index !== lastPlayerIndex.current) {
                     // Load different audio
@@ -249,6 +233,7 @@ const Playback = ({
     const render = (view) => {
         const attrs = {
             sections,
+            setView,
             instruction,
             preloadMessage,
             autoAdvance,
@@ -264,7 +249,20 @@ const Playback = ({
             submitResult
         };
 
-        switch (view) {
+        switch (state.view) {
+            case PRELOAD:
+                return (
+                    <Preload
+                        instruction={preloadMessage}
+                        duration={playConfig.ready_time}                        
+                        sections={sections}
+                        playConfig={playConfig}
+                        onNext={() => {                        
+                            setView(playerType);
+                            onPreloadReady();
+                        }}
+                    />
+            );
             case AUTOPLAY:
                 return <AutoPlay {...attrs} onPreloadReady={onPreloadReady} />;
             case BUTTON:
@@ -300,10 +298,6 @@ const Playback = ({
                 return <div> Unknown player view {view} </div>;
         }
     };
-
-    if (!sectionsLoaded) {            
-        return <Loading loadingText={'loading'} />;
-    }
     
     return (
         <div className="aha__playback">
diff --git a/frontend/src/components/Preload/Preload.js b/frontend/src/components/Preload/Preload.js
index efad5d3e6..b2191d82e 100644
--- a/frontend/src/components/Preload/Preload.js
+++ b/frontend/src/components/Preload/Preload.js
@@ -3,15 +3,17 @@ import React, { useEffect, useRef, useState } from "react";
 import ListenFeedback from "../Listen/ListenFeedback";
 import CountDown from "../CountDown/CountDown";
 import * as audio from "../../util/audio";
+import * as webAudio from "../../util/webAudio";
+import { MEDIA_ROOT } from "../../config";
 import classNames from "classnames";
 
 // Preload is an experiment screen that continues after a given time or after an audio file has been preloaded
-const Preload = ({ instruction, pageTitle, duration, url, onNext }) => {
+const Preload = ({ instruction, pageTitle, duration, sections, playConfig, onNext }) => {
     const timeHasPassed = useRef(false);
     const audioIsAvailable = useRef(false);
     const [loaderDuration, setLoaderDuration] = useState(duration);
     const [overtime, setOvertime] = useState(false);
-
+    
     const onTimePassed = () => {
         timeHasPassed.current = true;
         setLoaderDuration(0);
@@ -20,17 +22,44 @@ const Preload = ({ instruction, pageTitle, duration, url, onNext }) => {
             onNext();
         }
     };
+
     // Audio preloader
     useEffect(() => {
-        // Load audio until available
-        // Return remove listener
-        return audio.loadUntilAvailable(url, () => {
-            audioIsAvailable.current = true;
-            if (timeHasPassed.current) {
-                onNext();
+        if (playConfig.play_method === 'BUFFER' && !playConfig.external_audio) {
+
+            // Use Web-audio and preload sections in buffers            
+            sections.map((section, index) => {
+                // Clear buffers if this is the first section
+                if (index === 0) {
+                    webAudio.clearBuffers();
+                }
+                
+                // Load sections in buffer
+                // Return remove listener  
+                return webAudio.loadBuffer(section.id, MEDIA_ROOT + section.url, () => {                    
+                    if (index === (sections.length - 1)) {
+                        audioIsAvailable.current = true;
+                        if (timeHasPassed.current) {
+                            onNext();
+                        }                        
+                    }                                        
+                });
+            })
+        } else {
+            if (playConfig.external_audio) {
+                webAudio.closeWebAudio();
             }
-        });
-    }, [url, onNext]);
+            
+            // Load audio until available
+            // Return remove listener   
+            return audio.loadUntilAvailable(MEDIA_ROOT + sections[0].url, () => {
+                audioIsAvailable.current = true;
+                if (timeHasPassed.current) {
+                    onNext();
+                }
+            });            
+        }              
+    }, [sections, onNext]);
 
 
     return (
diff --git a/frontend/src/util/webAudio.js b/frontend/src/util/webAudio.js
index ba8fff5a6..0b0e68d9f 100644
--- a/frontend/src/util/webAudio.js
+++ b/frontend/src/util/webAudio.js
@@ -103,7 +103,7 @@ export const stopBuffer = () => {
 // play buffer by section.id
 export const playBuffer = (id) => {
     source = audioContext.createBufferSource();
-    source.buffer = buffers[id]; // <==            
+    source.buffer = buffers[id];
     source.connect(audioContext.destination);    
     source.start();
 }