HTML音頻播放導致iPhone中的閃爍

Question

我正在嘗試在node.js堆棧上創建一個使用Paper.js構建的簡單調諧器。

該調諧器在桌面瀏覽器上可以很好地工作，但是在iPhone或iPad上，單擊六個矩形（或字符串）之一會導致屏幕出現奇怪的閃爍： http : //morning-temple-9106.herokuapp.com/

我嘗試了這些與iPhone上的常規HTML閃爍有關的CSS修復程序，但是沒有運氣。

canvas {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

這是加載音頻的JS-我在調用playNote之前加載文件以加快播放速度。 即使在playNote中加載，也會發生閃爍。

var audioPlayerE = new Audio();
audioPlayerE.src="strings/E.mp3"
audioPlayerE.load();
var audioPlayerA = new Audio();
audioPlayerA.src="strings/A.mp3"
audioPlayerA.load();
var audioPlayerD = new Audio();
audioPlayerD.src="strings/D.mp3";
audioPlayerD.load();
var audioPlayerG = new Audio();
audioPlayerG.src="strings/G.mp3";
audioPlayerG.load();
var audioPlayerB = new Audio();
audioPlayerB.src="strings/B.mp3";
audioPlayerB.load();
var audioPlayerElittle = new Audio();
audioPlayerElittle.src="strings/Elittle.mp3";
audioPlayerElittle.load();

playNote = function(index,count) {
    var noteStr;
    if(index-count==0) {audioPlayerE.play()}
    if(index-count==1) {audioPlayerA.play()}
    if(index-count==2) {audioPlayerD.play()}
    if(index-count==3) {audioPlayerG.play()}
    if(index-count==4) {audioPlayerB.play()}
    if(index-count==5) {audioPlayerElittle.play()}
}

這是我的github回購： https : //github.com/dannycochran/cs184

Answer 1

從：

iPad Safari：點擊鏈接后如何禁用快速閃爍效果

沒意識到這只是一個閃爍的效果，將其添加到css中修復了它：

-webkit-tap-highlight-color: rgba(0,0,0,0);