diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index f11bd65ed..28d5b669c 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -404,7 +404,6 @@
   "device": "Device",
   "destination": "Destination",
   "learnMore": "Learn more",
-  "playAtCustomSpeed": "Play at $multipler$x speed",
   "linkVisitWarningTitle": "Open this link in your browser?",
   "linkVisitWarningMessage": "Are you sure you want to open $url$ in your browser?",
   "open": "Open",
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 622277f15..4fbf56b6e 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1385,3 +1385,23 @@ input {
   padding: $session-margin-sm $session-margin-lg;
   border-radius: 4px;
 }
+
+.speedButton {
+  padding: $session-margin-xs;
+  opacity: 0.6;
+  transition: none;
+  &:hover {
+    @include themify($themes) {
+      opacity: 1;
+    }
+  }
+  .session-button {
+    transition: none;
+
+    &:hover {
+      @include themify($themes) {
+        color: themed('textColorOpposite');
+      }
+    }
+  }
+}
diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx
index 04d4187f2..480bee5ac 100644
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/ts/components/conversation/H5AudioPlayer.tsx
@@ -1,18 +1,16 @@
 // Audio Player
-import React, { useEffect, useRef } from 'react';
-import H5AudioPlayer from 'react-h5-audio-player';
+import React, { useEffect, useRef, useState } from 'react';
+import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
 import { useTheme } from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
-import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
+import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../session/icon';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 
-export const AudioPlayerWithEncryptedFile = (props: {
-  src: string;
-  contentType: string;
-  playbackSpeed: number;
-}) => {
+export const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string }) => {
   const theme = useTheme();
+
+  const [playbackSpeed, setPlaybackSpeed] = useState(1.0);
   const { urlToLoad } = useEncryptedFileFetch(props.src, props.contentType);
-  const { playbackSpeed } = props;
   const player = useRef<H5AudioPlayer | null>(null);
 
   useEffect(() => {
@@ -31,6 +29,21 @@ export const AudioPlayerWithEncryptedFile = (props: {
       showDownloadProgress={false}
       listenInterval={100}
       ref={player}
+      customControlsSection={[
+        RHAP_UI.MAIN_CONTROLS,
+        RHAP_UI.VOLUME,
+        <div className="speedButton" key="togglePlaybackSpeed">
+          <SessionButton
+            text={`${playbackSpeed}x`}
+            theme={theme}
+            onClick={() => {
+              setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1);
+            }}
+            buttonType={SessionButtonType.Simple}
+            buttonColor={SessionButtonColor.None}
+          />
+        </div>,
+      ]}
       customIcons={{
         play: (
           <SessionIcon
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 3cd9732f6..cddcc65da 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -50,7 +50,6 @@ interface State {
   expiring: boolean;
   expired: boolean;
   imageBroken: boolean;
-  playbackSpeed: number;
 }
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
@@ -69,7 +68,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       expiring: false,
       expired: false,
       imageBroken: false,
-      playbackSpeed: 1,
     };
     this.ctxMenuID = `ctx-menu-message-${uuid()}`;
   }
@@ -205,7 +203,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           }}
         >
           <AudioPlayerWithEncryptedFile
-            playbackSpeed={this.state.playbackSpeed}
             src={firstAttachment.url}
             contentType={firstAttachment.contentType}
           />
@@ -573,11 +570,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           </Item>
         ) : null}
 
-        {isAudio(attachments) ? (
-          <Item onClick={this.updatePlaybackSpeed}>
-            {window.i18n('playAtCustomSpeed', this.state.playbackSpeed === 1 ? 2 : 1)}
-          </Item>
-        ) : null}
         <Item
           onClick={() => {
             MessageInteraction.copyBodyToClipboard(text);
@@ -824,15 +816,6 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     );
   }
 
-  /**
-   * Doubles / halves the playback speed based on the current playback speed.
-   */
-  private updatePlaybackSpeed() {
-    this.setState(prevState => ({
-      playbackSpeed: prevState.playbackSpeed === 1 ? 2 : 1,
-    }));
-  }
-
   private handleContextMenu(e: any) {
     e.preventDefault();
     e.stopPropagation();