如何在Chrome扩展程序中播放声音

Question

如何在Chrome扩展程序中播放声音

javascriptgoogle-chromegoogle-chrome-extension

19

我想在谷歌扩展程序中播放声音。我该怎么做？我应该在 myscript.js 文件中写什么？

我尝试在 myscript.js 中编写了以下代码：

var audio = new Audio("alarm.wav");
audio.play();

并且：

document.write('<audio id="player" src="alarm.wav" >');
document.getElementById('player').play();

但这并没有起作用。我没有添加任何更多的内容，因此也没有未满足的条件。

我的 manifest.json 文件：

{
  "name": "Alarm",
  "version": "1.0.0",
  "icons": {"64": "icon64.png"},
  "permissions": [
    "http://site1/",
    "http://site2/"
  ],
  "content_scripts": [
    {
      "matches": ["http://site1/", "http://site2/"],
      "js": ["myscript.js"],
      "run_at": "document_end"
    }
  ],
  "manifest_version": 2
}

如果我在myscript.js文件中添加按钮，这个按钮可以正常工作，但是我无法播放声音。我的音频文件是mp3格式，与manifest.json和myscript.js文件在同一个文件夹中，并且我的myscript.js代码如下：

var myAudio = new Audio();
myAudio.src = "alarm.mp3";
myAudio.play();

- Przemysław Niedziela

https://developer.chrome.com/extensions/samples#search:sound - epascarello

你的扩展中哪部分是myscript.js？将你的清单文件添加到问题中。 - Xan

1

重复的问题涉及到图像，但对于从内容脚本中加载的音频、视频和任何其他媒体，答案都是相同的。 - Rob W

4

具有讽刺意味的是，经过谷歌搜索后，这现在成为了第一个结果 :-) - Eric Majerus

4个回答

3

根据文档，chrome.sound在mv3中已被弃用。

另一个选择是使用chrome.tts来读取消息，例如"嘿，醒醒"。

另一种方法是打开一个新标签页播放音频。您可以使用chrome.tabs.create()或window.open("https://....", "_blank")。

- Kristiyan Tsvetanov

3

Chrome终于为Manifest V3添加了一个解决方案：Offscreen API。

要使用它，您需要在manifest.json中的权限列表中添加'offscreen'。

以下是一个示例，展示如何使用它：

function createSoundHtml(){
  chrome.offscreen.createDocument({
    url: chrome.runtime.getURL('audio.html'),
    reasons: ['AUDIO_PLAYBACK'],
    justification: 'notification',
  });
}

在同一个文件夹中的audio.html和audio.mp3。

<!DOCTYPE html>
<html>
<head>
<title>Play MP3 File</title>
</head>
<body>
    <audio autoplay>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
</body>
</html>

你可以轻松地将createSoundHtml()函数调用与服务工作者中的Chrome消息API结合使用。

- Franz Görlich

2

如果声音来自外部链接，例如 https://upload.wikimedia.org/wikipedia/commons/5/55/En-us-house-noun.ogg，你可以直接使用 Audio 调用该链接，无需在扩展的 manifest 中添加任何内容：

var myAudio = new Audio();
myAudio.src = "https://upload.wikimedia.org/wikipedia/commons/5/55/En-us-house-noun.ogg";
myAudio.play();

- MagTun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marco Bonelli · Accepted Answer

更新：自Chrome扩展程序清单v3起，Chrome扩展程序已经转向使用服务工作者作为后台页面，因此如果您正在使用Manifest v3，则不再可能直接从扩展程序的后台页面播放音频。另请参见：从服务工作者播放声音。如果您仍在使用Manifest v2，则可以阅读下面的答案。

使用JavaScript播放一些声音/音乐最简单的方法是使用Audio对象：您只需要将要播放的文件放在扩展文件夹中，就可以像这样播放：

var myAudio = new Audio(chrome.runtime.getURL("path/to/file.mp3"));
myAudio.play();

您可以使用play()播放音频，使用pause()暂停音频。

请注意，如果您想在内容脚本中（或任何其他不在chrome：// extension URL下的地方）播放声音，则必须在web_accessible_resources清单字段中声明音频文件：

"web_accessible_resources": [
    "path/to/file.mp3"
]

工作示例

你可以从这里下载我做的一个测试扩展程序。当你在stackoverflow.com页面中点击任何内容时，它会通过内容脚本播放声音。