.htaccess rules make sm2 fail to load mp3s of my website on Android and iPad

Question

I use .htaccess in my application's assets/audio directory to prevent direct download of mp3's files played with soundmanager2. The following is the code of .htaccess which is placed in assets/audio directory:

RewriteEngine on 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?quran\.2index\.net [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?quran\.2index\.net.*$ [NC] 
RewriteRule \.(gif|jpg|mp3)$ - [R=401]
ErrorDocument 401 /e401.html
AddType audio/mpeg mp3

With desktop (Windows 7), any web browser is able to play sounds with soundmanager2. A live demo is found on the following URL: http://quran.2index.net/viewAyah/1

The problem is with Android web browser, opera on Android and Safari of iPad (those just I have tested with). Those browsers do not able to load the mp3 audio file and download file is popped up!

The most weird thing for me, when I comment out all lines of the .htaccess regarded above (except the first and last lines), the SM2 becomes work fine on Android and iPad!

I wonder, what's the relation between server-side .htaccess and client-side web client? Or what's the issue in the .htaccess that make SM2 works fine with any browser on Windows7 desktop while it does not works on Android web browser and iPad?! Are there any suggestions?

Answer 1

Soundmanager2 falls back from Flash to html5 for iphone, ipad (and Android I assume) and this html5 element does not provide the http_referer tag when it attempts to retrieve the media file it needs to play. The .htaccess file therefore rejects its request by throwing a forbidden response.

I've been able to find someone else on Stackoverflow with this issue (albeit video within html5). The solution is to add a user_agent test to the .htaccess file. I've tested that thread's solution and it solves for my Soundmanager2 issue too.

.htaccess HTTP_USER_AGENT not working

Although it's not a fail safe solution (as I'm told header info can be over-written by anyone wishing to bypass this user_agent check) it's a work-around that gets the player working...

[solution copied from the link above would produce the following for this particular question]

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !(Android|iPod|iPhone|iPad) [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?quran\.2index\.net [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?quran\.2index\.net.*$ [NC] 
RewriteRule \.(gif|jpg|mp3)$ - [R=401]
ErrorDocument 401 /e401.html
AddType audio/mpeg mp3`