如何为IOS 9初始化SoundJS

时间:2016-03-03 19:42:48

标签: javascript ios audio createjs soundjs

我们现在一直在使用CreateJS套件,但刚刚意识到我们的音频不适用于IOS9。不幸的是,我们只有一台运行IOS9.2.4的IOS9测试设备,但是音频播放结果却是混合的。

我正在使用的粗略过程是

  • 通过PreloadJS预加载所有资产(脚本/图像/音频)
  • 在EaselJS中构建初始启动画面,包括一个开始按钮
  • 继续主要内容

能够在呈现启动画面之前预加载所有音频将是有利的。最初添加启动画面以允许音频在移动Safari上播放,点击时播放空声。这当然适用于IOS7 / 8,但不适用于9。

我已经在codepen上创建了这个测试用例,试图找出问题并尝试一些选项。

Codepen sample

HTML

<p id="status">Hello World</p>
<canvas id="canvas" width="200" height="200"></canvas>

JS

var canvas, stage, rect;

function init() {
  canvas = document.getElementById('canvas');
  canvas.style.background = "rgb(10,10,30)";
  stage = new createjs.Stage("canvas");

  createjs.Touch.enable(stage);

  rect = new createjs.Shape();
  rect.graphics.f("#f00").dr(50,75,100, 50);
  rect.on("mousedown", handleStart, null, true);
  rect.on("touchend", handleStart, null, true);
  //rect.on("click", handleStart, null, true);
  stage.addChild(rect);
  stage.update();

  $('#status').text("Touch to Start");
  createjs.Sound.initializeDefaultPlugins();
  //createjs.Sound.alternateExtensions = ["ogg"];
  createjs.Sound.registerSound("https://www.freesound.org/data/previews/66/66136_606715-lq.mp3", "ding1");

}

function handleStart(event) {
  createjs.WebAudioPlugin.playEmptySound();

  $('#status').text("Touch to Play");

  rect.graphics._fill.style = '#0f0';
  rect.removeAllEventListeners();
  rect.on('click', handlePlay);
  stage.update();
}

function handlePlay(){
  createjs.Sound.play("ding1");
  $('#status').text("Playing");
}

init();

对于缺少ogg版本的道歉,很难让测试文件加载到x-domain。

有了这个,音频在IOS9上部分适用于我们。如果我们点击红色矩形(图形开始按钮)并保持约20秒,则单击绿色按钮不播放音频。如果我们立即点击它,音频播放正常。

我一直在审核this bug/thread并尝试遵循格兰特的建议。我收集SoundJS v0.6.2现在自动尝试播放插件初始化时适当的空声,但是将initializeDefaultPlugins和registerSounds调用移动到handleStart函数似乎没有任何区别。如果我正确理解了这个问题,那么调用 WebAudioPlugin.playEmptySound 方法就足够了吗?

一直在看事件绑定,尝试mousedown / touchend而不是点击,但结果与20秒等待相同。事件似乎也会发生两次,尽管如果我能让它正常工作,我可能会深入研究它。

我知道针对此问题的Mobile Safe Approach文章,但在此级别需要名称空间意味着要对我们现有内容进行大量重写。有人可能会建议是否完全有必要采取这种方法?我认为通过在初始处理程序中正确播放一些空音频应该是可行的。

到目前为止,实际上无法获得主要项目,但如果我能得到一个有效的例子,或许我会更近一步。

任何想法都将不胜感激!

1 个答案:

答案 0 :(得分:3)

自0.6.2的更新以来,移动安全教程不再具有真正的相关性。它可能会在不久的将来更新或删除。

  • 你永远不需要initializeDefaultPlugins(),除非你想对结果采取行动(即在做某事之前检查activePlugin)。第一次尝试注册声音时,此方法会自动触发。
  • playEmptySound也不再需要。 SoundJS将侦听mousedown / click的第一个文档,并在后台自动执行此操作。
  • 触摸事件不会直接从EaselJS阶段传播,而是变成鼠标事件(touchstart = mousedown,touchmove = mousemove,touchend = pressup / click)

基于此,您可以在单击文档中的任何位置时播放声音,无论您是否聆听它。

这并不是说没有错误,只是说你所采取的措施不是必需的。我做了一些测试,它似乎在iOS9中工作。这是一个简化的小提琴。 https://jsfiddle.net/lannymcnie/b4k19fwc/(链接更新于2018年12月3日)