Chrome Audio Capture：轻松捕捉网页音频的利器

最新推荐文章于 2025-01-15 16:20:57 发布

柳嵘英Humphrey

最新推荐文章于 2025-01-15 16:20:57 发布

阅读量1.9k

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00350/article/details/142074950

版权

Chrome Audio Capture：轻松捕捉网页音频的利器

项目地址:https://gitcode.com/gh_mirrors/ch/Chrome-Audio-Capturer

项目介绍

Chrome Audio Capture 是一款强大的 Chrome 浏览器扩展，旨在帮助用户轻松捕捉当前标签页中播放的任何音频。无论是音乐、播客还是在线会议，Chrome Audio Capture 都能精准捕捉，并支持同时捕捉多个标签页的音频。捕捉完成后，音频文件会自动下载到 Chrome 的下载文件夹中，支持保存为 .wav 或 .mp3 格式。此外，用户还可以选择在捕捉过程中静音正在捕捉的标签页，确保音频捕捉的纯净性。

项目技术分析

音频捕捉技术

Chrome Audio Capture 的核心功能是利用 Chrome 浏览器的 tabCapture API 来获取当前标签页的 MediaStream 对象。通过 MediaStream 对象，扩展程序初始化了一个使用 Recorder.js 库的录音器，将音频流编码为 .wav 文件。以下是关键代码片段：

chrome.tabCapture.capture({audio: true}, (stream) => {
  let startTabId;
  chrome.tabs.query({active:true, currentWindow: true}, (tabs) => startTabId = tabs[0].id)
  const liveStream = stream;
  const audioCtx = new AudioContext();
  const source = audioCtx.createMediaStreamSource(stream);
  let mediaRecorder = new Recorder(source);

标签页管理

为了支持同时捕捉多个标签页的音频，Chrome Audio Capture 将每个正在捕捉的标签页的 tabId 存储在 sessionStorage 对象中。当用户发出停止捕捉的命令时，扩展程序会检查当前标签页是否与开始捕捉的标签页相同，并仅停止当前标签页的特定捕捉实例。

const stopCapture = function() {
  let endTabId;
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    endTabId = tabs[0].id;
    if(mediaRecorder && startTabId === endTabId){
      mediaRecorder.stop();
      mediaRecorder.exportWAV((blob)=> {
        const audioURL = window.URL.createObjectURL(blob);
        const now = new Date(Date.now());
        const currentDate = now.toDateString();
        chrome.downloads.download({url: audioURL, filename: `${currentDate.replace(/\s/g, "-")} Capture`})
      })

捕捉过程中的音频播放

默认情况下，使用 tabCapture API 会静音当前标签页的音频以进行捕捉。为了允许在捕捉过程中继续播放音频，Chrome Audio Capture 创建了一个 Audio 对象，其源链接到正在捕捉的音频流。用户可以在选项菜单中选择是否在捕捉过程中静音标签页。

chrome.storage.sync.get({
  muteTab: false
}, (options) => {
  if(!options.muteTab) {
    let audio = new Audio();
    audio.srcObject = liveStream;
    audio.play();
  }
});