I have this vue template embedded in my html form

<template>

    <audio  style= "display: none" id="player" controls>
        <source src="/audio/Bob_Marley_One_Love_Edited.ogg" type="audio/ogg">
        <source src="/audio/Bob_Marley_One_Love_Edited.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <button v-on:click="play_or_pause"  type="button" class="btn btn-warning" id="musicBtn">
        <svg xmlns="; width="50" height="50" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
            <path
                v-if="play"
                v-bind:d="play_btn"/>

            <path
                v-else
                v-bind:d="pause_btn"/>
        </svg>
    </button>
</template>

<script>
    export default {
        mounted() {
            console.log('audio component mounted')
        },
        name: "AudioComponent",

        data() {
            return {
                pause_btn: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5m3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5",
                play_btn: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z",
                play: true,
            }
        },

        methods: {

            play_or_pause() {
                this.play = !this.play
                var player = document.getElementById('player');
                if (!this.play) {
                    player.play();
                } else {
                    player.pause();
                }

            }
        }
    }
</script>

<style>
#musicBtn
    {
        border-radius: 50%;
        width: 75px;
        height: 75px;
    }

</style>

Now this vue component works fine for all browser except on a iPhone i tried with multiple different iPhones and the button to play the audio tag doesn't work at all, on Andriod, Windows it works fine, having done some research it seems it is by Apple design to not allow any play back of audio or video without some user click or interaction so there's nothing wrong with my code; But is there a work around for this to get the audio to play on iPhone I even tried directly inserting audio tags but still the tag shows up I click on play no sound but on any other device it works just fine any help would be appreciated.