Reproductor de audio limpio y fácil de usar con jQuery - AudioPlayer.js

Una biblioteca jQuery sencilla y ligera para crear reproductores de audio mínimos, limpios, sensibles y fáciles de tocar desde la <audio>etiqueta HTML5 .

Esta es una versión rediseñada  del complemento de reproductor de audio jQuery sensible y táctil .

Cómo usarlo:

1. Incrustar un archivo HTML5 auido en la página web.

1	<audio preload="auto" controls>

2	<source src="sample.mp3">

3

</audio>

4

5	<audio src="audio.wav" preload="auto" controls autoplay loop></audio>

6

7	...<br type="_moz">

2. Importe los archivos de jQuery library y jQuery AudioPlayer.js a la página.

1	<link rel="stylesheet" href="css/audioplayer.css">

2	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

3	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

4	crossorigin="anonymous">

5

</script>

6	<script src="js/audioplayer.js"></script>

3. Llame al plugin en la audioetiqueta.

1	$(function() {

2	$('audio').audioPlayer();

3

});

4. Eso es todo. El resultado html:

01	<div class="audioplayer">

02	<audio preload="auto" controlsstyle="width: 0px; height: 0px; visibility: hidden;">

03	<source src="example.mp3">

04

</audio>

05	<div class="audioplayer-playpause" title=""><a href="#"></a></div>

06	<div class="audioplayer-time audioplayer-time-current">00:00</div>

07	<div class="audioplayer-bar">

08	<div class="audioplayer-bar-loaded" style="width: 100%;"></div>

09	<div class="audioplayer-bar-played"></div>

10

</div>

11	<div class="audioplayer-time audioplayer-time-duration">00:56</div>

12	<div class="audioplayer-volume">

13	<div class="audioplayer-volume-button" title=""><a href="#"></a></div>

14	<div class="audioplayer-volume-adjust">

15

<div>

16	<div style="width: 100%;"></div>

17

</div>

18

</div>

19

</div>

20

</div>

5. Posibles opciones de plugin.

ver fuente

1	$('audio').audioPlayer({

2	classPrefix:'audioplayer',

3	strPlay:'',

4	strPause:'',

5	strVolume:''

6

});