HTML5 Audio-stopfunctie

Ik speel een klein audiofragment af wanneer ik op elke link in mijn navigatie klik

HTML-code:

<audio tabindex="0" id="beep-one" controls preload="auto" >
    <source src="audio/Output 1-2.mp3">
    <source src="audio/Output 1-2.ogg">
</audio>

JS-code:

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

Het werkt tot nu toe prima.

Het probleem is dat wanneer er al een geluidsclip actief is en ik op een link klik, er niets gebeurt.

Ik heb geprobeerd het reeds afgespeelde geluid te stoppen bij het klikken op de link, maar daar is geen directe gebeurtenis voor in HTML5’s Audio API

Ik heb de volgende code geprobeerd, maar het werkt niet

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

Heeft u suggesties alstublieft?

Antwoord 1, autoriteit 100%

In plaats van stop()zou je het kunnen proberen met:

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

Dit zou het gewenste effect moeten hebben.

Antwoord 2, autoriteit 8%

eerst moet je een id instellen voor je audio-element

in je js :

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

var oldSrc = ply.src;// gewoon om de oude bron te onthouden

ply.src = "";// om de speler te stoppen moet je de bron door niets vervangen

Antwoord 3, autoriteit 3%

Ik had hetzelfde probleem. Een stop moet de stream stoppen en onplay ga naar liveals het een radio is. Alle oplossingen die ik zag hadden een nadeel:

• player.currentTime = 0blijft de stream downloaden.
• player.src = ''verhoog errorevenement

Mijn oplossing:

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

En de HTML

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

Antwoord 4, autoriteit 3%

Hier is mijn manier om de stop()-methode uit te voeren:

Ergens in de code:

audioCh1: document.createElement("audio");

en dan in stop():

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

Op deze manier produceren we geen extra verzoek, wordt het oude geannuleerd en is ons audio-element in schone staat (getest in Chrome en FF):>

Antwoord 5, autoriteit 2%

Deze methode werkt:

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

Maar als u niet elke keer dat u een audio stopt deze twee regels code wilt schrijven, kunt u twee dingen doen. De tweede is volgens mij de meest geschikte en ik weet niet zeker waarom de “goden van javascript-standaarden” deze standaard niet hebben gemaakt.

Eerste methode: maak een functie en geef de audio door

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

Tweede methode (voorkeur): breid de audioklasse uit:

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

Ik heb dit in een javascript-bestand dat ik “AudioPlus.js” heb genoemd en dat ik in mijn html opneem vóór elk script dat met audio te maken heeft.

Dan kun je de stop-functie op audio-objecten aanroepen:

audio.stop();

EINDELIJK CHROME-PROBLEEM MET “canplaythrough”:

Ik heb dit niet in alle browsers getest, maar dit is een probleem dat ik tegenkwam in Chrome. Als u currentTime probeert in te stellen op een audio waaraan een “canplaythrough”-gebeurtenislistener is gekoppeld, activeert u die gebeurtenis opnieuw, wat tot ongewenste resultaten kan leiden.

Dus de oplossing, vergelijkbaar met alle gevallen waarin u een gebeurtenislistener hebt aangesloten en u er zeker van wilt zijn dat deze niet opnieuw wordt geactiveerd, is om de gebeurtenislistener na de eerste oproep te verwijderen. Zoiets als dit:

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

Houd er rekening mee dat u nog meer aangepaste methoden kunt toevoegen aan de Audio-klasse (of welke native javascript-klasse dan ook).

Als u bijvoorbeeld een “restart”-methode wilt die de audio opnieuw opstart, kan dit er ongeveer zo uitzien:

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

Antwoord 6

Van mijn eigen javascript-functie om Afspelen/Pauzeren in te schakelen – aangezien ik een radiostream aan het verwerken ben, wilde ik dat deze de buffer wist, zodat de luisteraar niet uit de pas loopt met het radiostation.

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

