jQuery <audio> 插件在 Firefox 和 Opera 中不起作用

Question

我正在使用自定义<audio> 播放器的插件，一切都很好。我在 Mac OSX 10.8.2 上的 Safari 浏览器中工作，一旦我决定在其他浏览器中测试项目，事情就变得很奇怪。简而言之，插件应该在页面中找到<audio> 标签，然后将它们更改为不同的自定义标记。在 safari 中运行良好，但在 firefox 和 opera 中似乎无法运行

Firefox 和 Opera 存在以下问题，插件中有一部分，如果音频源的格式不受支持，则会创建不同的（迷你）播放器，这基本上是旧浏览器的后备，但我不知道如何firefox 和 opera 展示了这个后备播放器，因为它们都是非常现代的浏览器。

插件最初来自：http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/ 但是我做了一些更改，例如

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

原来是

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

还有一个小改动

else if( canPlayType( 'mp3' ) ) isSupport = true;

原件在哪里

else if( canPlayType( audioFile ) ) isSupport = true;

这些修改是为了指定 src 中的文件是 mp3，而不是自动检测它（因为我没有使用本地文件，而是 soundcloud api 生成的 url）。我看不出这些更改如何影响浏览器无法使用插件。由于涉及的代码文件很多，我没有将它们全部发布在这里，而是创建了一个 dropbox 文件夹供您自己在这里查看，您可以在不同的浏览器中尝试 index.html 文件，这样您就可以看到我的问题谈论： https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0

---

编辑：我还在 jsbin http://jsbin.com/unupov/1/edit 上创建了一个现场演示，这样你就可以看到播放器在不同浏览器中的行为

编辑 2： 忽略 chrome 的问题，感谢 user20140268 这些问题已得到修复。

Answer 1

我将链接更改为 CSS：

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/player.css">

以及脚本：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/player.js"></script>

现在它在chrome 中运行良好

更新：
看来<audio/>中的firefox和operadon't support mp3。
在这种情况下，player.js 将 <audio/> 标记回退到 <embed/>。
没有 API 来控制 <embed/> 的播放，您可以使用 flash 或使 <embed/> 可见更改 player.js 在 line 70

var thePlayer = !isSupport 
            ? $('<embed src="' + audioFile + '" width="100%" height="25" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />')
            : $( '<div class="' + params.classPrefix + '">' + $( '<div>' ).append( $this.eq( 0 ).clone() ).html() + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>' ),

并删除thePlayer.addClass( cssClass.mini );line 171

Answer 2

文件类型mp3 可能有不同的元类型，您可以正确定义以使其工作

audio/x-mpeg-3

或

audio/mpeg3

或

audio/mpeg

在

中尝试其中一种

audioElement.canPlayType('audio/' + type.toLowerCase() + ';' )

我认为这可能可行，因为 Firefox 和 opera 使用严格的 JS 和数据类型，而且它们不支持某些格式！

尝试并回复是否有效:)