教你轻松一招，快取网页音频，不下载也能保存，收藏起来随时随地听

在享受网络音乐的便利时，你是否也曾想要保存一些网页上的音频，但又不想下载整个文件呢？今天就来教大家一招，轻松获取网页上的音频，无需下载即可保存，随时播放。

网页音频获取的背景

随着网络音乐资源的丰富，很多人喜欢在网页上收听各种类型的音频。然而，有时候我们想要收藏一些特定的音频片段，但又不想占用太多存储空间，这时候就需要一种简便的方式来保存网页上的音频。

操作步骤

以下以Chrome浏览器为例，介绍如何在不下载的情况下获取网页音频：

1. 开启开发者模式：

   • 打开Chrome浏览器，输入chrome://flags/，进入设置页面。
   • 在搜索框中输入MediaRecorder，找到相关选项。
   • 将该选项设置为“启用”（Enable），然后重启浏览器。

2. 使用开发者工具：

   • 在网页上打开想要获取音频的页面。
   • 右键点击网页，选择“检查”（Inspect）或者按下F12键，打开开发者工具。
   • 切换到“控制台”（Console）标签页。

3. 获取音频URL：

   • 在控制台输入以下JavaScript代码：

     
     const audioContext = new (window.AudioContext || window.webkitAudioContext)();
     const audioElement = document.createElement('audio');
     const audioURL = "audioElement.src"; // 替换为音频元素的src属性
     audioElement.src = audioURL;
     const mediaStream = audioElement.srcObject = audioContext.createMediaElementSource(audioElement).connect(audioContext.destination);
     const options = { audioBitsPerSecond: 128000 };
     navigator.mediaDevices.getUserMedia({ audio: true })
     .then(stream => {
      const mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start(1000); // 1000ms
      const chunks = [];
      mediaRecorder.addEventListener('dataavailable', event => {
        chunks.push(event.data);
      });
      mediaRecorder.addEventListener('stop', () => {
        const blob = new Blob(chunks);
        URL.createObjectURL(blob);
        // 此处可以使用saveAs等库保存文件
      });
      setTimeout(() => {
        mediaRecorder.stop();
      }, 1000);
     });
     

   • 将上述代码中的audioElement.src替换为你需要保存音频的元素的src属性。

4. 保存音频：

   • 运行上述代码后，控制台会显示一个可以点击的链接，这是保存音频的临时链接。
   • 点击链接，然后选择保存到本地即可。

注意事项

• 使用此方法保存音频时，需要注意版权问题。仅限于个人学习和收藏使用，切勿用于商业用途。
• 部分网站可能对JavaScript有安全限制，此时可能无法正常保存音频。

通过以上步骤，你就可以轻松地获取并保存网页上的音频，随时享受美妙的音乐。