在 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>