如何获取JavaScript加载的音频文件链接？（制作Anki语言学习卡组）

核心逻辑 #

页面加载时音频链接已经存在于DOM结构中，只是没通过可见元素直接展示，所以用Puppeteer执行页面内的JavaScript，就能提取到这个隐藏的链接。

具体操作步骤 #

• 启动Puppeteer浏览器实例，打开目标页面
• 等待页面资源加载完成，确保音频相关的DOM节点已生成
• 执行页面内JS代码，定位存储音频链接的DOM元素，提取链接
• 拿到链接后直接下载音频，用于制作Anki卡组

代码示例 #

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 访问目标页面，等待网络请求基本完成
  await page.goto('https://islenskordabok.arnastofnun.is/ord/45876', { waitUntil: 'networkidle2' });

  // 执行页面内JS，提取音频链接
  const audioUrl = await page.evaluate(() => {
    // 根据开发者工具观察到的实际节点调整选择器
    // 示例1：如果链接在audio标签的src属性里
    const audioTag = document.querySelector('audio');
    if (audioTag) return audioTag.src;

    // 示例2：如果链接在按钮的自定义数据属性里（比如data-url）
    const playButton = document.querySelector('button[aria-label="Framburður"]');
    if (playButton) return playButton.dataset.url;

    return null;
  });

  if (audioUrl) {
    console.log('提取到的音频链接:', audioUrl);
    // 这里可以添加下载逻辑，比如用fetch下载文件到本地
  } else {
    console.log('未找到音频链接，请检查DOM选择器是否正确');
  }

  await browser.close();
})();

关键注意点 #

• 调整DOM选择器：打开浏览器开发者工具，找到存储音频链接的具体节点（比如隐藏的audio标签、按钮的data属性），替换代码里的querySelector参数。
• 等待策略：用networkidle2等待页面加载稳定，避免节点未生成就执行提取操作。
• 下载逻辑：拿到链接后，用Node.js的fetch或axios工具直接下载OGG文件，之后就能导入Anki使用。

内容的提问来源于stack exchange，提问作者rypervenche