Stream Audio Files from DropBox onto Website

Question

I asked a question the other day about streaming audio ("Stream audio files from my home computer to my website") and I got very good responses from everyone.

I was convinced to use a cloud storage system like DropBox instead of using my home computer as a server, and it turns out that it works, but not the way I would like it to... let me explain.

As I have stated in my previous post, I am using php to echo out an audio file onto my HTML by pulling data from an SQL database. The echo places that data into an HTML audio tag that has a URL to my DropBox account (which is shared publicly) so it all connects. My code looks like this:

<audio controls>
    <source src="https://dl.dropboxusercontent.com/u/123456789/<?php echo $file; ?>.mp3" type="audio/mpeg">
</audio controls>

The variable $file is the name of the audio file from my database; so if my database said "track01", then my code would look like this:

<audio controls>
    <source src="https://dl.dropboxusercontent.com/u/123456789/track01.mp3" type="audio/mpeg">
</audio controls>

This works... but not efficiently. When I tested this out in chrome, it worked the first time. Then I refreshed the page, and the file would not even load. I tested it again, and it took me three times refreshing before it would finally appear in the audio tag. So in chrome it works, but I have to keep refreshing, which I cannot afford.

I also tested this in Internet Explorer and it, to my amazement, works perfectly fine. Every time I refreshed my page my audio files linked and I did not need to wait before the audio loads; there were no errors on IE.

Finally I tested my site in Safari, Opera, and Firefox, and the files showed up in the HTML but it either took too long to load or it didn't load at all.

My question is: Is this a problem when I am linking from DropBox? Is this an issue dealing with different browsers? Can I fix this? Has anyone else dealt with a similar issue? Can I use an alternative cloud storage site that allows me to stream using my method that is free and allows me to load over 2 gigabytes of audio files? Can I still use some sort of method of streaming my files through my own server somehow? I cannot emphasis enough that my method listed above is working but it is just having issues with the initial loading of the file.

If you guys could give me some sort of solution I will be so very grateful. Thank you all so much.

Answer 1

This should work. 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...

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