javascript - tag - volume control html

Reproducción HTML5<audio> con fade in y fade out

Question

Me gustaría comenzar y detener la reproducción HTML5 en una posición aleatoria con períodos de fundido de entrada y salida gradual para suavizar la experiencia auditiva.

¿Qué tipo de mecanismos existen para esto? Aumente manualmente el volumen con setTimeout ()?

Answer 1

Creé una lib simple para esto usando setTimeout ().

El código fuente está disponible aquí:

https://github.com/miohtama/Krusovice/blob/master/src/tools/fade.js

Answer 2

Esta es una función de tiempo de espera simple para atenuar el audio (de 0 a 100 en este caso). Utiliza una variable global. Todavía luchando con un paquete completo sin embargo. Definitivamente estaré revisando el camino jQuery de sfjedi.

function FadeIn() {

    var sound = document.getElementById(''audiosnippet'');

    var vol = $.global.volume;

    if ( vol < 100 )
        {
            sound.volume = (vol / 100);
            $.global.volume = $.global.volume + 10;
            setInterval(function() { FadeIn() }, 1200);
        }

    }
}

Answer 3

La forma jQuery ...

$audio.animate({volume: newVolume}, 1000);

Editar: donde $ audio es un elemento de audio envuelto en jQuery y newVolume es un doble entre 0 y 1.

Editar: El volumen de medios efectivo del elemento es el volumen, interpretado en relación con el rango de 0.0 a 1.0, con 0.0 siendo silencioso, y 1.0 siendo el ajuste más alto, los valores entre el aumento en el volumen. El rango no necesita ser lineal. http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#effective-media-volume

Answer 4

Una vieja pregunta, pero si alguien está buscando una forma JS vainilla para hacer esto, simplemente escribí algo para el proyecto y pensé que lo publicaría aquí ya que mi búsqueda de una solución fue en vano. Si ya está trabajando con un elemento de audio o video, hay muchas posibilidades de que realmente no necesite usar jQuery para controlar el objeto de todos modos.

function getSoundAndFadeAudio (audiosnippetId) {

    var sound = document.getElementById(audiosnippetId);

    // Set the point in playback that fadeout begins. This is for a 2 second fade out.
    var fadePoint = sound.duration - 2; 

    var fadeAudio = setInterval(function () {

        // Only fade if past the fade out point or not at zero already
        if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
            sound.volume -= 0.1;
        }
        // When volume at zero stop all the intervalling
        if (sound.volume === 0.0) {
            clearInterval(fadeAudio);
        }
    }, 200);

}

Esta versión no permite editar el tiempo de fadeout (establecido en 2 segundos), pero podría argumentarlo con bastante facilidad. Para generar todo esto, se necesitaría una lógica adicional para verificar primero en qué se configuró el volumen para conocer el factor por el cual se desvanece. En nuestro caso, preestablecemos el volumen en 1 y el control de volumen del navegador está fuera de las manos de los usuarios, ya que es para una presentación de diapositivas por lo que no fue necesario.

Para acceder a una parte específica del audio, debería verificar el intervalo de tiempo que se puede buscar y simplemente establecer el tiempo actual de forma aleatoria según lo que esté disponible.

Answer 5

Вот написал пуукций угасания звука и повышения

<audio loop autoplay = "1" onPlay = "audioVolumeIn (this);">
<source src = "/ test / new / imgs / audio_bg.ogg" type = "audio / ogg; codecs = vorbis">
<fuente src = "/ test / new / imgs / audio_bg.wav" type = "audio / wav">
<fuente src = "/ test / new / imgs / audio_bg.mp3" type = "audio / mpeg">
</ audio>

    function audioVolumeIn(q){
       if(q.volume){
          var InT = 0;
          var setVolume = 0.2; // До какого уровня поднимать
          var speed = 0.005; // Скорость увиличения
          q.volume = InT;
          var eAudio = setInterval(function(){
              InT += speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) >= setVolume){
                 clearInterval(eAudio);
                 //alert(''clearInterval eAudio''+ InT.toFixed(1));
              };
          },50);
       };
   };

   function audioVolumeOut(q){
       if(q.volume){
          var InT = 0.4;
          var setVolume = 0;  // Начальное значение звука
          var speed = 0.005;  // скорость затухания
          q.volume = InT;
          var fAudio = setInterval(function(){
              InT -= speed;
              q.volume = InT.toFixed(1);
              if(InT.toFixed(1) <= setVolume){
                 clearInterval(fAudio);
                 //alert(''clearInterval fAudio''+ InT.toFixed(1));
              };
          },50);
       };
   };