Как повторять аудио-воспроизведение?

31 марта 2022, 08:10

Есть игра на Canvas HTML5 и нужно после прерывания воспроизведения повторять данное аудио постоянно. Пробовал с помощью location.reload(); ,но чуть с ума не сошел)))

Какие есть у вас идеи?

var game = document.getElementById('game');
var ctx = game.getContext('2d');
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowColor = "white";
ctx.shadowBlur = 200;
var supercell_loading = new Image();
var bg = new Image();
var supercell_loading_audio = new Audio();
var supercell_menu_audio = new Audio();
bg.src = 'style/brawl-stars-big-logo.jpg';
supercell_loading.src = 'style/LOGO_LOADING.PNG';
supercell_loading_audio.src = 'style/s.mp3';
supercell_menu_audio.src = 'style/meenu.mp3';
function supercell_loading_function() {
    supercell_loading_audio.play();
    ctx.drawImage(supercell_loading, 532, 238, 160, 130);  
}
function draw_menu() {
    supercell_menu_audio.play();
    ctx.drawImage(bg, 0, 0, 1292, 633);
    // 450 550 420 30
    ctx.beginPath();
    ctx.rect(450, 550, 420, 30);
    ctx.closePath();
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.stroke();
}
setTimeout(supercell_loading_function, 2000); //2000
setTimeout(draw_menu, 4000); //4000

Answer 1

Несложно заметить, что Canvas к вопросу никак не относится, всё дело в работе с Audio.

Попробуйте

myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

В старых браузерах может потребоваться обходной вариант:

myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();