Question

我有一些代码可以在Chrome和Firefox的桌面上正常运行，现在我正试图让它在Android上运行Chrome。我在浏览器中创建了一些音频，我想呈现一个音频控件，以便用户可以单击播放。这是控件的最终外观：

<audio controls src="blob:https%3A//mydomain.com/5b7cbd96-b204-4b1c-8de3-9fb212c37928"></audio>

我尝试使用以下方式播放浏览器中的文件：

<audio controls src="/sample.wav"></audio>

这很好用，所以我知道音频控件可以播放WAV文件。

控件看起来也不同。从服务器播放的那个包含时间，即“0:00 / 1:23”。在JavaScript中创建的只包含“0:00”。这让我相信控件实际上没有加载音频，但我不知道为什么。

我在blob上打印了一些调试信息，我看到报告的大小是184,440，报告的类型是“audio / wav”。

我创建我放入音频src的URL的方式是：

// dataView is of type DavaView, and contains the WAV.
var audioBlob = new Blob([dataView], { type: "audio/wav" });
var url = URL.createObjectURL(audioBlob);

我如何进一步调试？或者是否有其他方法可以为Android设置音频控制？

谢谢！

更新

我没有解决这个问题，但我解决了这个问题。我没有使用<audio>控件进行播放，而是直接使用AudioBuffer：

var source = audioCtx.createBufferSource();
var audioBuffer = audioCtx.createBuffer(1, sampleArray.length, audioCtx.sampleRate);
audioBuffer.copyToChannel(sampleArray);
source.buffer = audioBuffer;
source.connect(audioCtx.destination);
source.start();

Answer 1

显然，Android Chrome无法播放来自blob的音频。当我实现Recorder.js在移动浏览器上录制音频时，我遇到了这个错误。在我的研究中，我遇到了向铬项目报告的几个问题。 Issue 1 Issue 2

幸运的是，我正在Recorder.js图书馆工作，因为如果我不是，那么找到这个bug的修复程序需要花费我超过1天的时间。无论如何，在issue git存储库中也有一个Recorder.js。 @kekechin在那个帖子中的答案对我有用。谢谢@dokechin！

只需将blob转换为base64数据，Android Chrome即可播放。你可以这样做，

  var reader = new FileReader();
  reader.onload = function(e) {
      // e.targer.result will hold the base64 data.
      // Note: It includes the pre-text "data:audio/<format>;base64,<base64 data>"
      // Then do
      audio.src = e.target.result;
      // OR
      $("#your-audio-tag").attr("src", e.target.result);
  };
  reader.readAsDataURL(blob);

在Android上播放音频元素中的blob

1 个答案: