Fancy Audio Player With Playlist And Knob Controls - yoobee-audio

Una elegante aplicación de reproductor de audio con lista de reproducción y compatibilidad con controles personalizados, creada con jQuery, Font Awesome y jQuery knob plugin.

caracteristicas:

• Botón de control de volumen y indicador de progreso.
• Repetición basada en la fuente impresionante, retroceso, reproducción, pausa, botones de avance.
• Le permite agregar archivos de audio personalizados a la lista de reproducción.
• Fácil de eliminar archivos de audio de la lista de reproducción.

Cómo usarlo:

1. Incluya la hoja de estilo de Font Awesome y Audio Player necesaria en el encabezado de la página.

1	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css"

2	integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9"

3	crossorigin="anonymous">

4	<link rel="stylesheet" href="css/audioPlayer.css">

2. Cree el reproductor de audio con la lista de reproducción, cargando el indicador y los controles como estos.

01	<div id="audioPlayer">

02	<div id="audioVolDiv">

03	<input id="audioVol" type="text" name="audioVol" value="1">

04

</div>

05

06	<div id="audioProgDiv">

07	<input id="audioProg" type="text" name="audioProg">

08

</div>

09

10	<div id="audioProgStyleDiv">

11	<input id="audioProgStyle" type="text" name="audioProg-style">

12

</div>

13

14	<div id="controls">

15	<div id="repeatButton" data-repeat="none"><img src="img/repeat/repeat-none.svg"></div>

16	<div id="backButton" class="disabled"><i class="fas fa-step-backward"></i></div>

17	<div id="playButton"><i class="fas fa-play"></i></div>

18	<div id="pauseButton"><i class="fas fa-pause"></i></div>

19	<div id="skipButton"><i class="fas fa-step-forward"></i></div>

20

</div>

21

22	<div id="loadingDiv">

23	<img id="loadingAnim" src="img/loading.gif" alt="Loading">

24

</div>

25

26	<div id="playlistControl">

27	<div id="audioInputDiv">

28	<input id="audioInput" type="text" name="audioInput" placeholder="Direct Audio Stream URL (Direct URL to file download). mp3fiber.com can be used to get such a URL">

29	<div id="audioInputBtn"><i class="fas fa-plus"></i></div>

30

</div>

31	<div id="playlistView"></div>

32

</div>

33

</div>

3. Incluya la biblioteca jQuery, el complemento de mando jQuery y el JavaScript del reproductor de audio en la parte inferior de la página.

1	<script src="/path/to/jquery.min.js"></script>

2	<script src="/path/to/jquery.knob.min.js"></script>

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

4. Reemplaza la lista de reproducción predeterminada por la tuya.

01	playlist:[

02

{

03	localFile:"_EnV_ - Heaven.mp3",

04	hostedFile:"https://dl.dropboxusercontent.com/s/9pamibo40ycabe1/_EnV_%20-%20Heaven.mp3"

05

},

06

{

07	localFile:"ｉ ｎ ｔ ｅ ｒ ｓ ｐ ａ ｃ ｅ.mp3",

08	hostedFile:"https://dl.dropboxusercontent.com/s/p07gh6bur678t5t/%EF%BD%89%20%EF%BD%8E%20%EF%BD%94%20%EF%BD%85%20%EF%BD%92%20%EF%BD%93%20%EF%BD%90%20%EF%BD%81%20%EF%BD%83%20%EF%BD%85.mp3"

09

},

10

{

11	localFile:"Getting Stronger - Michelle Creber Black Gryph0n Baasik.mp3",

12	hostedFile:"https://dl.dropboxusercontent.com/s/mw28fr4lt64mhzt/Getting%20Stronger%20-%20Michelle%20Creber%20Black%20Gryph0n%20Baasik.mp3"

13

},

14

...

15

],

5. Puedes encontrar más opciones de configuración en el audioPlayer.js.

ver fuente

01

{

02	audio:null,

03	audioReady:false,

04	canPlay:false,

05	checkLoaded:null,

06

config:{

07	volumeKnob:{

08	angleArc:360,

09	displayInput:true,

10	displayPrevious:false,

11	width:"600",

12	height:"600",

13	thickness:.15,

14	fgColor:"rgb(0,0,175)",

15	bgColor:"black"

16

},

17	progKnob:{

18	thickness:.2,

19	width:"150",

20	readOnly:true,

21	cursor:"2.5",

22	fgColor:"black",

23	fontSize:"1.5em"

24

}

25

},

26	currentTrack:-1,

27	isBlink:undefined,

28	isChrome:undefined,

29	isEdge:undefined,

30	isFirefox:undefined,

31	isIE:undefined,

32	isOpera:undefined,

33	isPlaying:false,

34	isSafari:undefined,

35	maxTracks:undefined,

36	repeat:"none",

37	tickTen:null,

38

volume:1,

39

}