在Android上播放音频元素中的blob [英] Playing a blob in the audio element on Android

问题描述

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

I have some code that works fine on the desktop in Chrome and Firefox, and now I'm trying to get it to work on Chrome in Android. I have created some audio in the browser and I'd like to present an audio control so that the user can click play. Here is the final look of the control:

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

我尝试用浏览器播放一个文件：

I tried playing a file from the browser with this:

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

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

And that worked fine, so I know that the audio control can play WAV files.

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

The controls look different, too. The one that plays from the server contains the timing, that is, "0:00 / 1:23". The one that is created in JavaScript contains only "0:00". That leads me to believe that the control didn't actually load the audio in, but I have no idea why.

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

I printed out some debug info on the blob and I see the reported size is 184,440, and the reported type is "audio/wav".

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

The way I created the URL that I put in the audio's src is:

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

我如何进一步调试？或者是否有另一种设置Android音频控制的方法？

How would I debug this further? Or is there another way to set up the audio control for Android?

谢谢！

更新：

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

I didn't solve this problem but I worked around it. Instead of using the <audio> control for playback, I am using an AudioBuffer directly:

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();

推荐答案

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

Apparently, Android Chrome cannot play audio from a blob. I came across this bug when I was implementing Recorder.js to record audio on mobile browsers. In my research I came across a couple of issues reported to the chromium project. Issue 1 Issue 2

幸运的是，我正在研究 Recorder.js 库，因为如果我不是，它会我花了不少于1天的时间才找到修复这个bug的方法。无论如何，在问题。 /github.com/mattdiamond/Recorderjsrel =nofollow> Recorder.js git存储库也是如此。 @kekechin在那个帖子中的答案对我有用。谢谢@dokechin！

Lucky for me, I was working on the Recorder.js library because if I wasn't, It would have taken me a lot more than a 1 day to find a fix to this bug. Anyway, there was an issue opened about this in the Recorder.js git repository as well. @dokechin's answer in that thread worked for me. Thanks @dokechin!

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

Just convert your blob to base64 data and Android Chrome will play it. You can do it like this,

  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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！