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 parar um áudio, poderá fazer uma de duas coisas. O segundo, eu acho que é o mais apropriado, e não sei por que os "deuses dos padrões javascript" não fizeram esse padrão.
Primeiro método: crie uma função e passe o áudio
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
//then using it:
stopAudio(audio);
Segundo método (preferido): estenda a classe Audio:
Audio.prototype.stop = function() {
this.pause();
this.currentTime = 0;
};
Eu tenho isso em um arquivo javascript chamado "AudioPlus.js", que incluo no meu html antes de qualquer script que lide com áudio.
Em seguida, você pode chamar a função de parada em objetos de áudio:
audio.stop();
QUESTÃO FINAL DO CHROME COM "canplaythrough":
Não testei isso em todos os navegadores, mas esse é um problema que encontrei no Chrome. Se você tentar definir currentTime em um áudio que tenha um ouvinte de evento "canplaythrough" conectado a ele, você acionará 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 métodos personalizados à classe Audio (ou qualquer classe javascript nativa).
Por exemplo, se você quiser um método "restart" que reinicie o áudio, ele pode ser algo como:
Audio.prototype.restart= function() {
this.pause();
this.currentTime = 0;
this.play();
};