3

Tengo 3 canciones.

<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>

<ul>
  <li class="play" data-audio="1">cancion 1</li>
  <li  class="play" data-audio="2">cancion 2</li> 
  <li  class="play" data-audio="3">cancion 3</li>
</ul>

estas las reproduzco desde la lista anterior.

con la siguiente función hago el play / pausa

var whichAudio;

$(document).on('click', '.play', function() {

    whichAudio = $('#audio' + $(this).data('audio'));
    document.getElementById("reproductorcontroles").style.height = "45px";
    whichAudio[0].paused
    ? whichAudio[0].play() 
    : whichAudio[0].pause();
});

la variable whichAudio almacena el identificador de cada canción. ¿como puedo obtener el identificador de la canción que esta sonando para pasarla a otra función para trabajar con esa variable?

2 respuestas 2

2

Existen muchas formas de hacerlo. Me voy a limitar a mencionar 3:

  • Usando una variable global

    // Esta variable esta definida a nivel global, por ende
    // cualquier funcion definida a cualquier nivel puede 
    // acceder al valor de la misma
    currentAudio = false;
    function setCurrentAudio(audio) {
      currentAudio = audio;
    }
    function useCurrentAudio() {
      var audio = currentAudio;
      /* codigo */
    }
    
  • Creando una variable privada y definiendo todas las funciones que la consumen dentro del mismo scope (IIFE)

    (function() {
      // Esta variable esta definida dentro del contexto del IIFE
      // por lo que se la considera privada. 
      // Solo pueden acceder al varlo de la misma
      // todas aquellas funciones definida dentro del IIFE
      var currentAudio = false;
      function setCurrentAudio(audio) {
        currentAudio = audio;
      }
      function useCurrentAudio() {
        if (currentAudio) {
          /* codigo */
        }
      }
    })();
    
  • Creando un "servicio" a nivel global y consumiendo sus sus metodos (singleton pattern)

    var audioService = (function() {
      // Esta variable esta definida dentro del contexto del IIFE
      // por lo que se la considera privada. 
      // Solo pueden acceder al varlo de la misma
      // todas aquellas funciones definida dentro del IIFE
      var lastAudio = false;
    
      // Esta funcion es definida dentro del contexto del IIFE
      // por lo que se la considera privada.
      // Solo pueden ejecutarla todas las demas funciones
      // definidas dentro del IIFE
      function privateMethod() {
        /* ... codigo ... */
      }
    
      // Retornamos un objecto con los "metodos publicos" (API) del servicio
      return {
        play: function(audio) {
          /* .. codigo ... */
          privateMethod();
          lastAudio = audio;
        },
        getLastPlayed: function() {
          return lastAudio;
        }
      };
    })();
    
1

La variable whichAudio está en el ámbito global, quiere decir que lo puedes usar en otras funciones, tal como lo tienes.

He modificado un poco el código, evitando que se produzca un error al no iniciar la variable whichAudio

var whichAudio = null; // Variable global

$(document).on('click', '.play', function() {

    whichAudio = $('#audio' + $(this).data('audio'));
    whichAudio[0].paused
    ? whichAudio[0].play() 
    : whichAudio[0].pause();  
});


$(document).on('click', '#button', function(){  
  
  if (whichAudio !== null) {
    
    alert('Esta sonando la canción ' + whichAudio[0].id);
    
  } 
  
});
<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>

<ul>
  <li class="play" data-audio="1">cancion 1</li>
  <li  class="play" data-audio="2">cancion 2</li> 
  <li  class="play" data-audio="3">cancion 3</li>
</ul>
  
<button id="button">Que canción esta sonando ahora?</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.