diff --git a/react/features/settings/components/web/audio/AudioSettingsContent.js b/react/features/settings/components/web/audio/AudioSettingsContent.js
index a17a00240..2322510c3 100644
--- a/react/features/settings/components/web/audio/AudioSettingsContent.js
+++ b/react/features/settings/components/web/audio/AudioSettingsContent.js
@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 
 import { translate } from '../../../../base/i18n';
 import { IconMicrophoneEmpty, IconVolumeEmpty } from '../../../../base/icons';
+import JitsiMeetJS from '../../../../base/lib-jitsi-meet';
 import { equals } from '../../../../base/redux';
 import { createLocalAudioTracks } from '../../../functions';
 
@@ -11,6 +12,8 @@ import AudioSettingsHeader from './AudioSettingsHeader';
 import MicrophoneEntry from './MicrophoneEntry';
 import SpeakerEntry from './SpeakerEntry';
 
+const browser = JitsiMeetJS.util.browser;
+
 export type Props = {
 
    /**
@@ -169,6 +172,14 @@ class AudioSettingsContent extends Component<Props, State> {
      * @returns {void}
      */
     async _setTracks() {
+        if (browser.isSafari()) {
+
+            // It appears that at the time of this writing, creating audio tracks blocks the browser's main thread for
+            // long time on safari. Wasn't able to confirm which part of track creation does the blocking exactly, but
+            // not creating the tracks seems to help and makes the UI much more responsive.
+            return;
+        }
+
         this._disposeTracks(this.state.audioTracks);
 
         const audioTracks = await createLocalAudioTracks(
@@ -244,9 +255,11 @@ class AudioSettingsContent extends Component<Props, State> {
                     {this.state.audioTracks.map((data, i) =>
                         this._renderMicrophoneEntry(data, i),
                     )}
-                    <AudioSettingsHeader
-                        IconComponent = { IconVolumeEmpty }
-                        text = { t('settings.speakers') } />
+                    { outputDevices.length > 0 && (
+                        <AudioSettingsHeader
+                            IconComponent = { IconVolumeEmpty }
+                            text = { t('settings.speakers') } />)
+                    }
                     {outputDevices.map((data, i) =>
                         this._renderSpeakerEntry(data, i),
                     )}
diff --git a/react/features/settings/components/web/audio/MicrophoneEntry.js b/react/features/settings/components/web/audio/MicrophoneEntry.js
index 180bab975..d23df4cd1 100644
--- a/react/features/settings/components/web/audio/MicrophoneEntry.js
+++ b/react/features/settings/components/web/audio/MicrophoneEntry.js
@@ -140,7 +140,7 @@ export default class MicrophoneEntry extends Component<Props, State> {
      *
      * @inheritdoc
      */
-    compmonentWillUnmount() {
+    componentWillUnmount() {
         this._stopListening(this.props.jitsiTrack);
     }
 
@@ -150,7 +150,7 @@ export default class MicrophoneEntry extends Component<Props, State> {
      * @inheritdoc
      */
     render() {
-        const { children, hasError, isSelected } = this.props;
+        const { children, hasError, isSelected, jitsiTrack } = this.props;
 
         return (
             <div
@@ -161,10 +161,11 @@ export default class MicrophoneEntry extends Component<Props, State> {
                     isSelected = { isSelected }>
                     {children}
                 </AudioSettingsEntry>
-                <Meter
+                { Boolean(jitsiTrack) && <Meter
                     className = 'audio-preview-meter-mic'
                     isDisabled = { hasError }
                     level = { this.state.level } />
+                }
             </div>
         );
     }