Question

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

感谢。

Answer 1

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

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()或从错误事件中调用它。

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

Firefox中的HTML5音频播放器不起作用

1 个答案:

[编辑]