CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-audio
Mohammad Umer
Mohammad Umer

Reputation: 534

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 play two time.

Here is html5 code:

 <audio autoplay="autoplay" 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>

Here is javascript code:

 $( function()
    {
        $( 'audio' ).audioPlayer();
    });

Here is fiddle: http://jsfiddle.net/bcHsy/40/

Upvotes: 0

Views: 415

Answers (3)

Siddiqui Noor
Siddiqui Noor

Reputation: 7996

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/

Upvotes: 1

Luke P. Issac
Luke P. Issac

Reputation: 1591

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>

Upvotes: 0

Saravanan
Saravanan

Reputation: 11

 <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.

Upvotes: 1

Related Questions