Trigger autoplay in mobile browsers

Question

As autoplay of audio/video in mobile browsers is not allowed, I'm trying to workaround the autoplay to work, but failed. I tried to bind the play() event to document.ready() and also with loadstart but nothing works. Below are my failed attempts

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', '<%= cloudinary_url(@audio.url, resource_type: "video") %>');

Attempt #1

$(document).ready(function() {
  ('.play').trigger('click');
});

$(document).on('click','.play', function(){
  audioElement.play();// this didn't worked
  $(".play").hide();
  $(".pause").show();
});

Attempt #2

$(document).ready(function() {
  audioElement.addEventListener('loadstart', function(){
    audioElement.play(); // this didn't worked too
    $(".play").hide();
    $(".pause").show();
  });
});

Any help will be greatly appreciated, Thanks!