insertar - reproductor audio html5 personalizado

Función de parada de audio HTML5

Question

Estoy reproduciendo un pequeño clip de audio al hacer clic en cada enlace de mi navegación

Código HTML:

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

Código JS:

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

Está funcionando bien hasta ahora.

El problema es cuando un clip de sonido ya se está ejecutando y hago clic en cualquier enlace. No ocurre nada.

Traté de detener el sonido que ya estaba sonando al hacer clic en el vínculo, pero no hay un evento directo para eso en la API de audio de HTML5

Intenté seguir el código pero no funciona

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

Alguna sugerencia por favor?

Answer 1

Como nota al margen y porque hace poco utilicé el método de detención proporcionado en la respuesta aceptada, según este enlace:

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

al establecer currentTime manualmente, se puede activar el evento ''canplaythrough'' en el elemento de audio. En el enlace menciona a Firefox, pero me encontré con este evento activando después de configurar currentTime manualmente en Chrome. Entonces, si tiene un comportamiento asociado a este evento, puede terminar en un bucle de audio.

Answer 2

Creo que sería bueno comprobar si el audio se está reproduciendo y restablecer la propiedad CurrentTime.

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

Answer 3

Desde mi propia función javascript para alternar Reproducir / Pausa - dado que estoy manejando una transmisión de radio, quería borrar el buffer para que el oyente no termine sin sincronizarse con la estación de 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;
        }
}

Resulta que limpiar el CurrentTime no es suficiente para Chrome, también es necesario limpiar la fuente y volver a cargarla. Espero que esto ayude.

Answer 4

Esta es mi forma de hacer el método stop ():

En algún lugar del código:

audioCh1: document.createElement("audio");

y luego en stop ():

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

De esta forma, no producimos solicitudes adicionales, la anterior se cancela y nuestro elemento de audio está en estado limpio (probado en Chrome y FF):>

Answer 5

Estaba teniendo el mismo problema. Una parada debe detener la transmisión y activar la reproducción si es una radio. Todas las soluciones que vi tenían una desventaja :

• player.currentTime = 0 sigue descargando la transmisión.
• player.src = '''' raise error event

Mi solución:

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

Y el HTML

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

Answer 6

Este enfoque es "fuerza bruta", pero funciona asumiendo que el uso de jQuery es "permitido". Rodea tus etiquetas de "jugador" <audio></audio> con un div (aquí con un id de "plHolder").

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

Entonces este javascript debería funcionar:

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

Answer 7

La forma más sencilla de evitar este error es detectar el error.

audioElement.play () devuelve una promesa, por lo que el siguiente código con un .catch () debería ser suficiente para gestionar este problema:

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

Nota: Es posible que desee reemplazar la función de flecha con una función anónima para compatibilidad con versiones anteriores.

Answer 8

Lo que me gusta hacer es eliminar completamente el control usando Angular2 y luego volver a cargarlo cuando la siguiente canción tenga una ruta de audio:

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

Luego, cuando quiero descargarlo en el código, hago esto:

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

Cuando se asigna la siguiente canción, el control se recrea por completo desde cero:

this.song = this.songOnDeck;

Answer 9

en lugar de stop() podrías probar con:

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

esto debería tener el efecto deseado

Answer 10

para mí ese código funciona bien. (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">...

Espero que esto ayude.

Answer 11

primero tienes que establecer una identificación para tu elemento de audio

en tu js:

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

var oldSrc = ply.src; // solo para recordar la fuente anterior

ply.src = ""; // para detener al jugador tienes que reemplazar la fuente con nada

Answer 12

shamangeorge escribió:

al establecer currentTime manualmente, se puede activar el evento ''canplaythrough'' en el elemento de audio.

De hecho, esto es lo que sucederá, y la pausa también activará el evento de pause , los cuales hacen que esta técnica no sea adecuada para usarla como método de "detención". Además, configurar el src como lo sugiere zaki hará que el jugador intente cargar la URL de la página actual como un archivo multimedia (y fallar) si la autoplay está habilitada; no se permite establecer src en null ; siempre será tratado como una URL. Si no se destruye el objeto del jugador, parece que no hay una buena manera de proporcionar un método de "detención", por lo que sugiero soltar el botón de detención dedicado y proporcionar botones de pausa y salto atrás: un botón de detención no agregaría realmente ninguna funcionalidad .

Answer 13

Este método funciona:

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

Pero si no desea tener que escribir estas dos líneas de código cada vez que detiene un audio, puede hacer una de estas dos cosas. El segundo, creo que es el más apropiado y no estoy seguro de por qué los "dioses de los estándares de JavaScript" no han hecho este estándar.

Primer método: crear una función y pasar el audio

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

//then using it:
stopAudio(audio);

Segundo método (favorecido): extender la clase de audio:

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

Tengo esto en un archivo javascript que llamé "AudioPlus.js" que incluyo en mi html antes de cualquier script que tenga que ver con el audio.

Luego puede llamar a la función de parada en objetos de audio:

audio.stop();

PROBLEMA FINALMENTE CROMO CON "canplaythrough":

No probé esto en todos los navegadores, pero este es un problema que encontré en Chrome. Si intentas configurar currentTime en un audio que tiene un detector de eventos "canplaythrough" conectado a él, dispararás nuevamente ese evento, lo que puede generar resultados no deseados.

Por lo tanto, la solución, similar a todos los casos en que ha adjuntado un detector de eventos que realmente desea asegurarse de que no se active nuevamente, es eliminar el detector de eventos después de la primera llamada. Algo como esto:

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

PRIMA:

Tenga en cuenta que puede agregar aún más métodos personalizados a la clase de audio (o cualquier clase de JavaScript nativo para el caso).

Por ejemplo, si desea un método de "reinicio" que reinicie el audio, podría tener el siguiente aspecto:

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