如何從<audio>播放器並單擊將其保存到 div？

Question

我一直在尋找一種方法來獲取遠程托管的 MP3 文件的持續時間，我從另一個問題中找到了答案（如何獲取 html5 音頻的持續時間），現在我正在嘗試查看是否可以正常工作.

我掛斷了這部分：

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

該代碼的作用是獲取 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

 $(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>

我這樣做了，它奏效了。

Answer 2

使用.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>

如何從<audio>播放器並單擊將其保存到 div？

問題描述

2 個解決方案

解決方案1
2 已采納 2021-06-28 01:25:28

解決方案2
0 2021-06-28 01:09:49

如何從<audio>播放器並單擊將其保存到 div？

問題描述

2 個解決方案

解決方案1 2 已采納 2021-06-28 01:25:28

解決方案2 0 2021-06-28 01:09:49

解決方案1
2 已采納 2021-06-28 01:25:28

解決方案2
0 2021-06-28 01:09:49