iOS上的WebAudio支持"默认"一个UIWebView / WebKit的

时间:2014-09-06 14:42:14

标签: ios cordova uiwebview web-audio hybrid-mobile-app

欢迎任何有关改进问题或其标题的建议。

客观问题排在首位,完整问题如下:

  1. 如何确定哪个"版本" WebKit和/或Cordova项目支持哪种构建/版本的WebAudio API?我是Objective-C和XCode的完全新手,请原谅我是否有明显的答案。

  2. 有没有办法使用更新版本的WebKit构建Cordova应用程序以支持更多当前的WebAudio实现?

  3. 有点主观,但是根据我的应用程序的要求,我可以调查一下WebAudio的替代品吗?这些替代方案在实践中如何运作?不幸的是,我为这个应用程序投入了大量的Javascript / HTML,但是如果想进入Objective-C来重写应用程序或者构建原生扩展(插件),我们需要考虑是否会有成效。

  4. 这些要求基本上是:

    • 播放短音频样本(最多2-3秒),延迟时间低于50毫秒,以响应用户界面。
    • 需要从最终标注中修复延迟。也就是说,从最终调用.playSound(...)开始,就不会有额外的可变延迟。这适用于音序器。
    • 加载MP3或OGG样本(不是原始音频)。
    • 可以动态加载和卸载样本集。

    我唯一知道iOS的选项是Flash / AIR,Javascript w / HTMl5音频,Javascript w / WebAudio和原生Objective-C。最后一个包括与Cordova一样的原生扩展/插件。

    问题的冗长描述如下。

    我使用Javascript为iPad开发了一个吉他应用程序,但我遇到了一些糟糕的解决方案。该应用程序使用WebAudio创建波表合成器,并实时响应用户输入。回放的核心功能可以通过~100-200ms的延迟消失,但应用程序的感觉和一些次要功能依赖于更加响应~10-50ms的延迟。

    我(不明智,是的)完全在桌面Chrome中开发应用程序,并在iOS Safari中进行了一些测试,这鼓励我一切都会有效。我(不明智地)推迟使用Cordova / Phonegap或CocoonJS进行建筑的令人不快的工作,因为我认为快速迭代开发超过( cough )目标平台上的测试驾驶。

    比查找所有代码更糟糕的是,您的目标平台无法正常工作?发现很难确定您的代码是否适用于您的目标平台,因为构建和调试是如此有问题......

    我遇到的问题,如果当之无愧地出乎意料:

    • 使用Cordova构建时,应用无法初始化。我没有控制台输出。 org.apache.cordova.console插件偶尔工作,我还不知道这是否可以解决(其他人有类似的问题)。
    • 我可以打开Safari并附加远程开发控制台,但在应用程序加载和初始化之前无法执行此操作。所以再次,很难弄清楚WebAudio可能会发生什么。
    • 我在一些运行中得到了一个测试WebAudio应用程序来产生声音;在其他运行中,它是沉默的。没有控制台输出来帮助识别这一点。
    • 从webkitAudioContext迁移到最终未加前缀的AudioContext涉及一些次要的代码更改。然而,前者(显然)仍然使用Cordova构建的WebKit版本(或者,所有本机iOS应用程序都可以访问的版本?),而后者用于(远,远,更有用和可靠)开发)最新版本的Chrome。所以,似乎我必须编写一些适配器代码,可以使用任一版本的API,但没有可靠的方法来调试我的目标平台上的那个。
    • 关于互联网的很多(不是最近的)喋喋不休让我想知道WebAudio是否会在使用旧版WebKit的混合应用程序中充分发挥作用(假设我最终会解决上述所有问题并让应用程序制作出来声音)。我花了大量时间进行性能分析和优化,以使其在Safari中可以接受地运行,而不是意识到这可能与独立应用程序的性能差异很大(或者说,更好的性能)。
    • 非特定于WebAudio,但由于Cordova多次复制(不变)音频样本的数量,我的应用需要几个分钟来构建每次更改。这是许多危险信号之一,告诉我为什么Cordova / Phonegap有这么痛苦的名声。

    底部的底线,我可能需要付出相当大的努力才能确定是否需要付出相当大的努力来追求已经投入的技术选择(WebAudio,JS / HTML),并且会喜欢如果有相关经验的人可以帮助我预测这项工作的结果。我可以开始学习Objective-C以及为Cordova插件编写本机代码(至少有一些现有项目支持简单的原生音频)。我也可以开始朝着Flash中完全重写的方向前进,这将解决应用程序中的其他问题(如管理可扩展的UI并简化代码和构建管理),但据我所知,可以保证较差的音频延迟,以及肯定会有其他问题。如果我能让现有的代码库在iOS(iPad 2及更高版本)上运行,我会很高兴。不幸的是,我没有几个月的时间重新开始,但如果重新开始是唯一可行的选择......

    感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

