Funkcja zatrzymania dźwięku HTML5

Najpierw musisz ustawić id dla swojego elementu audio

W Twoim js:

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

var oldSrc = ply.src;// po prostu zapamiętać stare źródło

ply.src = "";// aby zatrzymać odtwarzacz, musisz wymienić źródło na nic

Oto mój sposób wykonania metody stop ():

Gdzieś w kodzie:

audioCh1: document.createElement("audio");

A następnie w stop():

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

W ten sposób nie tworzymy dodatkowego żądania, stare jest anulowane, a nasz element audio jest w stanie czystym (testowany w Chrome i FF): >

Z własnej funkcji javascript, aby włączyć odtwarzanie / pauza - ponieważ jestem obsługi strumienia radiowego, chciałem, aby wyczyścić bufor tak, że słuchacz nie kończy się wychodząc z synchronizacji ze stacją radiową.

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

Okazuje się, że samo wyczyszczenie currentTime nie tnie go pod chromem, potrzebne jest wyczyszczenie źródła i załadowanie go z powrotem. Mam nadzieję, że to pomoże.

Ta metoda działa:

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

Ale jeśli nie chcesz pisać tych dwóch linijek kodu za każdym razem, gdy zatrzymujesz dźwięk, możesz zrobić jedną z dwóch rzeczy. Drugi myślę, że jest bardziej odpowiedni i nie jestem pewien, dlaczego "bogowie standardów javascript" nie zrobili tego standardu.

Pierwsza metoda: Utwórz funkcję i przekaż dźwięk

function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
}

//then using it:
stopAudio(audio);

Druga metoda (preferowana): extend the Audio class:

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

Mam to w plik javascript nazwałem " AudioPlus.js", które umieszczam w moim html przed jakimkolwiek skryptem, który będzie miał do czynienia z dźwiękiem.

Następnie można wywołać funkcję stop na obiektach audio:

audio.stop();

Wreszcie problem CHROME z "canplaythrough":

Nie testowałem tego we wszystkich przeglądarkach, ale jest to problem, na który natknąłem się w Chrome. Jeśli spróbujesz ustawić currentTime na dźwięku, który ma podłączony odbiornik zdarzeń "canplaythrough", uruchomisz to zdarzenie ponownie, które może prowadzić do niepożądanych rezultatów.

Tak więc rozwiązaniem, podobnie jak we wszystkich przypadkach, gdy masz dołączony detektor zdarzeń, który naprawdę chcesz się upewnić, że nie zostanie ponownie uruchomiony, jest usunięcie detektora zdarzeń po pierwszym wywołaniu. Coś takiego:

//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:

Zauważ, że możesz dodać jeszcze więcej niestandardowych metod do klasy Audio(lub dowolnej natywnej klasy javascript).

Na przykład, jeśli potrzebujesz metody "restart", która zrestartowała audio może wyglądać tak:

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

Na marginesie, a ponieważ ostatnio używałem metody stop podanej w zaakceptowanej odpowiedzi, zgodnie z tym linkiem:

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

Poprzez ręczne ustawienie currentTime można uruchomić Zdarzenie 'canplaythrough' na elemencie audio. W linku jest mowa o Firefoksie, ale napotkałem to zdarzenie po ręcznym ustawieniu currentTime na Chrome. Więc jeśli masz zachowanie związane z tym wydarzeniem, możesz kończy się w pętli audio.

Miałem ten sam problem. Stop powinien zatrzymać strumień i onplay przejść do live , jeśli jest to radio. Wszystkie rozwiązania jakie widziałem miały wadę :

• player.currentTime = 0 ciągle pobiera strumień.
• player.src = '' raise error event

Moje rozwiązanie:

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

I HTML

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>

Shamangeorge napisał (a):

Poprzez ręczne ustawienie currentTime można uruchomić Zdarzenie 'canplaythrough' na elemencie audio.

To rzeczywiście się stanie, a pauzowanie spowoduje również zdarzenie pause, które sprawi, że ta technika nie będzie odpowiednia do użycia jako metoda "stop". Co więcej, ustawienie src zgodnie z sugestią zaki sprawi, że gracz spróbuje załadować adres URL bieżącej strony jako plik multimedialny (i nie powiedzie się), jeśli autoplay jest włączone - ustawienie src na null nie jest dozwolone; zawsze będzie traktowany jako adres URL. Poza zniszczeniem obiektu gracza wydaje się, że nie ma dobrego sposobu na zapewnienie metody "stop", więc sugerowałbym po prostu upuszczenie dedykowanego przycisku stop i zapewnienie zamiast tego przycisków pauzy i pominięcia Wstecz - przycisk stop tak naprawdę nie dodałby żadnej funkcjonalności.

To podejście jest "brute force" , ale działa zakładając, że używanie jQuery jest "dozwolone". Otocz swoje tagi "player" <audio></audio> div (tutaj z id "plHolder").

<div id="plHolder">
     <audio controls id="player">
     ...
     </audio>
<div>

Wtedy ten javascript powinien działać:

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

Uważam, że dobrze byłoby sprawdzić, czy dźwięk jest odtwarzany i zresetować właściwość currentTime.

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

Dla mnie ten kod działa dobrze. (IE10+)

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

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
    standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

To, co lubię robić, to całkowicie usunąć sterowanie za pomocą Angular2, a następnie przeładować, gdy następny utwór ma ścieżkę dźwiękową:

<audio id="audioplayer" *ngIf="song?.audio_path">

Następnie, gdy chcę go rozładować w kodzie, robię to:

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

Kiedy przypisany jest następny utwór, Kontrola zostaje całkowicie odtworzona od zera:

this.song = this.songOnDeck;

Prostym sposobem obejścia tego błędu jest złapanie błędu.

AudioElement.play () zwraca obietnicę, więc poniższy kod zcatch () powinno wystarczyć:

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

Uwaga: w celu zachowania kompatybilności wstecznej możesz zastąpić funkcję arrow funkcją anonimową.