Saltar al contenido

javascript – ¿Cómo reproducir audio?

septiembre 24, 2021
apple touch icon@2

Fácil con Jquery

// establecer etiquetas de audio sin precarga

<audio class="my_audio" controls preload="none">
    <source src="https://stackoverflow.com/questions/9419263/audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// agrega jquery para cargar

$(".my_audio").trigger('load');

// escribe métodos para jugar y parar

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// decidir cómo controlar el audio

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

EDITAR

Para abordar la pregunta de @ stomy, así es como usarías este enfoque para jugar un lista de reproducción:

Pon tus canciones en un objeto:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

Utilice las funciones de activación y reproducción como antes:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

Cargue la primera canción de forma dinámica:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src="https://stackoverflow.com/questions/9419263/+ playlist[keys[0]] +" type="audio/mpeg">");

Restablezca la fuente de audio a la siguiente canción de la lista de reproducción, cuando finalice la canción actual:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

Ver aquí para ver un ejemplo de este código en acción.

close