jQuery <audio>插件不適用於Firefox和Opera

我正在使用自定義<audio>播放器的插件，一切都很好。我在Mac OSX 10.8.2的Safari瀏覽器上工作，一旦我決定在其他瀏覽器中測試項目，事情就變得非常奇怪了。簡而言之，插件應該在頁面中找到<audio>標籤，並將它們更改爲不同的自定義標記。在Safari瀏覽器中工作正常，但似乎並沒有在Firefox和歌劇工作jQuery <audio>插件不適用於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這些問題已得到解決。

來源

2013-03-07 Ilja

我改變了鏈接到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

更新：
似乎都火狐和歌劇don't support mp3在<audio/>。
在這種情況下，player.js回退<audio/>標記爲<embed/>。
沒有API來控制播放爲<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>'),

使<embed/>可見改變player.js和line 171

來源

2013-03-09 17:22:25 user20140268

鉻確實固定的問題，但是Firefox和Opera仍然出現異常行爲; /我將修改我的問題來擺脫鉻問題 – Ilja 2013-03-09 18:34:04

你好，謝謝爲你的幫助，沒想到，Firefox將不支持MP3文件，我會給你一個堆棧溢出讓我這樣的賞金;）） – Ilja 2013-03-09 23:43:33

不客氣:) – user20140268 2013-03-10 08:42:22

文件類型mp3刪除thePlayer.addClass(cssClass.mini);可能有不同的元類型，您可以正確定義以使其工作

audio/x-mpeg-3

或

audio/mpeg3

或

audio/mpeg

嘗試其中之一在

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

我想這可能工作，如Firefox和嚴格的JS和數據類型的行爲戲也，他們不支持一些格式！

嘗試和回覆，如果它的工作與否:)

來源

2013-03-12 04:26:52 MarmiK

嗨，是啊我試了他們的X - MPEG的-3完全不起作用，mpeg3僅適用於safari（出於某種原因，谷歌瀏覽器並不喜歡它），據我所知，firefox和opera不支持mp3格式; / – Ilja 2013-03-12 10:22:54

jQuery <audio>插件不適用於Firefox和Opera

回答

相關問題