How do I add a non svg element inside SVG viewport?

Question

So, in the following project, I want to make it so the circle starts moving forward and backwards after you press the play button, but I have no knowledge of JavaScript, so I had this idea to make it so the circle scale animation begins on click, and create an invisible circle grouped with the rest of the circle right infront of the play button so when you press the play button you also click on the circle and make the animation start, the problem is, I can't place the audio controls inside the SVG viewport, I tried an element called foreignObject but it didn't work either, here is the project
https://code.sololearn.com/W14Sv5T4Xo8k/?ref=app