如何从 <audio> 播放器获取 audio.duration 并通过点击将其保存到 div？

Question

我一直在寻找一种方法来获取远程托管的 MP3 文件的持续时间，我从另一个问题 (How can I get the html5 audio's duration time) 中找到了答案，现在我想看看我是否能做到工作。

这部分我挂了：

  $(document).ready(function() {
     var audio = $("#audio-1")[0];
     $("#audio-1").on("loadedmetadata", function() {
        alert(audio.duration);
     }); 
  });

该代码的作用是获取 MP3 文件的持续时间并将其显示在控制台中。当您单击一个按钮并将该数据保存到“”中时，我正在尝试获取 MP3 文件的持续时间。

到目前为止，这是我的代码：

$(document).ready(function() {
   var audio = $("#audio-1")[0];
  $("#click").on("click", function() {
   $("#audio-1").on("loadedmetadata", function() {
   $(".duration").data{(audio.duration)};
   }); 
  });
});

.duration {height:20px;border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio-1" src="https://media.acast.com/dth/weekinreviewfortheweekof6-21-21-dth/media.mp3" preload="metadata"></audio>

Duration:
<div class="duration"></div>

<button id="click">Click</button>

Answer 1

使用 .innerText 而不是 .data。

此外，由于 .data 行中的大括号，您的代码会引发错误：

$(".duration").data{(audio.duration)};

如果您要使用 .data 调用，它应该有正则大括号：.data("duration", audio.duration)

$(document).ready(function() {
  var audio = $("#audio-1")[0];
  $("#click").on("click", function() {
    $("#audio-1").on("loadedmetadata", function() {
      $(".duration").innerText(audio.duration);
    }); 
  });
});

.duration {height:20px;border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio-1" src="https://media.acast.com/dth/weekinreviewfortheweekof6-21-21-dth/media.mp3" preload="metadata"></audio>

Duration:
<div class="duration"></div>

<button id="click">Click</button>

Answer 2

$(function(){
    $('#btn').click(function() {
       var audio = $("#audio-1")[0];
      
            $("#duration").html(audio.duration);
    });
});

<html>
  <head>
    <title>First Pen</title>
  </head>
  <body>
    <div>
      <div id="duration"></div>

<button id="btn">Click</button>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio-1" src="https://media.acast.com/dth/weekinreviewfortheweekof6-21-21-dth/media.mp3" preload="metadata"></audio>
    </div>
  </body>
</html>

我这样做了并且成功了。

如何从 <audio> 播放器获取 audio.duration 并通过点击将其保存到 div？

How to get audio.duration from a <audio> player and save it to a div on a click?

html

javascript

jquery

mp3

html5-audio