test bing tts

public/offscreen.js

@@ -1,27 +1,24 @@
+var audio;
+
 // Listen for messages from the extension
 chrome.runtime.onMessage.addListener((msg) => {
   if ("play" in msg) playAudio(msg.play);
+  if ("stop" in msg) stopAudio();
 });
 
 // Play sound with access to DOM APIs
-function playAudio({ source, volume }) {
-  const audio = new Audio(source);
+async function playAudio({ source, volume }) {
+  audio = new Audio(source);
   audio.volume = volume;
+  // audio.playbackRate=0.5;
   audio.play();
+  // audio.onended = onended
 }
 
-// async function playSound(source = 'default.wav', volume = 1) {
-//   await createOffscreen();
-//   await chrome.runtime.sendMessage({ play: { source, volume } });
-// }
-
-// createOffscreen();
-// Create the offscreen document if it doesn't already exist
-// async function createOffscreen() {
-//   if (await chrome.offscreen.hasDocument()) return;
-//   await chrome.offscreen.createDocument({
-//     url: "offscreen.html",
-//     reasons: ["AUDIO_PLAYBACK"],
-//     justification: "testing", // details for using the API
-//   });
-// }
+function stopAudio() {
+  if (!audio) {
+    return;
+  }
+  audio.pause();
+  audio.currentTime = 0;
+}

src/background.js

@@ -260,3 +260,39 @@ function addInstallUrl(url) {
     }
   });
 }
+
+// bing tts test ==============================================================================
+// manifest offscreen permission required
+// playTts();
+
+async function playTts() {
+  var ttsBlob = await translator["bing"].requestTts("hello world", "");
+  var base64Url = await getUrl(ttsBlob);
+  playSound(base64Url);
+}
+
+function getUrl(blob) {
+  return new Promise((resolve, reject) => {
+    var reader = new FileReader();
+    reader.onload = function () {
+      var dataUrl = reader.result;
+      resolve(dataUrl);
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function playSound(source = "default.wav", volume = 1) {
+  await createOffscreen();
+  await chrome.runtime.sendMessage({ play: { source, volume } });
+}
+
+// Create the offscreen document if it doesn't already exist
+async function createOffscreen() {
+  if (await chrome.offscreen.hasDocument()) return;
+  await chrome.offscreen.createDocument({
+    url: "offscreen.html",
+    reasons: ["AUDIO_PLAYBACK"],
+    justification: "play tts", // details for using the API
+  });
+}

src/contentScript.js

@@ -228,9 +228,9 @@ async function translateWithReverse(word) {
 }
 
 function wrapInlineHtml(translatedText, transliteration, targetLang) {
-  var text = `<div dir=${util.isRtl(targetLang)} class="notranslate">  ${encode(
-    translatedText
-  )} </div>`;
+  var text = `<span dir=${util.isRtl(
+    targetLang
+  )} class="notranslate">  ${encode(translatedText)} </span>`;
 
   if (transliteration && setting["useTransliteration"] == "true") {
     text = `

src/translator/bing.js

@@ -79,6 +79,8 @@ var bingLangCode = {
 let bingAccessToken;
 let bingBaseUrl = "https://www.bing.com/ttranslatev3";
 let bingTokenUrl = "https://www.bing.com/translator";
+let bingTtsUrl = "https://www.bing.com/tfettts";
+
 export default class bing extends BaseTranslator {
   static langCodeJson = bingLangCode;
 
@@ -115,6 +117,29 @@ export default class bing extends BaseTranslator {
       return { translatedText, detectedLang, transliteration };
     }
   }
+
+  static async requestTts(text, lang) {
+    const { token, key, IG, IID } = await getBingAccessToken();
+    var bingLang = this.encodeLangCode(lang);
+    var voice = "en-US-AriaNeural";
+    // <prosody pitch='+${pitch}Hz' rate ='+${rate}%' volume='+${volume}%'></prosody>
+    //  <voice xml:lang='en-US' xml:gender='Female' name='en-US-AriaNeural'></voice>
+
+    return await ky
+      .post(bingTtsUrl, {
+        searchParams: {
+          IG,
+          IID: IID && IID.length ? IID + "." + bingAccessToken.count++ : "",
+          isVertical: "1",
+        },
+        body: new URLSearchParams({
+          ssml: `<speak version='1.0' xml:lang='en-US'><voice  name='${voice}'><prosody rate='-20%'>${text}</prosody></voice></speak>`,
+          token,
+          key,
+        }),
+      })
+      .blob();
+  }
 }
 
 async function getBingAccessToken() {