Downloading Media

[ltalreja-gryphon]

Is there a way you can trigger audio file download?

[lhz516]

You can add a custom button on the player to make it trigger download

See advanced custom layout https://static.hanzluo.com/react-h5-audio-player-storybook/index.html?path=/docs/layouts-advanced--stacked

[ltalreja-gryphon]

I tried doing that, however, it opens the audio file in a new tab with the default media player of the browser because the hosts where the front-end is served and the audio file is located are different. With the default media player of the browser, this wasn't the case, you could directly download the file.

[lhz516]

You may use <a href="/path/song.mp3" download>Download</a>. However, this only works for relative path. If it's absolute path which includes http prefix, it will still open a new window with default audio player,

When you go to https://filesamples.com/formats/mp3 and inspect the download element. you got

<a href="/samples/audio/mp3/Symphony No.6 (1st movement).mp3" download="" class="btn btn-primary pull-right"><i class="fas fa-download"></i> Download</a>

The download works as expected. In your own website, if you use https://filesamples.com/samples/audio/mp3/Symphony No.6 (1st movement).mp3 as href. It still opens default player when you click it.

[ltalreja-gryphon]

So, do you suggest downloading and saving the audio file on the backend server and adding this path to the anchor component?

[lhz516]

I would upload the file to cloud storage and use a proxy to make it a relative path.