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

Question

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

输出的html是这样的：

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

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

据我所知，Chrome应该会自动在右侧放置一个下载按钮......但无论出于何种原因，它都不存在。我已经找到许多网站告诉我如何关闭下载按钮，但有没有办法明确地打开它？

Answer 1

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $linksCount = Link::getReceivedLinksCount();
        View::share('linksCount', $linksCount);
    }

    ...

}

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);

如果你把一个真正的MP3文件作为src显示下载按钮，甚至用Javascript添加<div id="song"></div>元素。我想它会检查并预加载文件，当成功填充控件时......

Answer 2

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

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

我为此使用的代码：

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