feat: audio csp异常处理 WIP

Leon406 · May 22, 2024 · 30ab589 · 30ab589
1 parent 5882b1a
commit 30ab589
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 14 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -4,7 +4,7 @@
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
   "default_locale": "zh_CN",
-  "version": "0.2.9",
+  "version": "0.3.3",
   "icons": {
     "48": "assets/result48.png",
     "128": "assets/icon_128.png"

diff --git a/src/background.js b/src/background.js
@@ -21,7 +21,7 @@ function do_load_dictionary(file_text) {
     }
     rare_words[form] = [lemma, rank]
     if (form.includes('’')) {
-      rare_words[form.replace(/’/g,"'")] = [lemma, rank]
+      rare_words[form.replace(/’/g, '\'')] = [lemma, rank]
     }
   }
   const local_storage = chrome.storage.local
@@ -36,8 +36,8 @@ function load_eng_dictionary() {
     .then(do_load_dictionary)
 }
 
-function deriveKey(key, rare_words,value) {
-  let tmp = key.replace(/’/g, "'")
+function deriveKey(key, rare_words, value) {
+  let tmp = key.replace(/’/g, '\'')
   if (tmp !== key) {
     rare_words[tmp] = value
   }
@@ -429,6 +429,14 @@ function initialize_extension() {
           .then(sendResponse)
         return true // Will respond asynchronously.
       }
+      if (request.type === 'fetchArrayBuffer') {
+        console.log('request fetchArrayBuffer', request)
+        fetch(request.audioUrl)
+          .then((response) => response.arrayBuffer())
+          .then((buffer) => JSON.stringify({ data: new Uint8Array(buffer) }))
+          .then(sendResponse)
+        return true // Will respond asynchronously.
+      }
       if (request.wdm_request === 'hostname') {
         const tab_url = sender.tab.url
         const url = new URL(tab_url)

diff --git a/src/content_script.js b/src/content_script.js
@@ -102,12 +102,53 @@ function addPhoneticClickEvent() {
   let us = document.getElementById('play_us')
   let uk = document.getElementById('play_uk')
   if (!us || !uk) return
-  let usClick = () => document.getElementById('player_us').play()
-  let ukClick = () => document.getElementById('player_uk').play()
-  us.addEventListener('click', usClick)
-  us.addEventListener('mouseover', usClick)
-  uk.addEventListener('click', ukClick)
-  uk.addEventListener('mouseover', ukClick)
+
+  let clickFunc = (evt) => play(evt.target.getAttribute('data-src'))
+  us.addEventListener('click', clickFunc)
+  us.addEventListener('mouseover', clickFunc)
+  uk.addEventListener('click', clickFunc)
+  uk.addEventListener('mouseover', clickFunc)
+}
+
+function play(audioUrl) {
+  try {
+    new Audio(audioUrl).play()
+  }catch (e) {
+    console.error(e)
+    // todo fix arraybuffer play
+    let cached = cacheAudio.get(audioUrl)
+    if (cached) {
+      console.log('use Cache arraybuffer')
+      playArrayBuffer(cached)
+    } else {
+      chrome.runtime.sendMessage(
+        {
+          type: 'fetchArrayBuffer',
+          audioUrl
+        },
+        (res) => {
+          console.log('arraybuffer', res)
+          console.log('arraybuffer2', JSON.parse(res).data)
+          const arraybuffer = new Uint8Array(JSON.parse(res).data).buffer
+          console.log('arraybuffer', arraybuffer)
+          cacheAudio.set(audioUrl, arraybuffer)
+          playArrayBuffer(arraybuffer)
+        }
+      )
+    }
+  }
+}
+
+/**播放 ArrayBuffer 音频*/
+function playArrayBuffer(arrayBuffer) {
+  var context = new AudioContext()
+
+  context.decodeAudioData(arrayBuffer.slice(0), audioBuffer => { // `slice(0)`克隆一份（`decodeAudioData`后原数组清空）
+    const bufferSource = context.createBufferSource()
+    bufferSource.buffer = audioBuffer
+    bufferSource.connect(context.destination)
+    bufferSource.start(0)
+  })
 }
 
 function renderBubble() {
@@ -147,10 +188,8 @@ function renderBubble() {
     console.log('audio1', result)
     if (result.phsym && result.phsym.length) {
       phonetic_html = `<div class="phonetic">
-        <audio id="player_us" src="${result.phsym[0].pron}"></audio>
-        <audio id="player_uk" src="${result.phsym[1].pron}"></audio>
-        <span id="play_us">${result.phsym[0].lang}</span>
-        <span id="play_uk">${result.phsym[1].lang}</span>
+        <span id="play_us" data-src="${result.phsym[0].pron}">${result.phsym[0].lang}</span>
+        <span id="play_uk" data-src="${result.phsym[1].pron}">${result.phsym[1].lang}</span>
       </div>`
     }
     if (result.infs && result.infs.length) {