从 html 下载音频文件 javascript function

Question

我试图通过点击一个按钮来下载一个 mp3 文件，它下载了，但它下载的文件不正确，它比原始文件（25 字节）小得多，而原始文件是 10MB。

这是我第一次下载东西，所以我很无能。

这是一些代码：

JS function：

 function download(i) {
    var audio = document.getElementById("audio"+i);

    const blob = new Blob([audio], {type:"octet-steam"});

    const href = URL.createObjectURL(blob);

    const a = Object.assign(document.createElement("a"), {
        href, 
        style: "display:none",
        download: "myAudio.mp3",
    });
    document.body.appendChild(a);

    a.click();
    URL.revokeObjectURL(href);
    a.remove();
}

音频由它们的 ID 标识，它们的文件名来自我在数据库中的数据。 HTML/PHP

for($i=0; $i<$count; $i++){
  $res = mysqli_fetch_array($result);
  echo('<tbody id="tbody">
  <tr>
  <audio id="audio'.$i.'" src="mp3/'.$res["song_artist"].'-'.$res["song_title"].'.mp3"> 
  <td><button onclick="download('.$i.')">&#8628</button></td>
  </tr>
</tbody>');
}    

Answer 1

由于您的<audio>元素和下载按钮都是由您的 PHP 代码生成的，因此您不需要 JavaScript 来执行此操作。

尝试这样的事情：

<tbody id="tbody">
<?php

for($i=0; $i<$count; $i++){
  $res = mysqli_fetch_array($result);
  $filePath = "mp3/{$res["song_artist"]}-{$res["song_title"]}.mp3";
?>
  <tr>
  <td><audio src="<?=$filePath?>"></td>
  <td><a href="<?=$filePath?>" download>&#8628</button></td>
  </tr>
<?php
}
?>
</tbody>

（我还将您的<tbody>标记移到了循环之外，以便它包含其中的所有行。）

Answer 2

你可以试试这个。 在这里你必须提供音频文件源而不是图像源。 我没有尝试这段代码，但我向你保证它应该有效！

https://www.codegrepper.com/code-examples/javascript/javascript+download+image+from+url