Delayed AudioElement .play() when 'antialias = true' #288
Description
I have an html button, which I've added to the stage. When I click it to create and play an AudioElement, it works on most devices and systems without a hitch. However, I've noticed on certain iPads, the .play() is delayed significantly (sometimes up to 20 seconds before the audio starts playing). I've narrowed the culprit down to the stage option antialias = true.
The device in question is iPad model MD512LL/A, running v10.3.2.
Removing antialias = true fixes this issue.
Can you think of any reason why this option would affect audio playback on these devices?
Here's the code; I tried to simplify it as much as possible.
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
</style>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<div id="holder"></div>
</body>
</html>main.dart
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';
import 'dart:async';
html.AudioElement _audio;
StreamSubscription _audioSubscription;
void main() {
StageOptions options = new StageOptions()
..stageAlign = StageAlign.TOP
..stageScaleMode = StageScaleMode.SHOW_ALL
..inputEventMode = InputEventMode.MouseAndTouch
..renderEngine = RenderEngine.WebGL
..transparent = true
..antialias = true
..backgroundColor = Color.Transparent;
html.CanvasElement canvas = new html.CanvasElement()
..style.position = "absolute"
..style.width = "100%"
..style.height = "100%"
..style.margin = "0"
..style.padding = "0"
..style.overflow = "hidden";
html.querySelector("body").children.insert(0, canvas);
Stage stage = new Stage(canvas, width: 500, height: 500, options: options);
new RenderLoop()..addStage(stage);
new HtmlObject(html.querySelector("#holder"))..addTo(stage);
html.ButtonElement playBtn = new html.ButtonElement()
..text = "PLAY"
..onClick.listen(_handlePlayClicked);
html.document.querySelector("#holder").children.add(playBtn);
}
void _handlePlayClicked(html.Event event)
{
html.ButtonElement btn = event.target as html.ButtonElement;
_audioSubscription?.cancel();
_audio?.pause();
if (btn.text == "PLAY")
{
_audio = null;
_audio = new html.AudioElement("http://www.noiseaddicts.com/samples_1w72b820/55.mp3");
_audioSubscription = _audio.onEnded.listen((_){
btn.text = "PLAY";
});
_audio.play();
btn.text = "STOP";
}
else btn.text = "PLAY";
}