diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index 93e43a7d..4e5d81db 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -21,10 +21,6 @@ function apiTemplateRender(template, data) {
     return _apiInvoke('templateRender', {data, template});
 }
 
-function apiAudioGetUrl(definition, source, optionsContext) {
-    return _apiInvoke('audioGetUrl', {definition, source, optionsContext});
-}
-
 function _apiInvoke(action, params={}) {
     const data = {action, params};
     return new Promise((resolve, reject) => {
diff --git a/ext/bg/js/audio.js b/ext/bg/js/audio.js
index 0732e25e..3bcfc4e7 100644
--- a/ext/bg/js/audio.js
+++ b/ext/bg/js/audio.js
@@ -171,7 +171,7 @@ async function audioInject(definition, fields, sources, optionsContext, audioSys
         const expressions = definition.expressions;
         const audioSourceDefinition = Array.isArray(expressions) ? expressions[0] : definition;
 
-        const {uri} = await audioSystem.getExpressionAudio(audioSourceDefinition, sources, optionsContext, {tts: false});
+        const {uri} = await audioSystem.getExpressionAudio(audioSourceDefinition, sources, {tts: false, optionsContext});
         const filename = audioBuildFilename(audioSourceDefinition);
         if (filename !== null) {
             definition.audio = {url: uri, filename};
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index abf4c673..60a87916 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -34,7 +34,7 @@ class Backend {
         this.options = null;
         this.optionsSchema = null;
         this.defaultAnkiFieldTemplates = null;
-        this.audioSystem = new AudioSystem();
+        this.audioSystem = new AudioSystem({getAudioUri: this._getAudioUri.bind(this)});
         this.optionsContext = {
             depth: 0,
             url: window.location.href
@@ -764,6 +764,16 @@ class Backend {
 
     // Utilities
 
+    async _getAudioUri(definition, source, details) {
+        let optionsContext = (typeof details === 'object' && details !== null ? details.optionsContext : null);
+        if (!(typeof optionsContext === 'object' && optionsContext !== null)) {
+            optionsContext = this.optionsContext;
+        }
+
+        const options = this.getOptions(optionsContext);
+        return await audioGetUrl(definition, source, options);
+    }
+
     async _injectScreenshot(definition, fields, screenshot) {
         let usesScreenshot = false;
         for (const fieldValue of Object.values(fields)) {
diff --git a/ext/bg/js/settings/audio.js b/ext/bg/js/settings/audio.js
index 87ce1ffb..6f581d9b 100644
--- a/ext/bg/js/settings/audio.js
+++ b/ext/bg/js/settings/audio.js
@@ -16,14 +16,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/*global getOptionsContext, getOptionsMutable, settingsSaveOptions
+/*global getOptionsContext, getOptionsMutable, settingsSaveOptions, apiAudioGetUrl
 AudioSystem, AudioSourceUI*/
 
 let audioSourceUI = null;
 let audioSystem = null;
 
 async function audioSettingsInitialize() {
-    audioSystem = new AudioSystem();
+    audioSystem = new AudioSystem({
+        getAudioUri: async (definition, source) => {
+            const optionsContext = getOptionsContext();
+            return await apiAudioGetUrl(definition, source, optionsContext);
+        }
+    });
 
     const optionsContext = getOptionsContext();
     const options = await getOptionsMutable(optionsContext);
diff --git a/ext/mixed/js/audio.js b/ext/mixed/js/audio.js
index d2feae04..1da5d48c 100644
--- a/ext/mixed/js/audio.js
+++ b/ext/mixed/js/audio.js
@@ -16,8 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/*global apiAudioGetUrl*/
-
 class TextToSpeechAudio {
     constructor(text, voice) {
         this.text = text;
@@ -69,9 +67,10 @@ class TextToSpeechAudio {
 }
 
 class AudioSystem {
-    constructor() {
+    constructor({getAudioUri}) {
         this._cache = new Map();
         this._cacheSizeMaximum = 32;
+        this._getAudioUri = getAudioUri;
 
         if (typeof speechSynthesis !== 'undefined') {
             // speechSynthesis.getVoices() will not be populated unless some API call is made.
@@ -79,7 +78,7 @@ class AudioSystem {
         }
     }
 
-    async getExpressionAudio(expression, sources, optionsContext, details) {
+    async getExpressionAudio(expression, sources, details) {
         const key = `${expression.expression}:${expression.reading}`;
         const cacheValue = this._cache.get(expression);
         if (typeof cacheValue !== 'undefined') {
@@ -88,7 +87,7 @@ class AudioSystem {
         }
 
         for (const source of sources) {
-            const uri = await apiAudioGetUrl(expression, source, optionsContext);
+            const uri = await this._getAudioUri(expression, source, details);
             if (uri === null) { continue; }
 
             try {
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index e0b12f7d..9d2746fd 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -18,7 +18,7 @@
 
 /*global docRangeFromPoint, docSentenceExtract
 apiKanjiFind, apiTermsFind, apiNoteView, apiOptionsGet, apiDefinitionsAddable, apiDefinitionAdd
-apiScreenshotGet, apiForward
+apiScreenshotGet, apiForward, apiAudioGetUrl
 AudioSystem, DisplayGenerator, WindowScroll, DisplayContext, DOM*/
 
 class Display {
@@ -31,7 +31,7 @@ class Display {
         this.index = 0;
         this.audioPlaying = null;
         this.audioFallback = null;
-        this.audioSystem = new AudioSystem();
+        this.audioSystem = new AudioSystem({getAudioUri: this._getAudioUri.bind(this)});
         this.styleNode = null;
 
         this.eventListeners = new EventListenerCollection();
@@ -775,7 +775,7 @@ class Display {
             const sources = this.options.audio.sources;
             let audio, source, info;
             try {
-                ({audio, source} = await this.audioSystem.getExpressionAudio(expression, sources, this.getOptionsContext()));
+                ({audio, source} = await this.audioSystem.getExpressionAudio(expression, sources));
                 info = `From source ${1 + sources.indexOf(source)}: ${source}`;
             } catch (e) {
                 if (this.audioFallback === null) {
@@ -916,4 +916,9 @@ class Display {
         const key = event.key;
         return (typeof key === 'string' ? (key.length === 1 ? key.toUpperCase() : key) : '');
     }
+
+    async _getAudioUri(definition, source) {
+        const optionsContext = this.getOptionsContext();
+        return await apiAudioGetUrl(definition, source, optionsContext);
+    }
 }