HTML5 Funzione di arresto audio

Sto riproducendo una piccola clip audio al clic di ciascun collegamento nella mia navigazione

Codice HTML:

 

Codice JS:

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

Funziona bene finora.

Il problema è quando una clip audio è già in esecuzione e io clic su qualsiasi link non succede nulla.

Ho provato a interrompere il suono già in riproduzione al clic del collegamento, ma non c’è alcun evento diretto per questo nell’API audio di HTML5

Ho provato a seguire il codice ma non funziona

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

Qualche suggerimento per favore?

invece di stop() puoi provare con:

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

questo dovrebbe avere l’effetto desiderato

per prima cosa devi impostare un id per il tuo elemento audio

nel tuo js:

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

var oldSrc = ply.src; // solo per ricordare la vecchia fonte

ply.src = ""; // per fermare il giocatore devi sostituire la sorgente con niente

Ecco il mio modo di fare il metodo stop ():

Da qualche parte nel codice:

 audioCh1: document.createElement("audio"); 

e poi in stop ():

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

In questo modo non produciamo richieste aggiuntive, il vecchio viene cancellato e il nostro elemento audio è pulito (testato in Chrome e FF):>

Dalla mia funzione javascript per triggersre Play / Pause – poiché sto gestendo un stream radio, volevo che cancellasse il buffer in modo che l’ascoltatore non finisse di sincronizzarsi con la stazione radio.

 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; } } 

È venuto fuori, basta liberare il tempo corrente non lo ha tagliato sotto Chrome, necessario per cancellare anche la sorgente e ricaricarla. Spero che questo aiuti.

Questo metodo funziona:

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

Ma se non vuoi scrivere queste due righe di codice ogni volta che interrompi un audio puoi fare una delle due cose. Il secondo penso sia il più appropriato e non sono sicuro del perché le “divinità degli standard javascript” non abbiano reso questo standard.

Primo metodo: crea una funzione e passa l’audio

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

Secondo metodo (preferito): estendere la class Audio:

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

Ho questo in un file javascript che ho chiamato “AudioPlus.js” che includo nel mio html prima di qualsiasi script che si occuperà di audio.

Quindi puoi chiamare la funzione stop sugli oggetti audio:

 audio.stop(); 

PROBLEMI FINALMENTE CROMATI CON “canplaythrough”:

Non ho provato questo in tutti i browser, ma questo è un problema che mi sono imbattuto in Chrome. Se provi a impostare currentTime su un audio che ha un listener di eventi “canplaythrough” associato, attiverete nuovamente quell’evento che può portare a risultati indesiderati.

Pertanto, la soluzione, simile a tutti i casi in cui è stato collegato un listener di eventi che si desidera veramente assicurarsi di non essere nuovamente triggersto, è quello di rimuovere il listener di eventi dopo la prima chiamata. Qualcosa come questo:

 //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 ... }); 

BONUS:

Nota che puoi aggiungere ancora più metodi personalizzati alla class Audio (o qualsiasi class javascript nativa per quella materia).

Ad esempio, se si desidera un metodo di “riavvio” che riavvia l’audio, potrebbe avere un aspetto simile:

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

Come nota a margine e perché recentemente stavo usando il metodo stop fornito nella risposta accettata, secondo questo link:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

impostando currentTime manualmente si può triggersre l’evento ‘canplaythrough’ sull’elemento audio. Nel link si parla di Firefox, ma ho riscontrato questo evento che si triggers dopo aver impostato currentTime manualmente su Chrome. Quindi se hai un comportamento collegato a questo evento potresti finire in un ciclo audio.

shamangeorge ha scritto:

impostando currentTime manualmente si può triggersre l’evento ‘canplaythrough’ sull’elemento audio.

Questo è davvero ciò che accadrà, e la pausa attiverà anche l’evento di pause , entrambi rendono questa tecnica inadatta per l’uso come metodo “stop”. Inoltre, impostando lo src come suggerito da zaki, il giocatore prova a caricare l’URL della pagina corrente come file multimediale (e fallisce) se la autoplay è abilitata – l’impostazione di src su null non è consentita; sarà sempre trattato come un URL. A parte distruggere l’object del giocatore, sembra che non ci sia un buon modo di fornire un metodo di “stop”, quindi suggerirei semplicemente di lasciare il pulsante di arresto dedicato e di mettere in pausa e saltare i pulsanti indietro – un pulsante di stop non aggiungerebbe alcuna funzionalità .

Stavo avendo lo stesso problema. Una fermata dovrebbe interrompere il stream e onplay andare a vivere se si tratta di una radio. Tutte le soluzioni che ho visto hanno avuto uno svantaggio :

  • player.currentTime = 0 continua a scaricare il stream.
  • player.src = '' error evento di error

La mia soluzione:

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

E l’HTML

  

Questo approccio è “forza bruta”, ma funziona assumendo che l’uso di jQuery sia “permesso”. Circonda tag “player” con un div (qui con un ID di “plHolder”).

 

Quindi questo javascript dovrebbe funzionare:

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

Credo che sarebbe bene controllare se l’audio è in riproduzione e ripristinare la proprietà currentTime.

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

per me quel codice funziona bene. (IE10 +)

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

Spero che questo aiuto.

Quello che mi piace fare è rimuovere completamente il controllo usando Angular2, quindi viene ricaricato quando il brano successivo ha un percorso audio:

  

Quindi quando voglio scaricarlo in codice faccio questo:

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

Quando viene assegnata la canzone successiva, il controllo viene ricreato completamente da zero:

 this.song = this.songOnDeck; 

Il modo più semplice per ovviare a questo errore è catturare l’errore.

audioElement.play () restituisce una promise, quindi il seguente codice con una .catch () dovrebbe essere sufficiente a gestire questo problema:

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