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/

回答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/

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

回答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>

来源：https://stackoverflow.com/questions/36691696/html5-player-with-autoload-not-working