I am having very unpleasant problems downloading sound tags. I spent about two weeks working on this, and for each problem that I fix, I create another.
I have a page containing <audio> that uses audio.js to control audio. Sometimes this page is loaded through an iframe, and this is when the problem begins. I need to keep a play counter, so I have different ways of doing this.
Method One:
I have a PHP file that serves as an MP3 for the player, this allows me to count the playback amount and MP3 streams. The player works fine in Firefox and Chrome if I have <audio> on the page, but not in Internet Explorer (there must be a problem with my PHP throwing a gateway error).
If I load a page with <audio> in an iframe or with AJAX, the audio file is loaded up to three times. If the player is set to play automatically, the sound is played twice on top of each other. If I pause the player, the music is still heard until I remove the iframe using the developer tools.
Possible solution: I tried to load this using AJAX to no avail. I can't stop it loading three times, but I can get it to play only once by setting autoplay to true in the AudioJS API. For some reason, Internet Explorer does not like my PHP MP3 file.
Method Two:
I download the MP3 file directly, which also works in all browsers if I embed the player directly in the page. However, when loading from the outside, through iframe or AJAX, the player works fine in Firefox and Internet Explorer, but takes about one minute to load in Google Chrome. Again, it still seems that it downloads the file three times and plays twice (which is noticeable only when setting up auto play), but less often. This method uses javascript to add playback information to the database.
: MP3, :? t = 4892393, Chrome MP3 . Flash Fallback, , , ( Chrome, ).
EDIT: : https://github.com/kolber/audiojs/issues/9 6 audiojs github. .
: Audiojs , . . PHP, Dev Chrome, IE Firefox, Fiddler, .
, audiojs .
, , audiojs , , 2011, , , , , , audiojs.
.
EDIT: , JWPlayer , , .
EDIT 2: : , MP3. Chrome , MP3, Chrome Firefox.
http://jsfiddle.net/joshkrz/52YEc/7/
, . .
, iframe, , .
<audio preload="auto" src="/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3" type="audio/mp3" autoplay> </audio>
3: , , <audio> Firefox Chrome. Chrome , iframe.
EDIT 4: HTTP, , GZIPed MP3.
My.htaccess :
<IfModule filter_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/html'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/css'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/plain'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/x-component'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/javascript'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/javascript'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/json'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/xhtml+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/rss+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/atom+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/vnd.ms-fontobject'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'image/svg+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/x-font-ttf'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'font/opentype'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'image/x-icon'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = '/application/(javascript|json|xml|x-javascript)/'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = '/text/(html|css|javascript|plain|x(ml|-component))/'"
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
RAW-mp3 , :
HTTP HTTP
GET http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 HTTP/1.1
Host: tabbidesign.com
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
DNT: 1
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en
Cookie: _ga=GA1.2.1838870165.1389379988
HTTP/1.1 200 OK
Date: Thu, 20 Feb 2014 12:47:40 GMT
Server: Apache/2.4.6 (Unix)
Last-Modified: Mon, 03 Feb 2014 21:49:07 GMT
ETag: "499ce6-4f1877e331ac0"
Accept-Ranges: bytes
Content-Length: 4824294
Content-Type: audio/mpeg
HTTP HTTP
GET http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 HTTP/1.1
Host: tabbidesign.com
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
Accept: */*
DNT: 1
Referer: http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3
Accept-Language: en
Cookie: _ga=GA1.2.1838870165.1389379988
Range: bytes=0-
,