首先,我可以给你一些调试目的的提示:

根据我自己的经验,我知道在deviceReady之前出现的这种“加载错误”是一个真正的痛苦,很难找到。

你可以尝试两件事:

首先,要附加到Safari远程调试器,请在初始化WebAudio内容之前编写alert('test'); 。诀窍是,只要您没有处理警报消息,应用程序就会暂停执行。因此,有足够的时间来连接远程调试器,处理警报消息并从那里获取远程输出。

您可以尝试进行调试的另一件事是另一个远程调试器weinre。要设置weinre,请通过sudo npm -g install weinre安装,在开发者计算机上打开weinre localhost实例,然后将行<script src="http://<your developer machine IP>:8080/target/target-script-min.js#anonymous"></script>粘贴到index.html。如果我没记错,你必须在包含任何其他脚本之前注入这一行。

使用浏览器连接到http://localhost:8080以查找远程控制台并启动应用程序。我在使用此工具的代码中发现了一些难以发现的问题。


我无法帮助您专门使用WebAudio,但您是否看过Low Latency Plugin for Phonegap?前一段时间我偶然发现,当我在Phonegap项目中遇到一些音频延迟问题时,它对我来说非常有帮助。

查看链接页面上的YouTube演示。通过它预加载音频和一些更多改进的能力,它非常高效,看起来非常适合您的用例。当然,您不需要自己编写本机代码。

