-
-
Save S-YOU/5ecf0cab254e9823b33c5d1a6e08c040 to your computer and use it in GitHub Desktop.
Revisions
-
uupaa revised this gist
Apr 28, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -61,7 +61,7 @@ MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.n - iPhone 3GS は 256RAM のため、Web Audio は使わないほうがよい(複数ファイルを扱うとメモリ不足で落ちることも) - Mac Chrome が優秀なため、全てのシチュエーションで再生できてしまうが、それを鵜呑みにすると、モバイルデバイスで再生されずドハマりする - Audio/WebAudio 周りの実装は、必ず実機を用意し、実際の動作を確認しながら行うこと - [Tegra 2 SoC 搭載な NEON非搭載のAndroid端末](https://github.com/uupaa/Spec.js/blob/master/lib/Spec.js#L1097)では window.AudioContext がなく、Web Audio は利用できない。あきらめてください ```html <!DOCTYPE html><html><head><title>test</title> -
Oct 16, 2014 . 1 changed file with 15 additions and 12 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -12,6 +12,20 @@ http://uupaa.net/issues/3/ の結果 操作方法: `loadAudio` ▶ 画面が緑になるまで待つ ▶ `playAudio` の順にクリックする - YES - `[loadAudio]` ▶ 待つ ▶ 緑になる ▶ `[playAudio]` で再生が始まる - 空白 - `[loadAudio]` ▶ 待つ ▶ 変化がない ▶ `[playAudio]` で再生も始まらない - FUZZY - `[loadAudio]` ▶ 待つ ▶ 変化がない ▶ `[playAudio]` で突然再生が始まる canplay や progress イベントが信用できない - iOS 6.1 - iPhone 3GS iOS 6.1 - iOS 7.1 - iPhone 4S iOS 7.1 - iOS sim - iPhone 7.x simulator - iOS 8.0 - iPhone 5 iOS 8.0 GM Seed - Mac WebKit 6.0.x - Mac Book Pro + WebKit 6.0.x nightly - Mac Chrome 39 - Mac Book Pro + Chrome canary 39 (64 bit) - Android Chrome 37 - Nexus 7 (2012) Chrome for Android 37 | | 1 | 2 | 3 | 4 | 5 | |-------------------|-----|-----|-------|-----|-----| | iOS 6.1 | YES | | FUZZY | YES | | @@ -36,18 +50,7 @@ MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.n | Mac Chrome 39 | YES | YES | YES | YES | YES | | Android Chrome 37 | YES | | FUZZY | YES | YES | ## 雑感 @@ -260,7 +263,7 @@ xhr.open("GET", url); xhr.send(); ``` 一度ユーザアクション由来のイベントハンドラ内で source.start を実行しないと、音が鳴らない ```js document.body.onclick = function() { -
Sep 15, 2014 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -279,7 +279,7 @@ WebAudio で再生中に、タブの切替やサスペンドでボリューム | | タブ切り替え | サスペンド | |-------------|---------------|-----------------| | iPhone 5 (iOS 8) | YES | YES | | iPhone 4S (iOS 7) | | YES | | Nexus 7 (2012)(Android 4.4.4) | | | -
Sep 15, 2014 . 1 changed file with 10 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -272,4 +272,14 @@ document.body.onclick = function() { }; ``` ## Auto fade WebAudio で再生中に、タブの切替やサスペンドでボリューム操作が自動的に行われるかどうかについて調査 | | タブ切り替え | サスペンド | |-------------|---------------|-----------------| | iPhone 5 (iOS 8) | auto mute | auto mute | | iPhone 4S (iOS 7) | | auto mute | | Nexus 7 (2012)(Android 4.4.4) | | | -
Sep 15, 2014 . 1 changed file with 36 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -237,4 +237,39 @@ function _ready() { </script> </body></html> ``` ## iOS デバイスにおける WebAudio の制限 window.onload のタイミングではサウンドファイルのロードと decodeAudioData によるデコードまで実行可能 ```js var ctx = new AudioContext(); var decodedBuffer = null; var xhr = new XMLHttpRequest(); xhr.responseType = "arraybuffer"; xhr.onload = function() { ctx.decodeAudioData(xhr.response, function(buffer) { decodedBuffer = buffer; }); }; xhr.open("GET", url); xhr.send(); ``` src.start(0) は、一度ユーザアクション由来のイベントハンドラ内で実行しないと、音が鳴らない ```js document.body.onclick = function() { var source = ctx.createBufferSource(); source.buffer = decodedBuffer; source.connect(ctx.destination); source.start(0); }; ``` -
Sep 11, 2014 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -5,7 +5,7 @@ 5. WebAudio(blob) ## Audio file access with streaming http://uupaa.net/issues/3/ の結果 @@ -22,7 +22,7 @@ http://uupaa.net/issues/3/ の結果 | Mac Chrome 39 | YES | YES | YES | YES | YES | | Android Chrome 37 | YES | | FUZZY | YES | YES | ## Audio file access without streaming MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.net/issues/3/ と同じテストを行った結果 -
Sep 11, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -58,7 +58,7 @@ MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.n - iPhone 3GS は 256RAM のため、Web Audio は使わないほうがよい(複数ファイルを扱うとメモリ不足で落ちることも) - Mac Chrome が優秀なため、全てのシチュエーションで再生できてしまうが、それを鵜呑みにすると、モバイルデバイスで再生されずドハマりする - Audio/WebAudio 周りの実装は、必ず実機を用意し、実際の動作を確認しながら行うこと - [Tegra 2 SoC 搭載な NEON非搭載のAndroid端末](https://github.com/uupaa/Spec.js/blob/master/lib/Spec.js#L1097)では window.AudioContext がなく、Web Audio は利用できない。あきらメロン ```html <!DOCTYPE html><html><head><title>test</title> -
Sep 11, 2014 . 1 changed file with 3 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,6 +9,9 @@ http://uupaa.net/issues/3/ の結果 操作方法: `loadAudio` ▶ 画面が緑になるまで待つ ▶ `playAudio` の順にクリックする | | 1 | 2 | 3 | 4 | 5 | |-------------------|-----|-----|-------|-----|-----| | iOS 6.1 | YES | | FUZZY | YES | | @@ -23,8 +26,6 @@ http://uupaa.net/issues/3/ の結果 MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.net/issues/3/ と同じテストを行った結果 | | 1 | 2 | 3 | 4 | 5 | |-------------------|-----|-----|-------|-----|-----| | iOS 6.1 | | | | YES | | -
Sep 11, 2014 . 1 changed file with 0 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -96,7 +96,6 @@ MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.n <script> var url1 = "./game.m4a"; var stock = { 0: { node: null, nodeType: "audio", url: url1, responseType: "", mime: "", size: 0, data: null, sound: { canplay: false } }, -
Sep 11, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -57,7 +57,7 @@ MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.n - iPhone 3GS は 256RAM のため、Web Audio は使わないほうがよい(複数ファイルを扱うとメモリ不足で落ちることも) - Mac Chrome が優秀なため、全てのシチュエーションで再生できてしまうが、それを鵜呑みにすると、モバイルデバイスで再生されずドハマりする - Audio/WebAudio 周りの実装は、必ず実機を用意し、実際の動作を確認しながら行うこと - Tegra 2 などの NEON非搭載のAndroid端末では window.AudioContext がなく、Web Audio は利用できない。あきらメロン ```html <!DOCTYPE html><html><head><title>test</title> -
Sep 11, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -45,7 +45,7 @@ MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.n - YES - `[loadAudio]` ▶ 待つ ▶ 緑になる ▶ `[playAudio]` で再生が始まる - 空白 - `[loadAudio]` ▶ 待つ ▶ 変化がない ▶ `[playAudio]` で再生も始まらない - FUZZY - `[loadAudio]` ▶ 待つ ▶ 変化がない ▶ `[playAudio]` で突然再生が始まる canplay や progress イベントが信用できない ## 雑感 -
Sep 11, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -21,7 +21,7 @@ http://uupaa.net/issues/3/ の結果 ## Local audio file access MBP に簡素なWebサーバを設置(npm install http-server)し http://uupaa.net/issues/3/ と同じテストを行った結果 操作方法: `loadAudio` ▶ 画面が緑になるまで待つ ▶ `playAudio` の順にクリックする -
Sep 11, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,240 @@ 1. Audio(url) 2. Audio(arraybuffer) 3. Audio(blob) 4. WebAudio(arraybuffer) 5. WebAudio(blob) ## Remote audio file access http://uupaa.net/issues/3/ の結果 | | 1 | 2 | 3 | 4 | 5 | |-------------------|-----|-----|-------|-----|-----| | iOS 6.1 | YES | | FUZZY | YES | | | iOS 7.1 | YES | | | YES | YES | | iOS sim | YES | | | YES | YES | | iOS 8.0 | YES | | | YES | YES | | Mac WebKit 6.0.x | YES | | | YES | YES | | Mac Chrome 39 | YES | YES | YES | YES | YES | | Android Chrome 37 | YES | | FUZZY | YES | YES | ## Local audio file access MBP に簡素な Web サーバを設置し http://uupaa.net/issues/3/ と同じテストを行った結果 操作方法: `loadAudio` ▶ 画面が緑になるまで待つ ▶ `playAudio` の順にクリックする | | 1 | 2 | 3 | 4 | 5 | |-------------------|-----|-----|-------|-----|-----| | iOS 6.1 | | | | YES | | | iOS 7.1 | | | | YES | YES | | iOS sim | | | | YES | YES | | iOS 8.0 | | YES | YES | YES | YES | | Mac WebKit 6.0.x | | | | YES | YES | | Mac Chrome 39 | YES | YES | YES | YES | YES | | Android Chrome 37 | YES | | FUZZY | YES | YES | - iOS 6.1 - iPhone 3GS iOS 6.1 - iOS 7.1 - iPhone 4S iOS 7.1 - iOS sim - iPhone 7.x simulator - iOS 8.0 - iPhone 5 iOS 8.0 GM Seed - Mac WebKit 6.0.x - Mac Book Pro + WebKit 6.0.x nightly - Mac Chrome 39 - Mac Book Pro + Chrome canary 39 (64 bit) - Android Chrome 37 - Nexus 7 (2012) Chrome for Android 37 - YES - `[loadAudio]` ▶ 待つ ▶ 緑になる ▶ `[playAudio]` で再生が始まる - 空白 - `[loadAudio]` ▶ 待つ ▶ 変化がない ▶ `[playAudio]` で再生も始まらない - FUZZY - `[loadAudio]` ▶ 待つ ▶ 変化がない ▶ `[playAudio]` で突然再生が始まる canplay や progress イベントが信用できない ## 雑感 - `<audio>` - サーバ/Proxyの設定によっては `<audio>` が機能しないケースがある(よくある) - iOS デバイスはバージョンアップで `<audio>` の実装が密かに変化している - WebAudio API は、Blob または ArrayBuffer の両方で利用可能 (iOS 6.x を除く) - iPhone 3GS は 256RAM のため、Web Audio は使わないほうがよい(複数ファイルを扱うとメモリ不足で落ちることも) - Mac Chrome が優秀なため、全てのシチュエーションで再生できてしまうが、それを鵜呑みにすると、モバイルデバイスで再生されずドハマりする - Audio/WebAudio 周りの実装は、必ず実機を用意し、実際の動作を確認しながら行うこと - Tegra2 などの NEON非搭載のAndroid端末では Web Audio は利用不能(window.AudioContext がない) ```html <!DOCTYPE html><html><head><title>test</title> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta charset="utf-8"></head><body> <p>1. Audio(url)</p> <input type="button" value="loadAudio" onclick="loadAudio(0)"></input> <input type="button" value="playAudio" onclick="playAudio(0)"></input> <input type="button" value="stopAudio" onclick="stopAudio(0)"></input> <br /> <br /> <p>2. Audio(arraybuffer)</p> <input type="button" value="loadAudio" onclick="loadAudio(1)"></input> <input type="button" value="playAudio" onclick="playAudio(1)"></input> <input type="button" value="stopAudio" onclick="stopAudio(1)"></input> <br /> <br /> <p>3. Audio(blob)</p> <input type="button" value="loadAudio" onclick="loadAudio(2)"></input> <input type="button" value="playAudio" onclick="playAudio(2)"></input> <input type="button" value="stopAudio" onclick="stopAudio(2)"></input> <br /> <br /> <p>4. WebAudio(arraybuffer)</p> <input type="button" value="loadAudio" onclick="loadAudio(3)"></input> <input type="button" value="playAudio" onclick="playAudio(3)"></input> <input type="button" value="stopAudio" onclick="stopAudio(3)"></input> <br /> <br /> <p>5. WebAudio(blob)</p> <input type="button" value="loadAudio" onclick="loadAudio(4)"></input> <input type="button" value="playAudio" onclick="playAudio(4)"></input> <input type="button" value="stopAudio" onclick="stopAudio(4)"></input> <br /> <script> // issue1 - Chrome for Android は、arraybuffer の音源が再生できない? var url1 = "./game.m4a"; var stock = { 0: { node: null, nodeType: "audio", url: url1, responseType: "", mime: "", size: 0, data: null, sound: { canplay: false } }, 1: { node: null, nodeType: "audio", url: url1, responseType: "arraybuffer", mime: "", size: 0, data: null, sound: { canplay: false } }, 2: { node: null, nodeType: "audio", url: url1, responseType: "blob", mime: "", size: 0, data: null, sound: { canplay: false } }, 3: { node: null, nodeType: "webaudio", url: url1, responseType: "arraybuffer", mime: "", size: 0, data: null, sound: { buffer: null, source: null } }, 4: { node: null, nodeType: "webaudio", url: url1, responseType: "blob", mime: "", size: 0, data: null, sound: { buffer: null, source: null } }, }; var _AudioContext = window.AudioContext || window.webkitAudioContext; var webAudioContext = _AudioContext ? new _AudioContext() : null; function loadAudio(n) { var target = stock[n]; if (target.responseType) { _download(target.url, target.responseType, function(data, mime, size) { target.data = data; // blob or arraybuffer target.mime = mime; target.size = size; _downloaded(n); }); } else { _downloaded(n); } } function _download(url, responseType, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { callback(xhr.response, xhr.getResponseHeader("content-type"), parseInt(xhr.getResponseHeader("content-length")) || 0); }; xhr.responseType = responseType; xhr.open("GET", url); xhr.send(); } function _downloaded(n) { var target = stock[n]; var data = target.data; if (target.nodeType === "audio") { var bloburl = ""; if (data instanceof ArrayBuffer) { bloburl = URL.createObjectURL( new Blob([data], { type: target.mime /* "audio/mp4" */ }) ); } else if (data instanceof Blob) { bloburl = URL.createObjectURL(data); } else { bloburl = target.url; } target.node = new Audio(); target.node.src = bloburl; target.node.volume = 0.2; target.node.addEventListener("progress", handleEvent, false); target.node.addEventListener("canplay", handleEvent, false); target.node.load(); } else { if (data instanceof ArrayBuffer) { webAudioContext.decodeAudioData(data, function(decodedBuffer) { target.sound.buffer = decodedBuffer; _ready(); }); } else if (data instanceof Blob) { var reader = new FileReader(); reader.onloadend = function() { webAudioContext.decodeAudioData(reader.result, function(decodedBuffer) { target.sound.buffer = decodedBuffer; _ready(); }); }; reader.readAsArrayBuffer(data); } } function handleEvent(event) { var duration = target.node.duration; switch (event.type) { case "canplay": target.node.removeEventListener("canplay", handleEvent, false); target.sound.canplay = true; break; case "progress": break; } if (duration > 0 && target.sound.canplay) { target.node.removeEventListener("progress", handleEvent, false); _ready(); } } } function playAudio(n) { var target = stock[n]; if (target.nodeType === "audio") { target.node.play(); } else if (target.nodeType === "webaudio") { stopAudio(n); target.sound.source = webAudioContext.createBufferSource(); target.sound.source.buffer = target.sound.buffer; target.sound.source.connect(webAudioContext.destination); if (target.sound.source.start) { target.sound.source.start(0); } else { target.sound.source.noteOn(0); // [iOS 6.x] } } } function stopAudio(n) { var target = stock[n]; if (target.nodeType === "audio") { if (target.node) { target.node.pause(); } } else if (target.nodeType === "webaudio") { if (target.sound.source) { if (target.sound.source.stop) { target.sound.source.stop(0); } else { target.sound.source.noteOff(0); // [iOS 6.x] } target.sound.source = null; } } } var lime = 80; function _ready() { lime += 32; document.body.style.cssText = "background-color: rgb(0, " + lime + ", 0)"; } </script> </body></html> ```