Image sequence which plays in sync with a sound file on a play/pause button click. Both start as paused and when clicked play in a loop - sequence

Question

the problem with the script I have is it starts out playing and then pauses when button is pressed I need the opposite. Plus I need the sound to be in sync with the length of the images in the array and both the image sequence and the sound file should play in a loop and start out as paused and play when the button is pressed.
HTML
<div>
<button id="bt1" onclick="togglePlay();toggle()"></button>
</div>
<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
let
loop,
index = 0,
images = [
"cat/1.svg", "cat/2.svg", "cat/3.svg", "cat/4.svg", "cat/5.svg", "cat/6.svg", "cat/7.svg", "cat/8.svg",
"cat/9.svg", "cat/10.svg", "cat/11.svg", "cat/12.svg", "cat/13.svg", "cat/14.svg", "cat/15.svg", "cat/16.svg",
"cat/17.svg", "cat/18.svg"
];
function startLoop() {
loop = setInterval(() => {
document.querySelector('img').src = images[index];
index++;
// Loop images array
if (index % images.length === 0) {
index = 0;
}
}, 100);
}
function toggle() {
if (loop) {
clearInterval(loop);
loop = null;
} else {
startLoop();
}
}
startLoop();
function togglePlay() {
isPlaying ? myAudio.pause() : myAudio.play();
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
</script>