diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
index 44620c0f4..6c91a66e3 100644
--- a/src/components/Audioplayer/index.js
+++ b/src/components/Audioplayer/index.js
@@ -28,8 +28,13 @@ const RepeatDropdown = Loadable({
 });
 
 export class Audioplayer extends Component {
+  state = {
+    loadingFile: false
+  };
+
   componentDidMount() {
-    const { currentFile } = this.props; // eslint-disable-line no-shadow, max-len
+    const { currentFile, currentVerse, audio, verses, load } = this.props; // eslint-disable-line no-shadow, max-len
+    const nextVerse = verses[this.getNext()];
 
     debug('component:Audioplayer', 'componentDidMount');
 
@@ -37,7 +42,19 @@ export class Audioplayer extends Component {
       return this.handleAddFileListeners(currentFile);
     }
 
-    console.error('Audioplayer mounted but no file available');
+    load({
+      chapterId: currentVerse.chapterId,
+      verseId: currentVerse.id,
+      verseKey: currentVerse.verseKey,
+      audio
+    });
+
+    load({
+      chapterId: nextVerse.chapterId,
+      verseId: nextVerse.id,
+      verseKey: nextVerse.verseKey,
+      audio
+    });
 
     return false;
   }
@@ -58,7 +75,7 @@ export class Audioplayer extends Component {
     }
 
     // Change verse
-    if (this.props.currentVerse !== nextProps.currentVerse) {
+    if (this.props.currentVerse.verseKey !== nextProps.currentVerse.verseKey) {
       if (this.props.currentFile) {
         this.handleRemoveFileListeners(this.props.currentFile);
       }
@@ -66,11 +83,42 @@ export class Audioplayer extends Component {
       return this.handleAddFileListeners(nextProps.currentFile);
     }
 
+    if (this.props.audio !== nextProps.audio) {
+      Object.keys(this.props.files).forEach(key =>
+        this.props.load({
+          chapterId: this.props.verses[key].chapterId,
+          verseId: this.props.verses[key].id,
+          verseKey: this.props.verses[key].verseKey,
+          audio: nextProps.audio
+        })
+      );
+    }
+
     return false;
   }
 
-  componentDidUpdate() {
-    const { currentFile, isPlaying } = this.props;
+  componentDidUpdate(previousProps) {
+    const {
+      currentFile,
+      isPlaying,
+      verses,
+      audio,
+      currentVerse,
+      load
+    } = this.props;
+
+    if (
+      currentVerse.verseKey !== previousProps.currentVerse.verseKey &&
+      verses[this.getNext()]
+    ) {
+      const verse = verses[this.getNext()];
+      load({
+        chapterId: verse.chapterId,
+        verseId: verse.id,
+        verseKey: verse.verseKey,
+        audio
+      });
+    }
 
     if (!currentFile) return false;
 
@@ -95,30 +143,28 @@ export class Audioplayer extends Component {
   }
 
   getPrevious() {
-    const { currentVerse, files } = this.props;
-    const ayahIds = Object.keys(files);
-    const index = ayahIds.findIndex(id => id === currentVerse);
+    const { currentVerse, verseIds } = this.props;
+    const index = verseIds.findIndex(id => id === currentVerse.verseKey);
 
-    return ayahIds[index - 1];
+    return verseIds[index - 1];
   }
 
   getNext() {
-    const { currentVerse, chapter, files, onLoadAyahs } = this.props;
-    const ayahIds = Object.keys(files);
-    const ayahNum = currentVerse.split(':')[1];
-    const index = ayahIds.findIndex(id => id === currentVerse);
+    const { currentVerse, chapter, onLoadAyahs, verseIds } = this.props;
+    const ayahNum = currentVerse.verseKey.split(':')[1];
+    const index = verseIds.findIndex(id => id === currentVerse.verseKey);
 
     if (chapter.versesCount === ayahNum + 1) {
       // We are at the end of the chapter!
       return false;
     }
 
-    if (ayahIds.length - 3 <= index + 1) {
+    if (verseIds.length - 3 <= index + 1) {
       // Need to load the next set of ayahs!
       onLoadAyahs();
     }
 
-    return ayahIds[index + 1];
+    return verseIds[index + 1];
   }
 
   handleAyahChange = (direction = 'next') => {
@@ -130,7 +176,7 @@ export class Audioplayer extends Component {
     const nextVerse = this[camelize(`get_${direction}`)]();
     if (!nextVerse) return pause();
 
-    this.props[direction](currentVerse);
+    this.props[direction](currentVerse.verseKey);
 
     this.handleScrollTo(nextVerse);
 
@@ -141,7 +187,7 @@ export class Audioplayer extends Component {
     return false;
   };
 
-  scrollToVerse = (ayahNum = this.props.currentVerse) => {
+  scrollToVerse = (ayahNum = this.props.currentVerse.verseKey) => {
     scroller.scrollTo(`verse:${ayahNum}`, -45);
   };
 
@@ -163,7 +209,7 @@ export class Audioplayer extends Component {
   preloadNext() {
     const { currentVerse, files } = this.props;
     const ayahIds = Object.keys(files);
-    const index = ayahIds.findIndex(id => id === currentVerse) + 1;
+    const index = ayahIds.findIndex(id => id === currentVerse.verseKey) + 1;
 
     for (let id = index; id <= index + 2; id += 1) {
       if (ayahIds[id]) {
@@ -183,7 +229,7 @@ export class Audioplayer extends Component {
       setRepeat, // eslint-disable-line no-shadow
       setAyah // eslint-disable-line no-shadow
     } = this.props;
-    const [chapter, ayah] = currentVerse
+    const [chapter, ayah] = currentVerse.verseKey
       .split(':')
       .map(val => parseInt(val, 10));
 
@@ -244,7 +290,7 @@ export class Audioplayer extends Component {
 
     if (!shouldScroll) {
       // we use the inverse (!) here because we're toggling, so false is true
-      this.scrollToVerse(currentVerse);
+      this.scrollToVerse(currentVerse.verseKey);
     }
 
     this.props.toggleScroll();
@@ -254,7 +300,7 @@ export class Audioplayer extends Component {
     // NOTE: if no file, just wait.
     if (!file) return false;
 
-    const { update, currentTime } = this.props; // eslint-disable-line no-shadow
+    const { update } = this.props; // eslint-disable-line no-shadow
     debug('component:Audioplayer', `Attaching listeners to ${file.src}`);
 
     // Preload file
@@ -262,8 +308,8 @@ export class Audioplayer extends Component {
 
     const onLoadeddata = () => {
       // Default current time to zero. This will change
-      file.currentTime = // eslint-disable-line no-param-reassign
-        file.currentTime || currentTime || 0;
+      file.currentTime = 0; // eslint-disable-line
+      // file.currentTime || currentTime || 0;
 
       return update({
         duration: file.duration,
@@ -345,7 +391,9 @@ export class Audioplayer extends Component {
   renderPreviousButton() {
     const { currentVerse, files } = this.props;
     if (!files) return false;
-    const index = Object.keys(files).findIndex(id => id === currentVerse);
+    const index = Object.keys(files).findIndex(
+      id => id === currentVerse.verseKey
+    );
 
     return (
       <a
@@ -362,7 +410,7 @@ export class Audioplayer extends Component {
     const { chapter, currentVerse } = this.props;
     if (!chapter) return false;
     const isEnd =
-      chapter.versesCount === parseInt(currentVerse.split(':')[1], 10);
+      chapter.versesCount === parseInt(currentVerse.verseKey.split(':')[1], 10);
 
     return (
       <a
@@ -417,10 +465,10 @@ export class Audioplayer extends Component {
               onTrackChange={this.handleTrackChange}
             />}
           {segments &&
-            segments[currentVerse] &&
+            segments[currentVerse.verseKey] &&
             <Segments
-              segments={segments[currentVerse]}
-              currentVerse={currentVerse}
+              segments={segments[currentVerse.verseKey]}
+              currentVerse={currentVerse.verseKey}
               currentTime={currentTime}
             />}
         </div>
@@ -432,7 +480,7 @@ export class Audioplayer extends Component {
             />
             :
             {' '}
-            {currentVerse.split(':')[1]}
+            {currentVerse.verseKey.split(':')[1]}
           </li>
           <li className={style.controlItem}>
             {this.renderPreviousButton()}
@@ -447,7 +495,7 @@ export class Audioplayer extends Component {
             <RepeatDropdown
               repeat={repeat}
               setRepeat={setRepeat}
-              current={parseInt(currentVerse.split(':')[1], 10)}
+              current={parseInt(currentVerse.verseKey.split(':')[1], 10)}
               chapter={chapter}
             />
           </li>
@@ -464,22 +512,22 @@ export class Audioplayer extends Component {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const currentVerse =
-    state.audioplayer.currentVerse || ownProps.startVerse.verseKey;
   const files = state.audioplayer.files[ownProps.chapter.id];
+  const verseIds = Object.keys(ownProps.verses);
 
   return {
     files,
-    currentVerse,
+    verseIds,
     segments: state.audioplayer.segments[ownProps.chapter.id],
-    currentFile: files[currentVerse],
+    currentFile: files[ownProps.currentVerse.verseKey],
     chapterId: ownProps.chapter.id,
     isPlaying: state.audioplayer.isPlaying,
     isLoading: state.audioplayer.isLoading,
     repeat: state.audioplayer.repeat,
     shouldScroll: state.audioplayer.shouldScroll,
     duration: state.audioplayer.duration,
-    currentTime: state.audioplayer.currentTime
+    currentTime: state.audioplayer.currentTime,
+    audio: state.options.audio
   };
 };
 
@@ -490,7 +538,7 @@ Audioplayer.propTypes = {
   segments: customPropTypes.segments,
   // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
   files: PropTypes.object, // eslint-disable-line
-  currentVerse: PropTypes.string,
+  currentVerse: PropTypes.verseType,
   isLoading: PropTypes.bool.isRequired,
   play: PropTypes.func.isRequired,
   pause: PropTypes.func.isRequired,
@@ -505,9 +553,12 @@ Audioplayer.propTypes = {
   isPlaying: PropTypes.bool,
   currentTime: PropTypes.number,
   duration: PropTypes.number,
+  load: PropTypes.func.isRequired,
   // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
   currentFile: PropTypes.any, // eslint-disable-line
-  startVerse: customPropTypes.verseType // eslint-disable-line
+  audio: PropTypes.number.isRequired,
+  verses: customPropTypes.verses,
+  verseIds: PropTypes.object // eslint-disable-line
 };
 
 export default connect(mapStateToProps, AudioActions)(Audioplayer);
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 94b5e031a..5198aed0b 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -79,34 +79,34 @@ class Surah extends Component {
     return false;
   }
 
-  componentDidMount() {
-    const { verses, options: { audio } } = this.props;
-
-    Object.values(verses).forEach((verse) => {
-      this.props.actions.audio.load({
-        chapterId: verse.chapterId,
-        verseId: verse.id,
-        verseKey: verse.verseKey,
-        audio
-      });
-    });
-  }
-
-  // TODO: Should this belong here?
-  componentWillReceiveProps(nextProps) {
-    if (this.props.options.audio !== nextProps.options.audio) {
-      const { verses, options: { audio } } = nextProps;
-
-      Object.values(verses).forEach((verse) => {
-        this.props.actions.audio.load({
-          chapterId: verse.chapterId,
-          verseId: verse.id,
-          verseKey: verse.verseKey,
-          audio
-        });
-      });
-    }
-  }
+  // componentDidMount() {
+  //   const { verses, options: { audio } } = this.props;
+
+  //   Object.values(verses).forEach((verse) => {
+  //     this.props.actions.audio.load({
+  //       chapterId: verse.chapterId,
+  //       verseId: verse.id,
+  //       verseKey: verse.verseKey,
+  //       audio
+  //     });
+  //   });
+  // }
+
+  // // TODO: Should this belong here?
+  // componentWillReceiveProps(nextProps) {
+  //   if (this.props.options.audio !== nextProps.options.audio) {
+  //     const { verses, options: { audio } } = nextProps;
+
+  //     Object.values(verses).forEach((verse) => {
+  //       this.props.actions.audio.load({
+  //         chapterId: verse.chapterId,
+  //         verseId: verse.id,
+  //         verseKey: verse.verseKey,
+  //         audio
+  //       });
+  //     });
+  //   }
+  // }
 
   shouldComponentUpdate(nextProps, nextState) {
     const conditions = [
@@ -360,7 +360,14 @@ class Surah extends Component {
   }
 
   render() {
-    const { chapter, verses, options, info, actions } = this.props; // eslint-disable-line no-shadow
+    const {
+      chapter,
+      verses,
+      options,
+      info,
+      actions,
+      currentVerse
+    } = this.props; // eslint-disable-line no-shadow
     debug('component:Surah', 'Render');
 
     if (!this.hasVerses()) {
@@ -430,7 +437,8 @@ class Surah extends Component {
         {__CLIENT__ &&
           <Audioplayer
             chapter={chapter}
-            startVerse={Object.values(verses)[0]}
+            verses={verses}
+            currentVerse={verses[currentVerse]}
             onLoadAyahs={this.handleLazyLoadAyahs}
           />}
       </div>
diff --git a/src/redux/actions/audioplayer.js b/src/redux/actions/audioplayer.js
index d140a9de0..65aeafc3b 100644
--- a/src/redux/actions/audioplayer.js
+++ b/src/redux/actions/audioplayer.js
@@ -116,5 +116,5 @@ export function load({ chapterId, verseId, verseKey, audio }) {
 }
 
 export function isLoaded(files, verse) {
-  return files[verse.chapterId][verse.verseKey];
+  return files[verse.verseKey];
 }