在 chrome 中启用 html5 音频播放器的下载按钮

Question

我在 dom 中使用 javascript 动态添加的页面上有一个音频元素。

输出的html是这样的：

        <audio preload="auto" controls="controls">
            <source src="https://urlofmp3.mp3" type="audio/mp3">
        </audio>

当我在页面上查看这个音频元素时，它看起来像这样：

据我了解，Chrome 应该会自动在右侧放置一个下载按钮……但无论出于何种原因，它都不在那里。 我已经能够找到很多网站告诉我如何关闭下载按钮，但是有没有办法明确地打开它？

Answer 1

 const audio = `<audio preload="auto" controls="controls"> <source src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mp3"> </audio>`; document.getElementById('song').insertAdjacentHTML('beforeend', audio);

 <div id="song"></div>

如果你把一个真正的 MP3 文件作为 src 显示下载按钮，甚至使用 Javascript 动态添加audio元素。 我想它会检查并预加载文件，当成功填充控件时......

Answer 2

我有同样的问题。 我终于找到了解决方案。

起初我只是试图让它下载.ogg .wav或.mp3文件，这使它在我的浏览器的另一个选项卡中打开，但没有让我下载它。 现在我试着将.ogg文件放入一个 zip 文件夹中，并尝试让它下载文件夹，这是我的 froblem 的解决方案。

我为此使用的代码：

<button>
    <a href="HooniganProds\songs.zip" download>Click to Download!</a>
    </button>