Firefox 中的 HTML5 音频播放器无法正常工作

Firefox 53.0.2(64 位)中的 HTML5 音频播放器无法播放音频文件 比特率 23 kbps，但它在 chrome 中运行良好。

在此下载文件:https://www.sendspace.com/file/qf23ca

音频文件详细信息:

codec: MPEG-1 Layer 3 (MP3) 
channels : mono 
container: wav 
Bitrate: 23 kbps 
sample rate: 22050 Hz 

谢谢。

请您参考如下方法:

这是一个非常奇怪的错误:

Firefox 能够读取这个文件，但前提是文档直接指向它...

你绝对应该向 BugZilla 报告此事.

要解决此问题，您可以使用 <embed> , <iframe>或 <object>直接指向这个文件:

document.querySelector('button').onclick = e =>  
document.querySelectorAll('object,iframe,embed,audio') 
.forEach(e=>{ 
e.src = e.data = "https://dl.dropboxusercontent.com/s/v4laq04yl1gmcef/592d0d0d65fb320c776ac305.mp3?dl=0"; 
if(e.play)e.play() 
});

object,iframe,embed,audio{ 
  display: block; 
  height: 50px; 
  border: 1px solid; 
  }

<button>Set srcs</button><br> 
 
<p>Audio fails<audio controls></audio> </p> 
<p>embeddeds work 
<object data=""></object> 
<iframe src=""></iframe> 
<embed src=""> 
</p>

[编辑]

这是一个丑陋的解决方法实现，可以让 <audio>主文档中的元素，仍在播放。

注意:此 hack 仅适用于同源数据或跨源可访问数据。

// we've got a problem, probably FF 
function uglyFFworkaround() { 
  const frame = document.createElement('iframe'); // create an iframe 
 
  frame.onload = e => { 
    const doc = frame.contentDocument; 
    // grab the mediaElement (usually an <video>) 
    const inner_aud = doc.querySelectorAll('audio,video')[0]; 
    var new_aud = doc.createElement('audio'); // create an new audio from our frame's document 
    new_aud.src = inner_aud.currentSrc; // set its src to the one of the default video 
    inner_aud.pause(); // pause the video 
    new_aud.controls = true; 
    frame.replaceWith(new_aud); // replace the frame with the audio element 
    aud = new_aud; // update our variable to point to this new audio 
    aud.play(); // start playing 
  }; 
 
  // in case our document is not on the same origin as the media 
  fetch(aud.src) // fetch the resource 
    .then(r => r.blob()) // as a blob 
    .then(b => { // so that we can access the frame's document 
      // ( if it were on the same origin, we could avoid this fetch altogether ) 
      frame.src = URL.createObjectURL(b); 
      aud.replaceWith(frame); 
    }); 
} 

您可以从 play().catch() 调用它, 或者来自 onerror 事件。

Live Fiddle 因为 stacksnippet 不允许访问嵌套的 iframe 文档: