Html5 Player With Autoload Not Working

I am using this html5 audio player http://osvaldas.info/audio-player-responsive-and-touch-friendly I have problem with that. When i put there 'autoload' its not working and player

Solution 1:

I was trying to solve this issue since yesterday. Finally I have found that there is a bug in your audioPlayer plugin. I am not going to fix that, you can report on their plugin page.

The problem is when you add autoplay into your <audio> tag the browser starts playing the audio and also your plugin start the same. As a result you have played twice your track. You can fix this using the following method.

1. Remove autoplay from your <audio> tag.
2. Add $('.audioplayer-playpause').trigger('click'); after $( 'audio' ).audioPlayer();

P.S: The solution is only based on your audioPlayer plugin.

The final solution will be:

html5 code:

<audio preload="none" controls="" class="sppaudioplayer"id="spp-audio-player"><source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source></audio>

javascript code:

$( function()
{
    $( 'audio' ).audioPlayer();
    $('.audioplayer-playpause').trigger('click');
});

Working fiddle:http://jsfiddle.net/bcHsy/45/

Solution 2:

 <audio autoplay preload="auto" controls="" class="sppaudioplayer"id="spp-audio-player">
 <source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source>
</audio>

Try with above code. This will work fine. JQuery is not required to initiate audio player. HTML5 will take care of that.

Solution 3:

Also, as per the plugin script, you can add the "loop" attribute as shown below, to avoid getting it played two times.

<audio autoplay preload="auto" loop="" controls="" class="sppaudioplayer"id="spp-audio-player">
 <source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source>
</audio>