jQuery< audio>插件在Firefox和Opera中不起作用 [英] jQuery <audio> Plugin Doesn't work in Firefox and Opera

问题描述

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

I was working with a plugin for custom <audio> player and everything was fine. I was working in Safari browser on Mac OSX 10.8.2 , Once I decided to test project in other browsers things got very strange. In a nutshell, plugin is supposed to find <audio> tags in a page and than change them to a different custom markup. Works fine in safari, but doesn't seem to work in firefox and opera

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

Firefox and Opera have following issue, there is a part in a plugin which, in case if audio source is unsupported format, creates different (mini) player which is basically a fallback for older browsers, however I don't see how firefox and opera show this fallback player, as both are very modern browsers.

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

Plugin originally comes from: http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/ however I have made several changes e.g.

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

These modifications were made to specify that file in src is an mp3, instead of automatically detecting it (as I am not using local files, but instead soundcloud api generated url's). I can't see how such changes could have affected browsers to not work with a plugin. As there are many code files involved, Instead of posting them all here, I created a dropbox folder for you to see them all yourself here, you can try index.html file in different browsers so you can see what issues I am talking about: https://www.dropbox.com/sh/xutioz3hyrybvz3/f0-528WzH0

编辑：我还在jsbin上创建了一个现场演示 http://jsbin.com/unupov/1/edit ，以便了解玩家的行为方式不同的浏览器

I also created a live demo on jsbin http://jsbin.com/unupov/1/edit so you can see how player behaves in different browsers

编辑2：忽略chrome的问题，感谢 user20140268 那些已被修复。

EDIT 2: Ignore issues with chrome, thanks to user20140268 those have been fixed.

推荐答案

我更改了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

更新：

It似乎firefox和opera 不支持mp3 < $ c>< audio /> 。

在这种情况下，player.js后备< audio /> 标记为< embed /> 。

没有API来控制< embed /> <的播放/ code>相反，你可以使用flash或者使用< embed /> 在第70行显示更改的player.js

Update:
It seems that both firefox and opera don't support mp3 in <audio/>.
In this case player.js fallbacks <audio/> tag to <embed/>.
There is no API to control playback for <embed/> instead you can use flash or make <embed/> visible changing player.js at 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）; at 第171行

这篇关于jQuery&lt; audio&gt;插件在Firefox和Opera中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！