如何将缓存破坏器 URL 添加到我的音频？

Question

我需要在我的 HTML5 音频播放器中向流式传输 URL 添加缓存破坏器扩展。 URL 应从：“192.168.2.50:8000/zr.mp3”更改为：“192.168.2.50:8000/zr.mp3?cb(random number)”，以便浏览器将流视为新流并且不会从缓存中播放。

HTML5 播放器本身由我的 CMS 在登录时呈现，并使用简单的 HTML5 音频标签。我在这里找到了一些脚本，但我不知道如何将它们添加到我的音频播放器的正确 "grammer"。

如果那行不通，有没有办法让 .htaccess 重写 URL？

这是包含 Drupal 网站和音频播放器的 iFrame：

<html>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta name=viewport content="width=device-width, initial-scale=1">
  <style type="text/css">
        html, body {
                background: #333333;
                height: 100%;
                margin: 0px;
                padding: 0px;
                border: 0px;
                }
iframe {
                width: 100%;
                height: 92%;
                margin: 0px;
                padding: 0px;
                border: none;
                display: block;
        }
  </style>
<body>

<?php
print('<iframe id="drupal_site" src="http://test.zoootradio.com" height="92%" width="100%" frameborder="0"></iframe>');

header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1.
header("Pragma: no-cache"); // HTTP 1.0.
header("Expires: 0"); // Proxies.

print('<audio id="player" controls>');
print('<source src="http://192.168.2.50:8000/zr.mp3" type="audio/mpeg">');
print('</audio>');
?>

</body>
</html>

如您所见，我尝试在 iFrame 的 header 和 iFrame 的播放器部分中不添加缓存指令，但它们并不总是适用于所有浏览器。

这是我发现的两个脚本，它们将向流式传输添加缓存清除扩展 URL。

1.

function callback() {
  var url = "http://192.168.2.50:8000/zr.mp3?cb=" + new Date().getTime();
  var audio = new Audio(url);
  audio.load();
  audio.play();        
}

2.

var audioPlayer =  $('<audio src="/' + mp3FileName + '?cb=' + Math.floor(Math.random() * 1000000) + '" type="audio/mpeg" controls></audio>');

有没有办法让它工作？

干杯，保罗

Answer 1

您使用 PHP 所以让服务器端为您做这件事

print('<source src="http://192.168.2.50:8000/zr.mp3" type="audio/mpeg">');

应该变成

print('<source src="http://192.168.2.50:8000/zr.mp3?'.base64_encode(time().microtime()).'" type="audio/mpeg">');

所以这样做是使用 time() and microtime() concatenated and then base64_encode() 生成的字符串，这是因为 base64 是 URL 安全的，并且删除了任何 none URL 安全字符而不将 URL 编码成 URL GET 查询字符串。

虽然这不是唯一的方法，但这是我绕过浏览器缓存的简单方法

如何将缓存破坏器 URL 添加到我的音频？

How can I add a cache buster URL to my audio?

browser-cache

html5-audio