javascript-在Android的音频元素中播放blob

javascript-在Android的音频元素中播放blob,第1张

概述我有一些代码可以在Chrome和Firefox的桌面上正常运行,现在我正尝试使其在Android的Chrome上运行.我已经在浏览器中创建了一些音频,我想展示一个音频控件,以便用户单击播放.这是控件的最终外观:<audiocontrolssrc="blob:https%3A//mydomain.com/5b7cbd96-b204-4b1c-8de3-9fb212c3

我有一些代码可以在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,报告的类型为“音频/波形”.

我创建放置在音频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();

解决方法:

显然,AndroID Chrome无法播放Blob中的音频.我在实施Recorder.js以便在移动浏览器上录制音频时遇到了此错误.在我的研究中,我遇到了一些向铬项目报告的问题.
Issue 1
Issue 2

对我来说幸运的是,我正在使用Recorder.js库,因为如果不是这样,那么花了我超过1天的时间才能找到此BUG的修复程序.无论如何,Recorder.js git存储库中也为此打开了issue. @dokechin在该主题中的答案对我有用.谢谢@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);
总结

以上是内存溢出为你收集整理的javascript-在Android的音频元素中播放blob全部内容,希望文章能够帮你解决javascript-在Android的音频元素中播放blob所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1120573.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-29
下一篇2022-05-29

发表评论

登录后才能评论

评论列表(0条)

    保存