使用 javascript 函数从 html 下载音频文件

Question

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

第一次下载东西，一头雾水

这是一些代码：

JS函数：

 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

You can try this. Here you have to provide audio file source instead of image source. I did not try this code, But i assure you to it should work!

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

Answer 2

由于您的 <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> 标记移到了循环之外，以便它包含其中的所有行。）

使用 javascript 函数从 html 下载音频文件

Download audio file from html with javascript function

html

javascript

php

audio

download