android - AnalyserNode 和 AudioContext.createMediaElementSource 在移动设备上不起作用

coder 2024-01-18 原文

我无法在移动设备中使用 AudioContext.createMediaElementSource 使 AnalayserNode 工作。它不适用于 iOS 上的 Safari，也不适用于 Android 上的 Chrome。当我执行 analayser.getByteFrequencyData(buffer); 时，我总是得到一个包含零的数组。这是一个错误吗？我应该在哪里报告？任何解决方法？

下面或 Codepen 中的完整代码:http://codepen.io/elranu/pen/WQOerB

var initialized = false;
var audio = new Audio();
audio.src = "http://blogtalk.vo.llnwd.net/o23/show/6/884/show_6884921_2014_09_08_16_11_36.mp3";
audio.crossOrigin = "anonymous";
audio.preload = false;

function init(){
  var context = new AudioContext();
  var source = context.createMediaElementSource(audio);
  var anal = context.createAnalyser();
  anal.fftSize = 1024;
  var buffer = new Uint8Array(anal.frequencyBinCount);

  var lines = [];  
  var eq = document.getElementById('eq'); 

  for(var index = 0; index < buffer.length; index++){
    var line = document.createElement('div');
    line.className = 'line';
    lines.push(line);
    eq.appendChild(line);
  }  

  source.connect(anal);
  anal.connect(context.destination);

  setInterval(function(){
    anal.getByteFrequencyData(buffer);
    for(var index = 0; index < buffer.length; index++){
      lines[index].style.height = buffer[index] + 'px';
    }

  }, 50);
}

function startAudio(){
  if(!initialized){
     init();
     initialized = true;
  }
  
  audio.play();
}

function stopAudio(){
  audio.pause();
}

.line {
  width: 2px;
  background-color: blue;
  margin-left:3px;
  display:inline-block;
}

#eq {
  height: 500px;
}

<button onclick="startAudio()">Start Audio</button>
<button onclick="stopAudio()">Stop Audio</button>

<div id="eq">
</div>

更新:我注意到如果 AudioContext 的源是 createBufferSource()，则 AnalayserNode 可以在移动设备上运行。但这不是解决问题的可行方法。因为要创建缓冲区，我必须执行以下请求:

var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function(){//stufff...};

如果我执行此请求，移动设备将下载完整的音频，只渲染音频的频率。对于大音频，这在移动设备中不是可行的解决方案，因为用户可能需要等待很长时间才能开始播放。

一个测试这个的例子:http://webaudioapi.com/samples/visualizer/

最佳答案

我找到了答案，不幸的是是一个错误。更多信息在这里: https://code.google.com/p/chromium/issues/detail?id=419446

关于android - AnalyserNode 和 AudioContext.createMediaElementSource 在移动设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33003285/

有关android - AnalyserNode 和 AudioContext.createMediaElementSource 在移动设备上不起作用的更多相关文章

ruby - 多次弹出/移动 ruby 数组 - 2
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2
当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2
我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions
安卓apk修改(Android反编译apk) - 2
最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路
ruby-on-rails - 禁用设备的 :confirmable on-the-fly to batch-generate users - 2
Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation
ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用？ - 2
我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么？describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。关于ruby-o
ruby - 字符串文字前面的 * 在 ruby 中有什么作用？ - 2
这段代码似乎创建了一个范围从a到z的数组，但我不明白*的作用。有人可以解释一下吗？[*"a".."z"] 最佳答案它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw
ruby - 为什么这个 eval 在 Ruby 中不起作用 - 2
你能解释一下吗？我想评估来自两个不同来源的值和计算。一个消息来源为我提供了以下信息(以编程方式):'a=2'第二个来源给了我这个表达式来评估:'a+3'这个有效:a=2eval'a+3'这也有效:eval'a=2;a+3'但我真正需要的是这个，但它不起作用:eval'a=2'eval'a+3'我想了解其中的区别，以及如何使最后一个选项起作用。感谢您的帮助。最佳答案您可以创建一个Binding，并将相同的绑定(bind)与每个eval相关联调用:1.9.3p194:008>b=binding=>#1.9.3p194:009>eva

android - AnalyserNode 和 AudioContext.createMediaElementSource 在移动设备上不起作用

有关android - AnalyserNode 和 AudioContext.createMediaElementSource 在移动设备上不起作用的更多相关文章

随机推荐