Playing music on iOS devices

Design help Custom code
1

Hey guys!

Spent quite some time figuring out how to play background videos on all mobile devices, especially iPhone. Finally it works, but my equilibrium is not complete cause I can’t make the music play upon a click on my “headphone-play-pause” button.

Works everywhere apart from iOS and I don’t understand why. It’s not an auto play so I don’t think I’m breaking a policy.

Here is my Site and a Share Link

Would really appreciate your help! :webflow_heart:

Below is a custom code I’m using

<style>
 #demo {
width: 60px;
height: 60px;
outline: none;
   }
</style>

<button onclick="Play()" id="demo"></button>

<audio id="player" playsinline>
 <source src="https://s3.eu-central-1.amazonaws.com/radmitry/Yoshio_Chino-We_Pray_For_Japan.mp3">
 </audio>

<script>
var audio = document.getElementById("player");
audio.volume = 0.5;
var butn = document.getElementById("demo");
butn.style.background = "url(https://uploads-ssl.webflow.com/5acdf398c6f3e7252e9a31b9/5ad9f901d9a651ff58dad03b_play.svg) no-repeat";

function Play() {
   if(audio.paused) {
           audio.play();
           butn.style.background = "url(https://uploads-ssl.webflow.com/5acdf398c6f3e7252e9a31b9/5ad9f8b88fb8e56097aa04ca_pause.svg) no-repeat";
}

else {
          audio.pause();
           butn.style.background = "url(https://uploads-ssl.webflow.com/5acdf398c6f3e7252e9a31b9/5ad9f901d9a651ff58dad03b_play.svg) no-repeat";
          }
  }

</script>