Question

我有一个内容脚本读取数据并使用谷歌tts服务获取输出音频。问题涉及通过扩展

注入脚本

当我通过javascript注入音频元素时，我看到正在调用的url和附加的音频元素。但它没有发挥。我已经设置了autoplay属性。

我正在使用的代码段

    var url = 'http://translate.google.com/translate_tts?tl=en&q=' + encoded;
console.log(url);
var audio = new Audio();
audio.setAttribute('src',url);
audio.setAttribute('autoplay');
var t = document.getElementById('doc');
if(t.appendChild(audio)){
    console.log('appended');
}

https://chrome.google.com/webstore/developer/detail/dhfpnmpbgjadmhggjeajdfmkcclckeim

Answer 1

我对曼苏尔先生的load和play推荐也没有任何好运。我认为这里的问题是你们都有一半是正确的：a）将autoplay设置为true，然后b）只在后台页面中进行。

例如，我让这个背景页面运行得很好：

<!doctype html>
<html>
  <body>
    <script type="text/javascript">
      var url = "http://translate.google.com/translate_tts?tl=en&q=Background";
      var audio = new Audio(url);
      audio.autoplay = true;
    </script>
  </body>
</html>

另请注意，我从未将元素附加到文档中;如果你没有运气，你可以随时使用appendChild，看看是否有所作为。

此外，我认为您的原始代码应该可以正常工作 - 即使ID不存在ID doc的元素 - 如果您将其放在后台页面中。

更多注释

出于某种奇怪的原因，将＆符号“更正”为&而不是&会让我失望。尴尬，但只是对他人的谨慎。

此外，如果您只是打开控制台并从上面粘贴三行JavaScript，它可能无法正常工作 - 除非您在特殊页面中，如新标签页，扩展选项页或，你猜对了，一个扩展背景页面。我不确定为什么会这样，但Chrome可能会限制谁可以注入音频内容并让它播放。我不知道为什么会这样，或者是故意的还是无意的。我想是使用HTML5的另一个警告。

Answer 2

好吧，你不需要追加孩子，并从后台页面进行：

var audio = new Audio(url);
audio.load();
audio.play();

这应该可行，将其加载到JavaScript中即可播放。

Answer 3

问题是您无法通过内容脚本加载音频。然而，这可以使用背景页面来实现。

Answer 4

这里未列出的一种解决方法是：您可以将音频插入页面并通过内容脚本进行控制。

manifest.json

{
  "manifest_version": 2,
  "name": "script",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "https://example.com/"
      ],
      "js": [
        "inject.js",
        "content.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "audios/*"
  ]
}

注意：请不要忘记将音频包含在web_accessible_resources中。

inject.js

const audio = new Audio(chrome.runtime.getURL('audios/notification-sound.mp3'))
audio.id = 'injected-audio'
document.body.appendChild(audio)

content.js

function notify () {
  document.querySelector('#injected-audio').play()
}

notify()

我认为这是一种干净的方法，这样您就可以随时播放声音。

使用内容脚本注入音频

4 个答案: