質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
howler.js

howler.jsは、非依存型で軽量なJavaScriptオーディオライブラリです。Web向けにオーディオの再生・各種操作を提供します。クロスプラットフォームで動作し、コーデックのサポートなどの特徴を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

1779閲覧

IEでサウンドの遅延が発生する

kina9876

総合スコア8

howler.js

howler.jsは、非依存型で軽量なJavaScriptオーディオライブラリです。Web向けにオーディオの再生・各種操作を提供します。クロスプラットフォームで動作し、コーデックのサポートなどの特徴を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2017/04/14 07:39

編集2022/01/12 10:55

###IEで音の遅延がないようにしたい
Howler.jsを使い、IEでサウンドの再生をさせていますが、短い時間に大量の音がなると遅延が発生します。
Chrome,Firefoxでは発生せずIEでのみ発生します。
IEのバージョンは11です。

###該当のソースコード
公式から出ているspiriteサンプルを変更し、キーボードで連続再生出来るようにしたコードです。
Z,X,C,Vがそれぞれspriteされた音源を連続で10回鳴らすように指定しました。

Javascript

1/*! 2 * Howler.js Audio Sprite Demo 3 * howlerjs.com 4 * 5 * (c) 2013-2017, James Simpson of GoldFire Studios 6 * goldfirestudios.com 7 * 8 * MIT License 9 */ 10 11// Cache references to DOM elements. 12var elms = ['waveform', 'sprite0', 'sprite1', 'sprite2', 'sprite3', 'sprite4']; 13elms.forEach(function(elm) { 14 window[elm] = document.getElementById(elm); 15}); 16 17/** 18 * Sprite class containing the state of our sprites to play and their progress. 19 * @param {Object} options Settings to pass into and setup the sound and visuals. 20 */ 21var Sprite = function(options) { 22 var self = this; 23 24 self.sounds = []; 25 26 // Setup the options to define this sprite display. 27 self._width = options.width; 28 self._left = options.left; 29 self._spriteMap = options.spriteMap; 30 self._sprite = options.sprite; 31 self.setupListeners(); 32 33 // Create our audio sprite definition. 34 self.sound = new Howl({ 35 src: options.src, 36 sprite: options.sprite 37 }); 38 // Setup a resize event and fire it to setup our sprite overlays. 39 window.addEventListener('resize', function() { 40 self.resize(); 41 }, false); 42 self.resize(); 43 44 // Begin the progress step tick. 45 requestAnimationFrame(self.step.bind(self)); 46}; 47Sprite.prototype = { 48 /** 49 * Setup the listeners for each sprite click area. 50 */ 51 setupListeners: function() { 52 var self = this; 53 var keys = Object.keys(self._spriteMap); 54 keys.forEach(function(key) { 55 window[key].addEventListener('click', function() { 56 self.play(key); 57 }, false); 58 }); 59 }, 60 61 /** 62 * Play a sprite when clicked and track the progress. 63 * @param {String} key Key in the sprite map object. 64 */ 65 play: function(key) { 66 console.log("play"); 67 var self = this; 68 var sprite = self._spriteMap[key]; 69 70 // Play the sprite sound and capture the ID. 71 var id = self.sound.play(sprite); 72 73 // Create a progress element and begin visually tracking it. 74 var elm = document.createElement('div'); 75 elm.className = 'progress'; 76 elm.id = id; 77 elm.dataset.sprite = sprite; 78 window[key].appendChild(elm); 79 self.sounds.push(elm); 80 81 // When this sound is finished, remove the progress element. 82 self.sound.once('end', function() { 83 var index = self.sounds.indexOf(elm); 84 if (index >= 0) { 85 self.sounds.splice(index, 1); 86 window[key].removeChild(elm); 87 } 88 }, id); 89 }, 90 91 /** 92 * Called on window resize to correctly psotion and size the click overlays. 93 */ 94 resize: function() { 95 var self = this; 96 // Calculate the scale of our window from "full" size. 97 var scale = window.innerWidth / 3600; 98 99 // Resize and reposition the sprite overlays. 100 var keys = Object.keys(self._spriteMap); 101 for (var i=0; i<keys.length; i++) { 102 var sprite = window[keys[i]]; 103 sprite.style.width = Math.round(self._width[i] * scale) + 'px'; 104 if (self._left[i]) { 105 sprite.style.left = Math.round(self._left[i] * scale) + 'px'; 106 } 107 } 108 }, 109 110 /** 111 * The step called within requestAnimationFrame to update the playback positions. 112 */ 113 step: function() { 114 var self = this; 115 116 // Loop through all active sounds and update their progress bar. 117 for (var i=0; i<self.sounds.length; i++) { 118 var id = parseInt(self.sounds[i].id, 10); 119 var offset = self._sprite[self.sounds[i].dataset.sprite][0]; 120 var seek = (self.sound.seek(id) || 0) - (offset / 1000); 121 self.sounds[i].style.width = (((seek / self.sound.duration(id)) * 100) || 0) + '%'; 122 } 123 requestAnimationFrame(self.step.bind(self)); 124 125 document.onkeydown = function(e){ 126 console.log(e.keyCode); 127 switch(e.keyCode){ 128 //A 129 case 65: 130 console.log("A!"); 131 self.sound.play("one"); 132 break; 133 //S 134 case 83: 135 self.sound.play("two"); 136 break; 137 //D 138 case 68: 139 self.sound.play("three"); 140 break; 141 //F 142 case 70: 143 self.sound.play("four"); 144 break; 145 //G 146 case 71: 147 self.sound.play("five"); 148 break; 149 //Z 150 case 90: 151 self.playtest("one"); 152 break; 153 //X 154 case 88: 155 self.playtest("two"); 156 break; 157 //C 158 case 67: 159 self.playtest("three"); 160 break; 161 //V 162 case 86: 163 self.playtest("four"); 164 break; 165 //Q 166 case 81: 167 self.sound.play("one"); 168 self.sound.play("two"); 169 self.sound.play("three"); 170 self.sound.play("four"); 171 self.sound.play("five"); 172 break; 173 case 87: 174 self.playAllTest(); 175 break; 176 } 177 } 178 }, 179 180 playtest: function(name) { 181 var count = 0; 182 var self = this; 183 184 var interval = setInterval(function(){ 185 console.log(count); 186 count++; 187 self.sound.play(name); 188 if(count == 10){ 189 clearInterval(interval); 190 } 191 },100); 192 }, 193 194 playAllTest: function() { 195 var count = 0; 196 var self = this; 197 198 var inter = setInterval(function(){ 199 switch (count) { 200 case 0: 201 self.sound.play("one"); 202 break; 203 case 1: 204 self.sound.play("two"); 205 break; 206 case 2: 207 self.sound.play("three"); 208 break; 209 case 3: 210 self.sound.play("four"); 211 break; 212 case 4: 213 self.sound.play("five"); 214 break; 215 } 216 count++; 217 console.log(count); 218 if(count == 5) { 219 clearInterval(inter); 220 } 221 },1000); 222 } 223 224}; 225 226// Setup our new sprite class and pass in the options. 227var sprite = new Sprite({ 228 width: [78, 60, 62, 70, 62, 1895], 229 left: [0, 342, 680, 1022, 1361], 230 src: ['../../tests/audio/sound2.mp3'], 231 sprite: { 232 one: [0, 450], 233 two: [2000, 250], 234 three: [4000, 350], 235 four: [6000, 380], 236 five: [8000, 340], 237 beat: [10000, 11163] 238 }, 239 spriteMap: { 240 sprite0: 'one', 241 sprite1: 'two', 242 sprite2: 'three', 243 sprite3: 'four', 244 sprite4: 'five', 245 sprite5: 'beat', 246 } 247}); 248 249

###試したこと
別ファイルを読み込むのが原因かと思い、同じファイルを分割したのでも試してみましたが、結果は同じでした。
また、サウンドの遅延が発生するタイミングでHTTP通信のGETが走っているので、そこがネックになっているかと思い調査中ですが、今のところ原因がわかっていません。
同じPCの別ブラウザ(Chrome,Firefox)では遅延とHTTP通信は発生しません。

###補足情報(言語/FW/ツール等のバージョンなど)
言語:Javascript
ライブラリ: Howler.js v2.0.3

実行環境はMacで python -m SimpleHTTPServer 8888 を使い、外部から見れるようにして、Windowsでアクセスさせています。
通信のログはこちらです。

[14/Apr/2017 15:57:22] "GET /howler.js-master/tests/audio/sound2.mp3 HTTP/1.1" 200 -

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問