答案 1 :(得分:0)

  1. 虽然在浏览器中进行开发非常方便,但对于真实设备来说,无可替代。无论您使用的是PhoneGap,Flash,Objective-C等,都是如此。

      

    你承认其中一些,但值得重申。

    • 从不,永远假设因为您的应用在您的桌面上工作,它将适用于您的目标。虽然因为iOS上可用的各种WebKit版本(取决于操作系统版本),混合应用程序也是如此,但对于本机应用程序也是如此。众所周知,如果应用程序在真实设备上正常运行,您应该从不依赖iOS模拟器告诉您肯定。此外,iOS模拟器并没有实现真实设备所具有的许多功能,因此测试的唯一方法是使用真实设备。

    • 从不,永远假设如果它在您的桌面上运行良好,它将在您的目标上运行良好。混合和非混合开发也是如此。例如,iOS模拟器仅受PC电源的限制,包括速度和内存。这意味着应用程序可以在模拟器上完美运行,并且由于内存限制而在真实设备上崩溃,或者它可能在您的桌面上速度很快并且在设备上速度极慢。再次,测试真实的东西。

    • 如果可能,请尝试在多台设备上进行测试。针对您定位的最低速设备进行优化。如果您要针对iPhone 4s及更高版本进行定位,请获取并优化它 - 优化iPhone 5s将有所帮助,但它只会告诉您有关iPhone 5s的信息,而不是其他内容。

    • 认识到您不仅仅是针对iOS,而是针对特定的WebKits。每个版本的iOS都有不同的WebKit版本,并且它是不可协商的。换句话说,您不仅要定位iOS 6,7,7.1,而且对于混合开发,您也可以定位其WebKit版本。每个人都有自己的怪癖和陷阱。 (就平台SDK而言,本地开发也是如此 - 每个版本都有自己的怪癖和陷阱。)

    • Cordova没有针对特定版本的WebKit - 它以系统网络浏览器为目标,或者在iOS&#39;情况1}}。用户在其平台上拥有的版本是您将获得的版本。这让Android变得非常糟糕(在我看来),但是在iOS上也会引起一些嘲笑。测试,测试,测试。

  2. 研究

    • 确定Web音频支持(如果需要任何前缀)很简单:http://caniuse.com/#feat=audio-api(如果它不显示所有iOS,请单击&#34;显示所有&#34;按钮版本)。在这里,您可以很容易地发现iOS 6.0及更高版本使用UIWebKit前缀支持Web Audio。当我考虑使用HTML5或CSS3功能时,我可以使用... 是我工作流程的标准功能。有一个类似的Ecmascript功能网站(如http://kangax.github.io/compat-table/es5/)。

    • 考虑使用非核心插件(尽管这意味着您可以使用下面的第一个子弹)。在Cordova插件库中搜索音频 - 其中一对看起来很有前途:http://plugins.cordova.io/#/search?search=audio。另请参阅PlugReg:http://plugreg.com/search?q=audio。如果您需要在网络和设备上同时运行,您将要检测您所在的设备,以便了解是否使用插件与Web音频。 (就个人而言,似乎现在最好将其抽象出来,以便您拥有音频生成后端的通用接口,然后可以根据设备的可用技术进行交换。)

      < / LI>
      

    这就是说,我不知道这些插件是否能满足您的需求。 Web Audio可能是最好的选择,但知道它是否在设备上运行良好的唯一方法是尝试

  3. 快速迭代开发

    • 如果您愿意接受有限的调试选项(即仅限Weinre),请考虑使用PhoneGap Developer应用程序(http://app.phonegap.com)。只要您不使用任何非核心插件,就可以让应用程序在检测到代码更改时自动重新加载,而无需昂贵的构建周期。

    • 虽然我通常不建议这样做,但您可以通过在平台webkit目录中工作并使用Xcode进行部署来避免一些不必要的复制。在使用任何CLI命令之前,请务必将更改复制回根www目录。

  4. 调试

    • 使用Safari进行调试与iOS混合开发一样好。 (Chrome开发工具更好,但他们是Android用的......)[注意:如果使用PhoneGap Developer App,则不适用。你不得不使用Weinre,遗憾的是,这与Safari的调试器相差甚远。]

    • 不用担心登录Xcode的控制台 - 删除控制台插件要求。担心改为登录浏览器的控制台。 [仅在使用Safari / Weinre作为调试器时适用]

    • 考虑GapDebug。他们有一个工具,每次应用程序退出时都不会连续关闭调试器,这可能会有所帮助。

    • @qefzec提供的www小费很好。您也可以使用alert。 GapDebug还可以帮助减轻这种情况,因为它可以在任何重要事件被记录之前重新连接。

    • 请务必启用所有未捕获的异常。 (您可以在window.location.reload()标签中进行设置。)这有助于捕捉您甚至没有注意到的错误。 (也许你可能因为间歇性的网络音频问题而遇到类似的问题。)

    • 在任何环境中都可以调试回调。在断言顶部放置一个断点,然后让调试器继续执行(Debugger按钮)。它会完全跳过你的回调代码 - 没问题。它会在执行时闯入你的回调。

    • 即使拥有我们现在拥有的所有调试功能(它们与本机不匹配),|>console.log仍然是您的朋友。

  5. 希望有所帮助。混合开发可能是有益的,但它需要研究和耐心使用不太原生的调试工具。随着每个版本的发布,CLI都在不断改进,我所看到的4.x的一些内容将使CLI突飞猛进。当然,你可以去原生(如果你正在做很多的音频处理,你可能想要,甚至只是制作一个原生插件),但它带有许多与非本地开发相同的陷阱,所以你不会有一个神奇的更容易的时间。 (我的两分钱。)


    **编辑2014年9月7日**


    所以我在阅读你的原帖时却部分失明,并且错过了你曾经使用Mobile Safari在iOS上做过一些测试。 我的不好!! 以下是一些注意事项:

    • Mobile Safari 与UIWebView完全相同。

    • Mobile Safari的呈现应该与UIWebView呈现相同 - 也就是说,布局引擎是相同的。

    • Mobile Safari使用JIT编译器将JavaScript性能提高2-3倍。此引擎提供给UIWebView实例,这意味着您在Mobile Safari中执行的任何优化都是针对错误的引擎。

    • 您可以测试布局和一些&#34;感觉&#34; (比如元素的大小等)在Mobile Safari中就好了。

    • 不要依靠Mobile Safari来测试性能。你真的需要成为一个UIWebView。当然,因为所有其他浏览器都是UIWebView浏览器,所以您可以通过使用谷歌浏览器或任何其他iOS浏览器替代品(Opera Mini除外)来很好地理解这一点,但您不会有调试选项。

    • iOS 8看起来要改变它,但仅限于WKWebView。有计划让PhoneGap与之合作,但我认为它们还有一段距离(只有iOS 8才能看到性能提升)。

    • 还有另外一个关键区别 - 在Cordova容器中运行时,您的DOM中还有一个额外的iframe充当了Web&lt; - &gt;本机桥。它通常不会对任何事情产生影响,但是如果您调试Cordova应用程序并查看您在代码中没有实际拥有的DOM元素,那么知道它在做什么是有用的。