Playing particular formats of m4a

Question

I've been searching for a while on the topic but found nothing at all. I should load on a webpage a certain number of .m4a files, each one inside a separate player. I found and implemented jplayer, which claims to handle the format. I decided to use the flash fallback by default to avoid backward incompatibilities. The sample m4a file supplied in jplayer's examples (http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a) works fine, while I haven't managed to play any of the files I have.

I ran the file unix command on all the files. The jplayer's example file returns:

ISO Media, MPEG v4 system, version 2

The non-working files return one of the following:

ISO Media, MPEG v4 system, 3GPP

ISO Media, MPEG v4 system, version 1

ISO Media, MPEG v4 system, iTunes AAC-LC

I load the audio files with the following PHP controller code. I need to do so in order to "rewrite" URLs and hide the actual URI of the file.

header('Content-Type: audio/mp4');
header('Content-Disposition: inline; filename=xxxxxxxxxxTrack'.$id.'.m4a');
echo file_get_contents(MVC::siteRoot().'/'.$filename);

(MVC::siteRoot() returns the physical directory where the script is stored.) I also tried Content-Type: audio/mp4a-latm again to no avail. I load jplayer with the following code:

$('.jp-jplayer').each(function() {
    $(this).jPlayer({
        ready: function () {
            console.log($(this).attr('data-src'));
            $(this).jPlayer("setMedia", {
                m4a: $(this).attr('data-src')
            });
            $("#insp").jPlayerInspector({jPlayer:$(this)});
        },
        swfPath: "<?=MVC::httpRoot();?>/gui/swf/Jplayer.swf",
        supplied: 'm4a',
        wmode: 'window',
        solution:"flash",
        errorAlerts:true,
        warningAlerts:true,
        cssSelectorAncestor: '#' + 
            $(this).attr('id').replace('jquery_jplayer','jp_container')
    });
});

On the DOM side, for each audio file identified by the progressive number $i, this happens:

<div id="jquery_jplayer_<?=$i?>" class="jp-jplayer" data-src="<?=MVC::httpRoot()?>/get/audio/<?=$traccia['audioid']?>"></div>
<div id="jp_container_<?=$i?>" class="jp-audio">[...]

Players seem to load correctly, the DOM is rearranged according to jplayer, but on the pression of the play button nothing happens. No error is found on the network's behalf, the file are correctly delivered but the content is not played and no warnings or errors are issued. The only way I get to listen to the files, actually, is by downloading them and opening them in QuickTime since not even Chrome will play them. Safari, on the other side, will gladly load and play the files but not inside the website. Sadly I can't directly control the content of the uploaded files since they come from an iOS/Android app and the client requested the .m4a format for some reason. Has anyone ever faced a similar problem?

Answer 1

1. problems with DRMs

2. MIME Type

Your domain's server must give the correct MIME type (content type) for all media URLs.

Failure to give the correct MIME type will stop the media from working on some HTML5 browsers. This is a common cause of problems that only affect Firefox and Opera. Other browsers are less strict, but the MIME type should always be checked that it is correct if you having problems getting media to play on any browser.

Media MIME Types

    MP3: audio/mpeg
    MP4: audio/mp4 video/mp4
    OGG: audio/ogg video/ogg
    WebM: audio/webm video/webm
    WAV: audio/wav

If you use a common extension for both audio and video media, for example audio.mp4 and video.mp4, then simply use the video version of the MIME type for both of them. ie., video/mp4

On Apache servers, you can use the .htaccess file to set the MIME type based on the file extension:

# AddType TYPE/SUBTYPE EXTENSION

AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/webm webma
AddType audio/wav wav

AddType video/mp4 mp4
AddType video/mp4 m4v
AddType video/ogg ogv
AddType video/webm webm
AddType video/webm webmv

3. Byte-Range Requests

Your server must enable Range requests. This is easy to check for by seeing if your server's response includes the Accept-Ranges in its header. Most HTML5 browsers enable seeking to new file positions during a download, so the server must allow the new Range to be requested.

Failure to accept byte Range requests will cause problems on some HTML5 browsers. Often the duration cannot be read from the file as some formats require that the start and end of the file is read to know its duration. Chrome tends to be the browser that has most problems if the Range request is not enabled on the server, but all browsers will have some issue even if it is only that you have to wait for all the media to load before jumping close to the end.

This problem is known to affect Jetty 6 servers with their default configuration.

https://groups.google.com/d/msg/jplayer/nSM2UmnSKKA/bC-l3k0pCPMJ

1. Protecting Your Media

Be careful when trying to restrict access to your media files. The media URL must be accessible over the internet by the user and its response must be in the format expected.

Using the server response to disable the local cache of media can cause problems with some HTML5 browsers. This can cause the duration of the media to be unknown, which will show as a NaN in the duration of jPlayer.

If you do some magic on the backend to make it more secure, them make sure you are accepting the byte Range requests described above.

Yeah I've just copy/pasted the faq, dunno anything about this stuff