如何為IOS 9初始化SoundJS

Question

我們一直在使用CreateJS套件，但剛剛意識到我們的音頻不適用於IOS9。 不幸的是，我們只有一台運行IOS9.2.4的IOS9測試設備，但是音頻播放結果卻是混合的。

我正在使用的粗糙過程是;

• 通過PreloadJS預加載所有資產（腳本/圖像/音頻）
• 在EaselJS中構建初始啟動畫面，包括一個開始按鈕
• 繼續主要內容

能夠在呈現該閃屏之前預加載所有音頻將是有利的。 最初添加啟動畫面以允許音頻在移動Safari上播放，點擊時播放空聲。 這當然適用於IOS7 / 8，但不適用於9。

我在codepen上創建了這個測試用例，試圖找出問題並嘗試一些選項。

Codepen樣本

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秒，則單擊綠色按鈕不播放音頻。 如果我們立即點擊它，音頻播放正常。

我一直在審查這個錯誤/線程，並試圖遵循格蘭特的建議。 我收集SoundJS v0.6.2現在自動嘗試播放插件初始化時適當的空聲，但是將initializeDefaultPlugins和registerSounds調用移動到handleStart函數似乎沒有任何區別。 如果我正確理解了這個問題，那么調用WebAudioPlugin.playEmptySound方法應該足夠了嗎？

一直在看事件綁定，嘗試mousedown / touchend而不是點擊，但結果與20秒等待相同。 事件似乎也會發生兩次，盡管我可能會深入研究，如果我能讓它正常工作的話。

我知道針對此問題的移動安全方法文章，但是在此級別需要命名空間意味着對我們現有內容的重大改寫。 有人可能會建議是否完全有必要采取這種方法？ 我認為通過在初始處理程序中正確播放一些空音頻應該是可行的。

實際上無法獲得主要項目到這一點，但如果我能得到一個有效的例子，也許我會更近一步。

任何想法將不勝感激！

Answer 1

自從0.6.2中的更新以來，移動安全教程不再具有真正的相關性。 它可能會在不久的將來更新或刪除。

• 你永遠不需要initializeDefaultPlugins() DefaultFlugins initializeDefaultPlugins() ，除非你想對結果采取行動（即，在做某事之前檢查activePlugin）。 第一次嘗試注冊聲音時，此方法會自動觸發。
• playEmptySound也不再需要了。 SoundJS將偵聽mousedown / click的第一個文件，並在后台自動執行此操作。
• 觸摸事件不是直接從EaselJS階段傳播，而是變成鼠標事件（touchstart = mousedown，touchmove = mousemove，touchend = pressup / click）

基於此，無論您是否聆聽，您都應該能夠在單擊文檔的任何位置播放聲音。

這並不是說沒有錯誤，只是說你所采取的步驟不是必需的。 我做了一些測試，它似乎在iOS9中工作。 這是一個簡化的小提琴。 https://jsfiddle.net/lannymcnie/b4k19fwc/ （鏈接更新於2018年12月3日）