如何在 Chrome 扩展中添加一个按钮来播放音频 onclick？

Question

我正在构建一个简单的 Chrome 扩展弹出窗口，它涉及通过单击按钮播放音频。虽然 <audio controls> 的 html5 标签工作正常，但我一直在寻找一种方法来放弃 html5 提供的默认设置并改为自定义布局。现在问题出在这里：我现在有一个按钮，但是当我点击它时它没有播放任何音频。

popup.html

<audio id="my-audio" src="chrome-extension://[MY_ID]/audios/rain.mp3" type="audio/mp3"></audio>
<button id="play">Play</button>

popup.js

let myAudio = document.getElementById('my-audio');
let playButton = document.getElementById('play');

playButton.addEventListener("click", function(){
    myAudio.play()
});

manifest.json

{
  "name": ...,
  "description": ...,
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "host_permissions": ["<all_urls>"],
  },
}

我的 background.js 目前是空的，当我运行扩展时没有显示任何错误。我使用我的扩展 ID 访问音频文件，当我使用 <audio> 标签时效果很好。

如果您能帮助识别问题，我们将不胜感激。

Answer 1

您可能正面临经典的“鸡蛋和鸡肉”问题:-)
当您尝试播放音频文件时，后者尚未准备好播放。将 popup.js 代码包装在 DomContentLoaded 事件处理程序中。

如何在 Chrome 扩展中添加一个按钮来播放音频 onclick？

How do I add a button that plays audio onclick in Chrome Extension?

javascript

google-chrome-extension