Função de parada de áudio HTML5

Eu estou jogando um pequeno clipe de áudio no clique de cada link na minha navegação

Código HTML:

 

Código JS:

 $('#links a').click(function(e) { e.preventDefault(); var beepOne = $("#beep-one")[0]; beepOne.play(); }); 

Está funcionando bem até agora.

Problema é quando um clipe de som já está em execução e clico em qualquer link nada acontece.

Tentei parar o som que já está sendo reproduzido ao clicar no link, mas não há evento direto para isso na API de áudio do HTML5

Eu tentei seguir o código, mas não está funcionando

 $.each($('audio'), function () { $(this).stop(); }); 

Alguma sugestão por favor?

    em vez de stop() você poderia tentar:

     sound.pause(); sound.currentTime = 0; 

    isso deve ter o efeito desejado

    primeiro você tem que definir um id para o seu elemento de áudio

    no seu js:

    var ply = document.getElementById('player');

    var oldSrc = ply.src; // só para lembrar a velha fonte

    ply.src = ""; // para parar o jogador você tem que replace a fonte com nada

    Aqui está a minha maneira de fazer o método stop ():

    Em algum lugar no código:

     audioCh1: document.createElement("audio"); 

    e depois no stop ():

     this.audioCh1.pause() this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA='; 

    Desta forma, não produzimos pedidos adicionais, o antigo é cancelado e o nosso elemento de áudio está no estado limpo (testado no Chrome e no FF):>

    Da minha própria function javascript para alternar Play / Pause – já que estou manipulando um stream de rádio, eu queria que ele limpasse o buffer para que o ouvinte não acabasse saindo de sincronia com a estação de rádio.

     function playStream() { var player = document.getElementById('player'); (player.paused == true) ? toggle(0) : toggle(1); } function toggle(state) { var player = document.getElementById('player'); var link = document.getElementById('radio-link'); var src = "http://192.81.248.91:8159/;"; switch(state) { case 0: player.src = src; player.load(); player.play(); link.innerHTML = 'Pause'; player_state = 1; break; case 1: player.pause(); player.currentTime = 0; player.src = ''; link.innerHTML = 'Play'; player_state = 0; break; } } 

    Acontece que, apenas limpando o currentTime não o corta no Chrome, precisava limpar a fonte também e carregá-la de volta. Espero que isso ajude.

    Este método funciona:

     audio.pause(); audio.currentTime = 0; 

    Mas se você não quiser escrever essas duas linhas de código toda vez que interromper um áudio, você poderá fazer uma de duas coisas. O segundo eu acho que é o mais adequado e não tenho certeza porque os “deuses dos padrões de javascript” não fizeram este padrão.

    Primeiro método: crie uma function e passe o áudio

     function stopAudio(audio) { audio.pause(); audio.currentTime = 0; } //then using it: stopAudio(audio); 

    Segundo método (favorecido): estender a class de áudio:

     Audio.prototype.stop = function() { this.pause(); this.currentTime = 0; }; 

    Eu tenho isso em um arquivo javascript eu chamei “AudioPlus.js”, que incluo no meu html antes de qualquer script que vai lidar com áudio.

    Então você pode chamar a function de parada em objects de áudio:

     audio.stop(); 

    FINALMENTE O CHROME EMISSOR COM “canplaythrough”:

    Eu não testei isso em todos os navegadores, mas este é um problema que me deparei no Chrome. Se você tentar definir currentTime em um áudio que tenha um ouvinte de evento “canplaythrough” anexado a ele, você ativará esse evento novamente, o que pode levar a resultados indesejáveis.

    Portanto, a solução, semelhante a todos os casos em que você anexou um ouvinte de evento que realmente deseja garantir que ele não seja acionado novamente, é remover o ouvinte de evento após a primeira chamada. Algo assim:

     //note using jquery to attach the event. You can use plain javascript as well of course. $(audio).on("canplaythrough", function() { $(this).off("canplaythrough"); // rest of the code ... }); 

    BÔNUS:

    Observe que você pode adicionar ainda mais methods personalizados à class Audio (ou qualquer class javascript nativa para esse assunto).

    Por exemplo, se você quisesse um método de “reinício” que reiniciasse o áudio, poderia ser algo como:

     Audio.prototype.restart= function() { this.pause(); this.currentTime = 0; this.play(); }; 

    Como uma nota lateral e porque eu estava usando recentemente o método stop fornecido na resposta aceita, de acordo com este link:

    https://developer.mozilla.org/pt-BR/docs/Web/Guide/Events/Media_events

    definindo currentTime manualmente pode-se triggersr o evento ‘canplaythrough’ no elemento de áudio. No link menciona o Firefox, mas eu encontrei esse evento triggersndo depois de configurar o currentTime manualmente no Chrome. Portanto, se você tiver um comportamento associado a esse evento, poderá acabar em um loop de áudio.

    shamangeorge escreveu:

    definindo currentTime manualmente pode-se triggersr o evento ‘canplaythrough’ no elemento de áudio.

    Isto é, de fato, o que acontecerá, e pausar também irá desencadear o evento de pause , ambos os quais tornam esta técnica inadequada para uso como um método “stop”. Além disso, definir o src como sugerido por zaki fará com que o player tente carregar o URL da página atual como um arquivo de mídia (e falhar) se a autoplay estiver ativada – não é permitido definir src como null ; será sempre tratado como um URL. Longe de destruir o object jogador, parece não haver uma boa maneira de fornecer um método de “parada”, então eu sugiro apenas soltar o botão de parada dedicado e fornecer botões de pausa e retrocesso – um botão de parada não adicionaria nenhuma funcionalidade .

    Eu estava tendo o mesmo problema. Uma parada deve parar o stream e ir viver se for um rádio. Todas as soluções que vi tiveram uma desvantagem :

    • player.currentTime = 0 continua baixando o stream.
    • player.src = '' aumentar evento de error

    Minha solução:

     var player = document.getElementById('radio'); player.pause(); player.src = player.src; 

    E o HTML

      

    Essa abordagem é “força bruta”, mas funciona assumindo que o uso do jQuery seja “permitido”. Coloque as tags seu “player” em um div (aqui com um id de “plHolder”).

     

    Então este javascript deve funcionar:

     function stopAudio() { var savePlayer = $('#plHolder').html(); // Save player code $('#player').remove(); // Remove player from DOM $('#FlHolder').html(savePlayer); // Restore it } 

    Eu acredito que seria bom verificar se o áudio está jogando estado e redefinir a propriedade currentTime.

     if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) { sound.currentTime = 0; } sound.play(); 

    para mim esse código está funcionando bem. (IE10 +)

     var Wmp = document.getElementById("MediaPlayer"); Wmp.controls.stop(); ... 

    Espero que esta ajuda.

    O que eu gosto de fazer é remover completamente o controle usando Angular2, então ele é recarregado quando a próxima música tiver um caminho de áudio:

      

    Então quando eu quero descarregar no código eu faço isso:

     this.song = Object.assign({},this.song,{audio_path: null}); 

    Quando a próxima música é atribuída, o controle é completamente recriado do zero:

     this.song = this.songOnDeck; 

    A maneira simples de contornar este erro é pegar o erro.

    audioElement.play () retorna uma promise, portanto, o código a seguir com um .catch () deve ser suficiente para gerenciar este problema:

     function playSound(sound) { sfx.pause(); sfx.currentTime = 0; sfx.src = sound; sfx.play().catch(e => e); }