Web Audio Api точное зацикливание в разных браузерах - PullRequest
Новая
       3

Web Audio Api точное зацикливание в разных браузерах

0 голосов
/ 14 февраля 2019

Итак, я хочу иметь постоянную смену циклов из разных аудиоисточников.Для демонстрации я сделал небольшую головоломку - вы выравниваете числа в порядке от 0 до 8 и в зависимости от того, как вы их выравниваете, играют разные лупы.Мне удалось получить желаемый результат в браузере Chrome, но не в Safari или Firefox.Я попытался добавить другое назначение аудио или несколько аудио-контекстов, но независимо от того, какой цикл просто останавливается после одной итерации в Safari и других браузерах, кроме Chrome.

Вот ссылка на демонстрацию на code-pen Демо-пазл с музыкой пожалуйста, выключите звук, поскольку музыка может быть слишком громкой, я не справился с этим.И вот основной код, который у меня есть для манипуляции с Web Audio Api.Спасибо * Также это не работает для мобильных устройств вообще. 

const AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
const audio1 = document.getElementById("aud1");
const audio2 = document.getElementById("aud2");
const audio3 = document.getElementById("aud3");
const audio4 = document.getElementById("aud4");
var chosenTrack = audio2;
let gameStarted = false;

function startGame() {
document.getElementById("sHold").style.display = "none";
document.getElementById("container").style.display = "block";

gameStarted = true;
audioContext.resume();
audioContext = new AudioContext();
audio1.pause();
audio1.play();
audio1.currentTime = 0;

}

setInterval(function() {

if (gameStarted) {
    //console.log(audioContext.currentTime );
    if (audioContext.currentTime >= 6.4) {
        audioContext = new AudioContext();
        chosenTrack.pause();
        chosenTrack.play();
        chosenTrack.currentTime = 0;
    }
}
}, 5);

1 Ответ

0 голосов
/ 14 февраля 2019

Некоторые мысли:

  • Вы на самом деле не используете Web Audio таким образом, вы все еще используете аудио элементы в качестве источника, который не помогает, если вы хотите иметь возможностьдля достижения точного времени.Вы должны загрузить их в AudioBuffers и воспроизводить их, используя AudioBufferSourceNode.

  • Если вы абсолютно хотите использовать аудиоэлементы (потому что файлы, которые вы используете, действительно массивны и вы хотите передавать их), вывероятно, хотите использовать свойство loop для него, хотя я сомневаюсь, что это окажется точным и без зазоров.

  • Никогда не используйте setInterval для получения обратного вызова в каждом кадре, используйте requestAnimationFrame

  • Не используйте setInterval ИЛИ requestAnimationFrame, чтобы получить точный звукЗацикливаясь, поток javascript не достаточно точен, чтобы сделать это, и его можно удерживать, когда другие вещи занимают немного больше времени, например, слишком много врагов на экране.Вы должны планировать заранее время от времени: https://www.html5rocks.com/en/tutorials/audio/scheduling/

  • AudioBufferSourceNodes имеет логическое свойство цикла, которое будет зацикливать их с максимально возможной точностью

  • ДелатьПоймите, что разные аудиодекодеры (а значит, разные браузеры) МОГУТ декодировать аудиофайлы немного по-разному: например, у некоторых может быть несколько мсек при запуске.Это может стать проблемой при использовании нескольких циклических AudioBufferSourceNodes, которые все могут быть не синхронизированы через x промежуток времени.Я всегда перепланирую что-то на необходимое время вместо использования свойства цикла.

...