Het blijkt dat het wissen van de currentTime niet werkt onder Chrome, het was ook nodig om de bron te wissen en weer in te laden. Ik hoop dat dit helpt.

Antwoord 7

Als een kanttekening en omdat ik onlangs de stop-methode gebruikte in het geaccepteerde antwoord, volgens deze link:

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

door currentTime handmatig in te stellen kan men de ‘canplaythrough’-gebeurtenis op het audio-element afvuren. In de link wordt Firefox genoemd, maar ik kwam deze gebeurtenis tegen nadat ik currentTime handmatig in Chrome had ingesteld. Dus als je gedrag hebt dat aan dit evenement is gekoppeld, kun je in een audiolus terechtkomen.

Antwoord 8

Het werkt soms niet in Chrome,

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

verander gewoon zo,

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

Antwoord 9

shamangeorge schreef:

door currentTime handmatig in te stellen kan men de ‘canplaythrough’-gebeurtenis op het audio-element afvuren.

Dit is inderdaad wat er zal gebeuren, en pauzeren zal ook de gebeurtenis pauseactiveren, die beide deze techniek ongeschikt maken voor gebruik als een “stop”-methode. Bovendien zal het instellen van de srczoals gesuggereerd door zaki ervoor zorgen dat de speler de URL van de huidige pagina als een mediabestand probeert te laden (en mislukt) als autoplayis ingeschakeld – instelling srcnaar nullis niet toegestaan; het wordt altijd behandeld als een URL. In plaats van het spelerobject te vernietigen, lijkt er geen goede manier te zijn om een ​​”stop” -methode te bieden, dus ik zou willen voorstellen om gewoon de speciale stopknop te laten vallen en in plaats daarvan de knoppen voor pauzeren en terugspringen te gebruiken – een stopknop zou niet echt enige functionaliteit toevoegen .

Antwoord 10

Deze benadering is “brute force”, maar het werkt in de veronderstelling dat het gebruik van jQuery “toegestaan” is. Omring uw “player” <audio></audio>tags met een div (hier met een id van “plHolder”).

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

Dan zou dit javascript moeten werken:

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

Antwoord 11

Ik was op zoek naar iets soortgelijks vanwege het maken van een applicatie die kon worden gebruikt om geluiden op elkaar te stapelen voor focus. Wat ik uiteindelijk deed was – bij het selecteren van een geluid, het audio-element maken met Javascript:

               const audio = document.createElement('audio') as HTMLAudioElement;
                audio.src = getSoundURL(clickedTrackId);
                audio.id = `${clickedTrackId}-audio`;
                console.log(audio.id);
                audio.volume = 20/100;
                audio.load();
                audio.play();

Voeg vervolgens kind toe aan document om het audio-element daadwerkelijk naar boven te halen

document.body.appendChild(audio);

Ten slotte, wanneer u audio deselecteert, kunt u het audio-element stoppen en helemaal verwijderen – dit stopt ook met streamen.

           const audio = document.getElementById(`${clickedTrackId}-audio`) as HTMLAudioElement;
            audio.pause();
            audio.remove();

Antwoord 12

Ik denk dat het goed zou zijn om te controleren of de audio wordt afgespeeld en de eigenschap currentTime opnieuw in te stellen.

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

Antwoord 13

voor mij werkt die code prima. (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">...

Hoop dat dit helpt.

Antwoord 14

Wat ik graag doe, is de besturing volledig verwijderen met Angular2 en dan wordt het opnieuw geladen wanneer het volgende nummer een audiopad heeft:

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

Als ik het vervolgens in code wil verwijderen, doe ik dit:

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

Als het volgende nummer is toegewezen, wordt de besturing helemaal opnieuw gemaakt:

this.song = this.songOnDeck;

Antwoord 15

De eenvoudige manier om deze fout te omzeilen is door de fout op te vangen.

audioElement.play() retourneert een belofte, dus de volgende code met een .catch() zou voldoende moeten zijn om dit probleem te verhelpen:

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

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