Specify that src=“” in is a mp3 file without .mp3 extension?

问题

I need a way to specify that something like

<audio src="http://somesite.com/track/377374"></audio>

Has a mp3 file as a source. I am unable to use .mp3 extension at the end of the url, so I need other way to achieve this. I'm using custom player jQuery plugin which falls back to old browser version if it can't determine what file format is specified in audio tag. I's there a way to achieve this?

回答1:

There is a function that check the file extension and tries to match

    canPlayType   = function( file )
    {
        var audioElement = document.createElement( 'audio' );
        return !!( audioElement.canPlayType && 
                   audioElement.canPlayType( 'audio/' + file.split( '.' ).pop().toLowerCase() + ';' ).replace( /no/, '' ) );
    };

if let's say this function was to return true or be changed to something like:

    canPlayType   = function( type )// type = mp3
    {
        var audioElement = document.createElement( 'audio' );
        return !!( audioElement.canPlayType && 
                   audioElement.canPlayType( 'audio/' + type.toLowerCase() + ';' ).replace( /no/, '' ) );
    };

Then the updated code of the plugin line 75 would assume the files are mp3 and do this like when using the src... the source element could still be used the traditional way.

else if( canPlayType( 'mp3' ) ) isSupport = true; // here change this

For the source type to be detected (like suggested by @ruakh the code would need to be edited (again):

if( typeof audioFile === 'undefined' )
{
    $this.find( 'source' ).each( function()
    {
        audioFile = $( this ).attr( 'src' );
        var sourceType = $( this ).attr( 'type' );
        if( typeof audioFile !== 'undefined' && 
                        typeof sourceType !== 'undefined' && 
                        canPlayType( sourceType.split( '/' ).pop().toLowerCase()  ) )
        {
            isSupport = true;
            return false;
        }
    });
}

回答2:

Instead of using src="...", you can nest a <source> element. That will let you indicate the MIME-type.

For your example:

<audio>
  <source src="http://somesite.com/track/377374" type="audio/mpeg3" />
</audio>

(Disclaimer: I haven't tested to see how widely supported this is, or if it actually solves the problem that you're having with your jQuery plugin. I'm just going based on the MDN documentation.)

回答3:

This was my first idea trying to be creative here if you only need to have the .mp3 at the end without breaking the link to the page you could use the query string of the hash tag like

If you can modify the url then <audio src="http://somesite.com/track/377374?i=.mp3"></audio> would bypass the plugin and still allow you to use your url without being specific on the file type.

But of course if you never want to display .mp3 at the end then discard this idea.

来源：https://stackoverflow.com/questions/15254808/specify-that-src-in-audio-is-a-mp3-file-without-mp3-extension

标签

javascript