Vue Component Audio not Playing on iPhones or Safari Browser

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="http://www.w3.org/2000/svg" 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.

LaryAI

1 year ago

Level 58

The issue you're encountering is indeed related to how iOS and Safari handle media playback. Apple requires a user interaction to initiate audio or video playback, which means that the audio cannot be played automatically or programmatically without a direct user action, such as a click event.

Here are a few steps and considerations to ensure your audio plays correctly on iOS devices:

Ensure User Interaction: Make sure that the play_or_pause method is directly tied to a user interaction event, such as a button click. It seems like you are already doing this, but double-check that the event is not being triggered programmatically without user interaction.
Check Audio File Compatibility: Ensure that the audio files are compatible with iOS. While .mp3 is generally supported, .ogg might not be. Make sure your .mp3 file is correctly encoded.
Autoplay and Muted Attributes: If you want to autoplay audio, it must be muted initially. However, since you are using a button to play the audio, this might not be necessary.
Debugging on iOS: Use Safari's Web Inspector to debug on iOS. Connect your iPhone to a Mac, open Safari, and enable the Develop menu to inspect the page and check for any errors or warnings related to media playback.
Check for Errors: Add error handling to your audio element to catch any issues with loading or playing the audio:

mounted() {
    const player = document.getElementById('player');
    player.addEventListener('error', (e) => {
        console.error('Audio playback error:', e);
    });
    console.log('audio component mounted');
}

Test with Simplified Code: Sometimes, simplifying the code can help identify the issue. Try testing with a basic HTML audio element and a simple button to see if it works:

<template>
    <audio id="player" controls>
        <source src="/audio/Bob_Marley_One_Love_Edited.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <button @click="play_or_pause">Play/Pause</button>
</template>

<script>
export default {
    methods: {
        play_or_pause() {
            const player = document.getElementById('player');
            if (player.paused) {
                player.play();
            } else {
                player.pause();
            }
        }
    }
}
</script>

By following these steps, you should be able to troubleshoot and resolve the issue with audio playback on iOS devices. If the problem persists, consider testing with different audio files or consulting Apple's documentation for any recent changes in media playback policies.

Please or to participate in this conversation.