HTML DOM revokeObjectURL() 方法(1)

📌 相关文章

📜 HTML DOM revokeObjectURL() 方法(1)

📅 最后修改于: 2023-12-03 15:15:33.697000 🧑 作者: Mango

HTML DOM revokeObjectURL() 方法

HTML DOM 中的 revokeObjectURL() 方法用于在使用完 URL.createObjectURL() 方法创建的 URL 对象后释放该 URL 对象占用的内存空间。

语法

URL.revokeObjectURL(objectURL)

参数说明

objectURL
必需。表示要撤销的 URL 对象的 URL。当编写 JavaScript 代码要释放掉由 URL.createObjectURL() 方法创建的 URL 对象时，需要调用 URL.revokeObjectURL() 方法。

示例

<body>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
  <button onclick="stopAudio()">停止播放</button>
  <script>
    var audioObj = document.getElementsByTagName('audio')[0];
    var sourceObj = audioObj.getElementsByTagName('source')[0];
    sourceObj.src = URL.createObjectURL(new Blob(["Hello world!"], {type: 'audio/mpeg'}));
    audioObj.load();
    audioObj.play();
  
    function stopAudio() {
      audioObj.pause();
      audioObj.currentTime = 0;
      URL.revokeObjectURL(sourceObj.src);
    }
  </script>
</body>

程序说明

以上示例展示了如何使用 URL.createObjectURL() 方法来创建一个 Blob URL，该 Blob URL 用于播放一个音频文件。当单击停止播放按钮时，调用 stopAudio() 函数，此函数会先停止播放音频文件，随后再通过调用 URL.revokeObjectURL(sourceObj.src) 方法来释放该 Blob URL 对象占用的内存空间。

运行结果

注意事项

使用 URL.createObjectURL() 方法创建的 URL 对象，一旦释放，就无法访问了。如果程序员尝试使用该 URL 对象，就会得到一个错误。因此，在使用 URL.createObjectURL() 方法创建 URL 对象时，需要根据实际需求，考虑清楚如何及时地释放该 URL 对象以释放内存。