Audio.play () вызывает небольшое отставание - PullRequest
0 голосов
/ 04 ноября 2018

Проблема: Я создал игру в стиле flappy-bird, используя Three.js. Каждый раз, когда я касаюсь экрана, звучит звук «хлопанья». Однако воспроизведение этого аудио вызывает крошечную задержку, которая делает игру менее плавной. Если я уберу звук, все лаги исчезнут. Отставание отображается только во время воспроизведения звука, а не во время воспроизведения звука.

Настройка звука: Сначала я настроил звук так:

var soundFly = new Audio();
soundFly.src = "https://dl.dropbox.com/s/tj7mxg26egzo4zx/flap.wav?dl=0";
soundFly.preload = "auto";

Далее я загружаю все аудио после запуска игры (при нажатии кнопки):

function loadAudio()
{
soundFly.play().then(function () {
   soundFly.pause()
   }).catch(function (e) {
            console.log("soundFly - " + e)
            });           
};

Затем, каждый раз, когда я касаюсь экрана, я играю звук:

this.soundFly.play().catch(function (e)     {
    console.log("soundFly - " + e)
})

Это прекрасно работает, но появляется крошечная задержка.

Rendering: Вот как я настраивал рендеринг сцены:

var clock = new THREE.Clock();
var delta=0;
clock.start(); //makes rendering timedependent

var render = function ()
{

delta = clock.getDelta();

//All movement is set using speed*delta

requestAnimationFrame(render);
renderer.render(scene, camera);
};

FPS: Я также проверил, как audio.play () влияет на FPS. Мой FPS устойчивый на уровне около 59. Но когда я воспроизводю аудио, FPS падает до 20-30, что, вероятно, и вызывает крошечную задержку (см. Рисунок):

Audio.play (), влияющий на FPS

Я проверил FPS, используя это:

console.log(1/delta);

А также вывод «flapp» на консоль при касании экрана.

Надеюсь, у кого-то есть объяснение этому!

С уважением, Йоаким

1 Ответ

0 голосов
/ 04 ноября 2018

Проблема в том, что вы используете аудио HTML5 для интерактивных звуковых эффектов. API не предназначен для этой цели. Вместо этого используйте основанные на Web Audio классы, такие как THREE.Audio или THREE.PositionalAudio, которые позволяют звуковые эффекты без задержки и соответствующего времени.

https://threejs.org/examples/#webaudio_timing

Также читайте следующее руководство для получения дополнительной информации. Там написано:

Время управляется с высокой точностью и низкой задержкой, что позволяет разработчикам писать код, который точно реагирует на события ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...