diff --git a/packages/block-library/src/audio/audio-toolbar.js b/packages/block-library/src/audio/audio-toolbar.js
new file mode 100644
index 0000000000000..db58b0d034cf9
--- /dev/null
+++ b/packages/block-library/src/audio/audio-toolbar.js
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	IconButton,
+	Path,
+	Rect,
+	SVG,
+	Toolbar,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function AudioToolbar( props ) {
+	const { isEditing, onClick } = props;
+
+	const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
+
+	return <Toolbar>
+		<IconButton
+			className={ classnames( 'components-toolbar__control', { 'is-active': isEditing } ) }
+			label={ __( 'Edit audio' ) }
+			onClick={ onClick }
+			icon={ editImageIcon }
+		/>
+	</Toolbar>;
+}
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 1545378ddc0c7..bb1e803f0d4b7 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -4,11 +4,9 @@
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
 import {
 	Disabled,
-	IconButton,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	Toolbar,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -26,11 +24,13 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import icon from './icon';
+import AudioToolbar from './audio-toolbar';
 
 /**
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { speak } from '@wordpress/a11y';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
@@ -40,7 +40,7 @@ class AudioEdit extends Component {
 		// edit component has its own src in the state so it can be edited
 		// without setting the actual value outside of the edit UI
 		this.state = {
-			editing: ! this.props.attributes.src,
+			isEditing: ! this.props.attributes.src,
 		};
 
 		this.toggleAttribute = this.toggleAttribute.bind( this );
@@ -62,7 +62,7 @@ class AudioEdit extends Component {
 					},
 					onError: ( e ) => {
 						setAttributes( { src: undefined, id: undefined } );
-						this.setState( { editing: true } );
+						this.setState( { isEditing: true } );
 						noticeOperations.createErrorNotice( e );
 					},
 					allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -81,8 +81,8 @@ class AudioEdit extends Component {
 		const { attributes, setAttributes } = this.props;
 		const { src } = attributes;
 
-		// Set the block's src from the edit component's state, and switch off
-		// the editing UI.
+		// Set the block's src from the edit component's state, and toggle off
+		// the isEditing UI.
 		if ( newSrc !== src ) {
 			// Check if there's an embed block that handles this URL.
 			const embedBlock = createUpgradedEmbedBlock(
@@ -95,7 +95,7 @@ class AudioEdit extends Component {
 			setAttributes( { src: newSrc, id: undefined } );
 		}
 
-		this.setState( { editing: false } );
+		this.setState( { isEditing: false } );
 	}
 
 	getAutoplayHelp( checked ) {
@@ -105,28 +105,41 @@ class AudioEdit extends Component {
 	render() {
 		const { autoplay, caption, loop, preload, src } = this.props.attributes;
 		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
-		const { editing } = this.state;
-		const switchToEditing = () => {
-			this.setState( { editing: true } );
+		const { isEditing } = this.state;
+		const toggleIsEditing = () => {
+			this.setState( { isEditing: ! this.state.isEditing } );
+			if ( this.state.isEditing ) {
+				speak( __( 'You can now listen to the audio in the audio block.' ) );
+			} else {
+				speak( __( 'You are now editing the audio in the audio block.' ) );
+			}
 		};
 		const onSelectAudio = ( media ) => {
 			if ( ! media || ! media.url ) {
-				// in this case there was an error and we should continue in the editing state
+				// in this case there was an error and we should continue in the isEditing state
 				// previous attributes should be removed because they may be temporary blob urls
 				setAttributes( { src: undefined, id: undefined } );
-				switchToEditing();
+				toggleIsEditing();
 				return;
 			}
 			// sets the block's attribute and updates the edit component from the
-			// selected media, then switches off the editing UI
+			// selected media, then toggles off the isEditing UI
 			setAttributes( { src: media.url, id: media.id } );
-			this.setState( { src: media.url, editing: false } );
+			this.setState( { src: media.url, isEditing: false } );
 		};
-		if ( editing ) {
-			return (
-				<MediaPlaceholder
+
+		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		return (
+			<>
+				<BlockControls>
+					{ !! src &&
+					<AudioToolbar isEditing={ isEditing } onClick={ toggleIsEditing } />
+					}
+				</BlockControls>
+				{ isEditing && <MediaPlaceholder
 					icon={ <BlockIcon icon={ icon } /> }
 					className={ className }
+					onCancel={ !! src && toggleIsEditing }
 					onSelect={ onSelectAudio }
 					onSelectURL={ this.onSelectURL }
 					accept="audio/*"
@@ -134,24 +147,8 @@ class AudioEdit extends Component {
 					value={ this.props.attributes }
 					notices={ noticeUI }
 					onError={ noticeOperations.createErrorNotice }
-				/>
-			);
-		}
-
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-		return (
-			<>
-				<BlockControls>
-					<Toolbar>
-						<IconButton
-							className="components-icon-button components-toolbar__control"
-							label={ __( 'Edit audio' ) }
-							onClick={ switchToEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				</BlockControls>
-				<InspectorControls>
+				/> }
+				{ ! isEditing && <InspectorControls>
 					<PanelBody title={ __( 'Audio Settings' ) }>
 						<ToggleControl
 							label={ __( 'Autoplay' ) }
@@ -176,8 +173,8 @@ class AudioEdit extends Component {
 							] }
 						/>
 					</PanelBody>
-				</InspectorControls>
-				<figure className={ className }>
+				</InspectorControls> }
+				{ ! isEditing && <figure className={ className }>
 					{ /*
 						Disable the audio tag so the user clicking on it won't play the
 						file or change the position slider when the controls are enabled.
@@ -194,7 +191,7 @@ class AudioEdit extends Component {
 							inlineToolbar
 						/>
 					) }
-				</figure>
+				</figure> }
 			</>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */