Bootstrap 4 Audio Player con lista de reproducción - jQuery audioPlayer.js

Este es un complemento de reproductor de audio mínimo y limpio con soporte para listas de reproducción, creado con la biblioteca jQuery, Bootstrap 4 framework, Material Icons y jQuery UI widget de control deslizante.

Cómo usarlo:

1. Incluya las bibliotecas de JavaScript y CSS necesarias en la página web.

1	<-- Stylesheets -->

2	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

3	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"crossorigin="anonymous">

4	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">

5

6	<-- JavaScript -->

7	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"crossorigin="anonymous"></script>

8	<script src="js/jquery-ui-slider.js"></script>

2. Incluir los archivos del reproductor de audio en la página web.

1	<link rel="stylesheet" href="css/audio-player.css">

2	<script src="js/audioPlayer.js"></script>

3. El marcado requerido para el reproductor de audio y la lista de reproducción.

ver fuente

01	<section class="audio-player card">

02	<div class="card">

03	<div class="card-body">

04	<h2 class="card-title col text-center">Bootstrap 4 Audio Playlist</h2>

05	<div class="row align-items-center mt-4 mb-3 mx-0">

06	<i id="play-button"class="material-icons play-pause text-primary mr-2" aria-hidden="true">play_circle_outline</i>

07	<i id="pause-button"class="material-icons play-pause d-none text-primary mr-2" aria-hidden="true">pause_circle_outline</i>

08	<i id="next-button"class="material-icons text-primary ml-2 mr-3" aria-hidden="true">skip_next</i>

09	<div class="col ml-auto rounded-circle border border-primary p-1">

10	<img id="thumbnail" class="img-fluid rounded-circle"src="https://lorempixel.com/400/400/cats/1" alt="">

11

</div>

12

</div>

13	<div class="p-0 m-0" id="now-playing">

14	<p class="font-italic mb-0">Now Playing: </p>

15	<p class="lead" id="title"></p>

16

</div>

17	<div class="progress-bar progress col-12 mb-3">

18

</div>

19

</div>

20	<ul class="playlist list-group list-group-flush">

21	<li audio_url="https://archive.org/download/TabbyCatPurr/Purring.ogg"

22	img_url="https://lorempixel.com/400/400/cats/1"

23	class="active list-group-item playlist-item">

24	Duis aute irure</li>

25	<li audio_url="https://archive.org/download/Purring_/AnxiousPurringmp3.ogg"

26	class="list-group-item playlist-item"

27	img_url="https://lorempixel.com/400/400/cats/4">

28	Dapibus ac facilisis in</li>

29	<li audio_url="https://archive.org/download/Anxious_Purring/AnxiousPurringmp3.ogg"

30	class="list-group-item playlist-item"

31	img_url="https://lorempixel.com/400/400/cats/3">

32	Vestibulum at eros</li>

33

</ul>

34

</div>

35	<audio id="audio-player" class="d-none" src="" type="audio/mp3" controls="controls"></audio>

</section>