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

Solution 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.

Solution 2

At least in Wordpress text editor, you have to follow the below steps:

1. Create a share link to the file then change the www in the link to dl. Use that new link in your embed code.
2. Remove the end of the link

e.g. if you have:

https://www.dropbox.com/s/bt44iw272m6ga04/O%20Botic%C3%A1rio%20-%20Dia%20dos%20Pais%20novo%20perfume%20Zaad%20-%20Comercial.mp3 ?dl=0

You have to change the first bold part and remove the second:

https://dl.dropbox.com/s/bt44iw272m6ga04/O%20Botic%C3%A1rio%20-%20Dia%20dos%20Pais%20novo%20perfume%20Zaad%20-%20Comercial.mp3

Solution 3

This worked for me.

1. Go the audio file in your dropbox on your desktop
2. Right click and select "copy Dropbox link"
3. Paste link in desired location
4. At the end of the URL there should be a "?dl=0" Simply replace the "0" with a "1" like so "?dl=1"

Code should look something like:

<audio controls>
  <source src="https://www.dropbox.com/s/blah/yoursong.mp3?dl=1" type="audio/mpeg">
</audio>