Requires two clicks to play on iOS

Please advice what is the right way to unlock <audio> element on user gesture as required by iOS. I have the following in my code (shortened for brevity), works without a hitch on Android/Windows/MacOS, but on iOS requires two clicks.

    componentDidMount() {
        document.addEventListener('click', this.onPageClick);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.onPageClick);
    }

    onPageClick(e){
        const $el = $(e.target).closest('a[data-playable]');
        const url = $el.attr('href')
        
        if( $el.length ){ //check if a "playable" link was clicked
            e.preventDefault();
            this.play(url);
            return false;
        }
    }

    play(url) {
       const newState = {
            url,
            played: 0,
            loaded: 0,
            playing: true
        };
        this.setState(newState);
    }

[sarutole]

Adding autoplay="true" to <audio> element for iOS devices fixes the “two-clicks” issue. (By the way, currently the react-player demo also has this problem.)

fileConfig: {
     attributes: { autoPlay: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream }
},

[sangroya]

I also face the same issue and it’s work for me by setting the volume =0 for iphone as in iphone volume can’t be control via js