How can I embed my personal dropbox files onto my website so they are publically visible?

Question

I have mp3 recordings that I wish to embed onto my website. They are located in my dropbox and are just simple audio files. When I embed them with an audio tag like such, I can play them when I have my dropbox logged in, but they appear unplayable when I am a third party visitor to the website.

<audio src="https://dl-web.dropbox.com/get/therestofthelink" controls></audio> 

any ideas how can I make these files permanently embedded, through dropbox or otherwise, so that every visitor to my site can successfully listen to them? thank you

Answer 1

You can create a share link (programmatically via the /shares endpoint or via the UI), which will give you a permanent publicly-visible link to a preview page for the file. To convert that link into one that points directly at the file content, refer to https://www.dropbox.com/help/201:

To bypass the preview page and allow your browser to directly render your files, use raw=1 as a query parameter in your URL. For example:

https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx

Becomes:

https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx?raw=1

Note that this URL will cause an HTTP redirect. If you're an app developer using such a URL in your own code, please make sure your app can follow redirects.