如何在 Chrome 扩展程序中添加一个播放音频 onclick 的按钮？答案

【问题标题】：How do I add a button that plays audio onclick in Chrome Extension?如何在 Chrome 扩展程序中添加一个播放音频 onclick 的按钮？
【发布时间】：2021-09-07 17:34:40
【问题描述】：

我正在构建一个简单的 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> 标签时效果很好。

我们将不胜感激任何有关识别问题的帮助。

【问题讨论】：

您可以通过右键单击扩展程序的图标并选择“检查弹出窗口”来检查弹出控制台。看看那里有没有错误。

标签： javascript google-chrome-extension

【解决方案1】：

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

【讨论】：

感谢您的建议！我在popup.js 中添加了以下内容：function play() { playButton.addEventListener("click", function(){ myAudio.play()})}; document.addEventListener("DOMContentLoaded", play()); 但是结果还是和之前一样:(
尝试使用 DOMContentLoaded 事件处理程序：document.getElementById('my-audio').play()
也制作这个模组：document.addEventListener("DOMContentLoaded", play) 你必须检查你的弹出窗口以检查错误。