2

我正在使用自定义<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）。我看不出这些更改如何影响浏览器无法使用插件。由于涉及的代码文件很多，因此我没有将它们全部发布在这里，而是创建了一个保管箱文件夹供您自己在这里查看，您可以在不同的浏览器中尝试 index.html 文件，这样您就可以看到我在说什么问题： https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0

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

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

4

2 回答 2

3

我将链接更改为 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中运行良好

更新：
firefox 和 opera 似乎都不支持 mp3 in <audio/>.
在这种情况下， 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

于 2013-03-09T17:22:25.410 回答
0

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

audio/x-mpeg-3

或者

audio/mpeg3

或者

audio/mpeg

尝试其中之一

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

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

尝试并回复是否有效:)

于 2013-03-12T04:26:52.273 回答