Jplayer playing audio causes error on Safari only for some audios

Question

I have the below script on my page that instantiates all the jplayers on page load and when the play button is clicked, the audio plays. But I am having a strange issue, that for some audios, the play button starts and suddenly stops without playing anything.

The issue is only on Mac devices and other IOS mobile devices

Below is my code that I'm using to play the audio files

<script>
    require(["jquery"], function($) {

    $(document).ready(function(){
        /*---Create a jplayer instance on click on the play image---*/

        var mediaDetailJson = '<?php echo json_encode($mediaDetail); ?>';
        mediaDetailJson = $.parseJSON(mediaDetailJson);

        $(".jp-play").on('click', function(e) {

            e.preventDefault();

            var jPlayerId = $(this).closest('.jp-audio').prev().attr('id');
            var counter = jPlayerId.replace(/[^\d]+/, '');
            counter = parseInt(counter);

            $("#"+jPlayerId).jPlayer({
                ready: function (event) {
                    $(this).jPlayer("setMedia", {
                        title: mediaDetailJson[counter]['title'],
                        mp3: mediaDetailJson[counter]['path']
                    });
                },
                play: function() { // To avoid multiple jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
                },
                swfPath: "https://www.voicebooking.com/js",

                nativeSupport: true,
                cssSelectorAncestor: "#jp_container_"+counter,
                wmode: "window",
                globalVolume: true,
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                volume: 1
            }).jPlayer("play");
        });
    });


    });


    function updateHeaderTitle(text){
        jQuery("#audio_heading_text").html(text);
        jQuery("#audio_product").val(text);

    }
</script>

I did some research and some people said that IOS not support playing audio files in document.ready so some user related event is required. Then I tried with the below script, but still no success.

<script>
    require(["jquery"], function($) {

    $(document).ready(function(){
        /*---Create a jplayer instance on click on the play image---*/

        var mediaDetailJson = '<?php echo json_encode($mediaDetail); ?>';
        mediaDetailJson = $.parseJSON(mediaDetailJson);

        $(".jp-play").on('click', function(e) {

            e.preventDefault();

            var jPlayerId = $(this).closest('.jp-audio').prev().attr('id');
            var counter = jPlayerId.replace(/[^\d]+/, '');
            counter = parseInt(counter);

            $("#"+jPlayerId).jPlayer({
                ready: function (event) {
                    $(this).jPlayer("setMedia", {
                        title: mediaDetailJson[counter]['title'],
                        mp3: mediaDetailJson[counter]['path']
                    });
                },
                play: function() { // To avoid multiple jPlayers playing together.
                    $(this).jPlayer("pauseOthers");
                },
                swfPath: "https://www.voicebooking.com/js",

                nativeSupport: true,
                cssSelectorAncestor: "#jp_container_"+counter,
                wmode: "window",
                globalVolume: true,
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true,
                remainingDuration: true,
                toggleDuration: true,
                volume: 1
            }).jPlayer("play");
        });
    });


    });


    function updateHeaderTitle(text){
        jQuery("#audio_heading_text").html(text);
        jQuery("#audio_product").val(text);

    }
</script>

Does anyone has any idea what I'm missing? On Mac device, Safari browser, I'm getting the below error:

Unhandled Promise Rejection: NotAllowedError (DOM Exception 35)

But only for the audios in problem.

Please help!