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和opera don't support mp3 在这种情况下，player.js后备<audio/>标记为<embed/> 没有用于控制<embed/>播放的API，而是可以使用flash或<embed/> 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>' ),可见更改播放器.js

thePlayer.addClass( cssClass.mini );

并在line 171

删除{{1}}

Answer 2

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

audio/x-mpeg-3

或

audio/mpeg3

或

audio/mpeg

在

中尝试其中一项

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

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

尝试回复是否有效：）

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

2 个答案: