如何使用 jQuery 获取远程 mp3 的文件大小？

Question

我正在寻找一种方法来阅读远程托管的 MP3。我发现了一些东西（How to get file size from url using jquery），无需下载即可阅读：

var req;
req = $.ajax({
type: "HEAD",
url: $("#url").val(),
success: function () {
  alert("Size is " + request.getResponseHeader("Content-Length"));
}
});

但是我很难让它与我的代码一起工作。我要做的是，当您单击按钮时，它会获取远程 MP3 的文件大小并将数据保存到div。

这是我目前得到的：

$(function() {
  $('#btn').click(function() {
    var audio = $("#audio-1")[0];
    var request;
    $("#duration").html(audio.duration);
    
    request = $.ajax({
      type: "HEAD",
      url: $("#audio-1").val(),
      success: function() {
        $("#size").html(request.getResponseHeader("Content-Length"));
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Duration: <div id="duration"></div>
Size: <div id="size"></div>

<button id="btn">Click</button>
<audio id="audio-1" src="https://media.acast.com/dth/weekinreviewfortheweekof6-21-21-dth/media.mp3" preload="metadata"></audio>

Answer 1

问题是因为您试图访问audio 元素的val()，但它们没有值。要解决此问题，请改为获取 src 属性：

$(function() {
  var $audio = $("#audio-1");

  $('#btn').click(function() {
    $("#duration").html($audio.prop('duration'));

    $.ajax({
      type: "HEAD",
      url: $audio.prop('src'),
      success: function(data, status, request) {
        $("#size").html(request.getResponseHeader("Content-Length"));
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Duration:
<div id="duration"></div>
Size:
<div id="size"></div>

<button id="btn">Click</button>
<audio id="audio-1" src="https://media.acast.com/dth/weekinreviewfortheweekof6-21-21-dth/media.mp3" preload="metadata"></audio>

请注意，您可以从success 处理函数的第三个参数访问request 对象。代码在逻辑上是相同的，只是稍微简洁一些，因为您无需在更高的范围内声明变量。