JavaScript - Reproductor de musica

 
Vista:
Imágen de perfil de Felix
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Reproductor de musica

Publicado por Felix (9 intervenciones) el 05/03/2016 15:42:08
Saludos!

Bueno amigos la cuestión es que estoy intentando hacer que un reproductor funcione correctamente para una web que estoy montando.

Googleando conseguí un código que me es muy útil pero coloca la lista de reproducción en una lista ordenada. El detalle está en que necesito agregar un poco de diseño y algunas cosas más, cuando intento modificar la lista y convertirla en una tabla me presenta problemas.

Lo que descargue tiene varios archivos.

- /audiojs
- audio.min.js
- audiojs.swf
- jquery.js
- player-graphics.gif

- index.html

Les voy colocando el código original y como lo voy modificando.

Los importantes para modificar están en:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8"><title>audio.js</title>
    <meta content="width=device-width, initial-scale=0.6" name="viewport">
    <style>
      body {
	color: #666;
	font-family: sans-serif;
	line-height: 1.4;
	background-image: url();
	background-repeat: no-repeat;
		}
      h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
      h1 em { font-style: normal; color: #999; }
      a { color: #888; text-decoration: none; }
      #wrapper { width: 400px; margin: 40px auto; }
 
      ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
      ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
      ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
      li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
      li.playing a { color: #000; }
      li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
 
      #shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
      #shortcuts div { width: 460px; margin: 0px auto; }
      #shortcuts h1 { margin: 0px 0px 6px; }
      #shortcuts p { margin: 0px 0px 18px; }
      #shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
        -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
 
      @media screen and (max-device-width: 480px) {
        #wrapper { position: relative; left: -3%; }
        #shortcuts { display: none; }
      }
    </style>
	<script src="audiojs/jquery.js"></script>
    <script src="audiojs/audio.min.js"></script>
	<script>
      $(function() {
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });
 
        // Load in the first track
        var audio = a[0];
            first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);
 
        // Load in a track on click
        $('ol li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
        // Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
             // right arrow
          if (unicode == 39) {
            var next = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
            // spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });
    </script>
</head>
<body>
    <div id="wrapper">
      <h1>El título que corresponda/h1>
      <audio preload=""></audio>
      <ol>
        <li><a href="#" data-src="http://www.larutadelarchivo1.mp3">Tema 1. Autor</a></li>
        <li><a href="#" data-src="http://www.larutadelarchivo2.mp3">Tema 2. Autor</a></li>
		<li><a href="#" data-src="http://www.larutadelarchivo3.mp3">Tema 3. Autor</a></li>
        <li><a href="#" data-src="http://www.larutadelarchivo4.mp3">Tema 4. Autor</a></li>
        <img src="imagen.png" alt="Descripción de la imagen" height="375" width="500">
      </ol>
    </div>
    <div id="shortcuts">
      <div>
        <h1>Keyboard shortcuts:</h1>
        <p><em></em> Next track</p>
        <p><em></em> Previous track</p>
        <p><em>Space</em> Play/pause</p>
      </div>
    </div>
</body>
</html>

Aquí les coloco mi codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
include('../php/listarcanciones.php');
?>
<!DOCTYPE html>
<html>
<head>
	<meta name="description" content="" charset="UTF-8"/>
	<link rel="stylesheet" href="../css/estilo.css" type="text/css" />
 <script src="audiojs/jquery.js"></script>
    <script src="audiojs/audio.min.js"></script>
	<script>
      $(function() {
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
        });
 
        // Load in the first track
        var audio = a[0];
            first = $('td a').attr('data-src');
        $('td').first().addClass('playing');
        audio.load(first);
 
        // Load in a track on click
        $('td').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
      });
    </script>
</head>
<body>
    <section>
      <audio preload="false"></audio><br>
      <table>
    <?php foreach ($archivos as $archivo) {
echo
		"<tr>
                 <td id='sonado'><a href='#' data-src='directorio/$archivo'>$archivo</a></td>
                 <td><a href='directorio/$archivo'>descarga</a></td></tr>"
 ;}
    ?>
      </table>
	</section>
</body>
</html>

El problema está en que cuando intento dar click en el enlace de descarga se detiene la reproducción y no sucede nada.

A ese código pretendo colocar otros tipo de enlaces como para compartir en redes sociales cada track pero no he logrado avanzar.

Les agradezco cualquier ayuda que puedan darme.

PD: Adjunto el código que descargue y estoy reutilizando.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder