2

我需要一种方法来指定类似的东西

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

有一个 mp3 文件作为源。我无法在 url 末尾使用 .mp3 扩展名，所以我需要其他方法来实现这一点。我正在使用自定义播放器 jQuery 插件，如果它无法确定音频标签中指定的文件格式，它会退回到旧的浏览器版本。我有办法做到这一点吗？

4

3 回答 3

3

有一个检查文件扩展名并尝试匹配的功能

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

如果让我们说这个函数是返回 true 或被更改为：

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

然后插件第 75 行的更新代码将假定文件是 mp3 并像使用 src 时那样做......源元素仍然可以以传统方式使用。

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

对于要检测的源类型（如@ruakh 建议的那样，需要（再次）编辑代码：

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;
        }
    });
}
于 2013-03-06T18:32:23.167 回答
3

src="..."您可以嵌套一个<source>元素，而不是使用。这将让您指示 MIME 类型。

对于您的示例：

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

（免责声明：我还没有测试过它的支持范围有多广，或者它是否真的解决了你在使用 jQuery 插件时遇到的问题。我只是基于MDN 文档。）

于 2013-03-06T18:15:47.667 回答
0

这是我尝试在这里发挥创意的第一个想法，如果您只需要在末尾添加 .mp3 而不会破坏页面链接，您可以使用哈希标签的查询字符串，例如

如果您可以修改 url，那么<audio src="http://somesite.com/track/377374?i=.mp3"></audio>将绕过插件并仍然允许您使用您的 url，而无需具体说明文件类型。

但是，当然，如果您不想在最后显示 .mp3，那么请放弃这个想法。

于 2013-03-06T18:15:28.870 回答