Controlar áudio HTML5 com jquery

Considerações iniciais

Esta postagem é para aqueles que são programadores e criam seus próprios players.

Neste tutorial, vamos ver como controlar o áudio com jQuery. Isso é útil se você está prestes a desenvolver um player personalizado ou um aplicativo dinâmico que faz uso de várias mídias de áudio e deseja controlá-las com eficiência a partir do seu script jQuery.

Vamos começar a programar?

Até onde podemos controlar?

Bem, podemos controlar quase todos os recursos que o player HTML5 padrão fornece como reproduzir / pausar / aumentar / diminuir volume, ativar / desativar mudo etc. e funcionalidades adicionais como parar, avançar / voltar, etc. Portanto, se você tiver N números de arquivos de áudio em uma única página, e em vez de deixar o usuário lidar com N players de áudio, você pode fornecer uma interface eficiente e controlar o que tocar / parar, etc, com o jQuery, e até mesmo criar seu próprio player.

A mídia de áudio:

Vamos usar o seguinte código como nosso código HTML5 para a mídia de áudio:

<audio class="audioDemo" controls preload="none"> 
   <source src="audio/pitbull.mp3" type="audio/mpeg">
   <source src="audio/music.ogg" type="audio/ogg">
</audio>

Mantivemos duas mídias, devido a problemas de compatibilidade em navegadores, para que uma alternativa seja carregada.

Carregando o áudio com jQuery:

Como você pode ver no código HTML5 acima, definimos a opção “preload” como “none”, o que significa que nenhuma informação sobre o arquivo de áudio será carregada no carregamento da página, nem o arquivo de áudio nem os metadados. Nós os faremos sozinhos do jQuery para aumentar o desempenho de carregamento da página. Vamos usar o seguinte código para carregar o áudio:

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

Também podemos adicionar ouvinte de evento para saber quando é carregado. No entanto, o evento será acionado imediatamente após os metadados carregados e o áudio começar a ser carregado. Mas não esperará até que o áudio carregue por completo, o que geralmente carrega sob demanda. Para fazer algo após o carregamento, use o seguinte código antes de acionar o evento de carregamento:

$(".audioDemo").bind("load",function(){
    $(".alert-success").html("Audio Loaded succesfully");
});

Reproduzir / Pausa / Parar Áudio:

Comece a reproduzir áudio e, para pausar, é bastante fácil de manusear. Basta ativar os eventos correspondentes conforme abaixo:

//starts playing
$(".audioDemo").trigger('play');
//pause playing
$(".audioDemo").trigger('pause');

No entanto, não há um evento pronto para interromper um áudio, portanto, será necessário fazer isso com a ajuda do evento ‘pause’ e outra propriedade chamada ‘currentTime’, que indica o tempo de reprodução atual. Aqui está o que vai fazer para parar:

function stopAudio(){
  //pause playing
  $(".audioDemo").trigger('pause');
  //set play time to 0
  $(".audioDemo").prop("currentTime",0);
}

Capacidade para frente / para trás:

O player HTML5 padrão não oferece essa facilidade, mas podemos facilmente criar essa funcionalidade com um pequeno código jQuery. Aqui está um pequeno código de exemplo para fazer isso:

//forward the music about 5 seconds
$(".audioDemo").prop("currentTime",$(".audioDemo").prop("currentTime")+5);
//backward the music about 5 seconds
$(".audioDemo").prop("currentTime",$(".audioDemo").prop("currentTime")-5);

Volume para mais / menos:

O player de áudio tem seu próprio “volume” corretamente, que pode ser controlado com o jQuery, conforme abaixo:

function volumeUp(){
    var volume = $(".audioDemo").prop("volume")+0.2;
    if(volume >1){
        volume = 1;
    }
    $(".audioDemo").prop("volume",volume);
}

function volumeDown(){
    var volume = $(".audioDemo").prop("volume")-0.2;
    if(volume <0){
        volume = 0;
    }
    $(".audioDemo").prop("volume",volume);
}

Precisamos continuar verificando se o volume atinge seu maior ou mínimo valor, caso contrário, o erro de exceção do JavaScript será lançado.

Mudo Ligado / Desligado:

Podemos desligar instantaneamente o áudio e ativar facilmente o nível de volume anterior com o uso da propriedade “silenciado”. Veja o código de exemplo abaixo, que realmente ativa o estado atual do mudo:

function toggleMuteAudio(){
    $(".audioDemo").prop("muted",!$(".audioDemo").prop("muted"));
}

Considerações finais:

Espero que este pequeno tutorial sobre o controle de áudio HTML5 com jQuery possa ajudá-lo a desenvolver aplicativos web orientados a áudio / música facilmente. Se você está tendo algum problema em executar qualquer exemplo ou com a demonstração, avise-me comentando aqui.

Fonte: http://codesamplez.com