首页 文章

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

提问于
浏览
3

我有一些代码可以在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音频控制的方法?

谢谢!

Update:

我没有解决这个问题,但我解决了这个问题 . 而不是使用 <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();

1 回答

  • 3

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

    幸运的是,我正在研究Recorder.js库,因为如果我不是,那么找到这个bug的修复程序需要花费我超过1天的时间 . 无论如何,在Recorder.js git存储库中也有一个issue打开了这个 . @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);
    

相关问题