webentwicklung-frage-antwort-db.com.de

HTML5 <Audio> -Wiedergabe mit Ein- und Ausblenden

Ich möchte die HTML5-Wiedergabe in einer zufälligen Position mit Ein- und Ausblendzeiten starten und stoppen, um das Hörerlebnis zu glätten.

Welche Mechanismen gibt es dafür? Lautstärke mit setTimeout () manuell erhöhen?

27
Mikko Ohtamaa

Der jQuery-Weg ...

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

Edit: $ audio ist ein mit jQuery umschlossenes Audioelement und newVolume ist ein Double zwischen 0 und 1.

Bearbeiten: Die effektive Medienlautstärke des Elements ist die Lautstärke, die relativ zum Bereich von 0,0 bis 1,0 interpretiert wird, wobei 0,0 stumm ist und 1,0 die lauteste Einstellung ist, wobei die dazwischenliegenden Werte an Lautstärke zunehmen. Der Bereich muss nicht linear sein. http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#effective-media-volume

Bearbeiten: Die Leute veröffentlichen Vanilla-JavaScript-Implementierungen, daher werde ich ein Vanilla TypeScript-Skript posten, das die jQuery-Swing-Animation beibehält (streichen Sie einfach die Typinformationen aus, wenn Sie diese in JavaScript ausführen möchten). Disclaimer, das ist völlig ungetestet:

export async function adjustVolume(
    element: HTMLMediaElement,
    newVolume: number,
    {
        duration = 1000,
        easing = swing,
        interval = 13,
    }: {
        duration?: number,
        easing?: typeof swing,
        interval?: number,
    } = {},
) {
    const originalVolume = element.volume;
    const delta = newVolume - originalVolume;
    if (!delta || !duration || !easing || !interval) {
        element.volume = newVolume;
        return Promise.resolve();
    }
    const ticks = Math.floor(duration / interval);
    let tick = 1;
    return new Promise<void>((resolve) => {
        const timer = setInterval(() => {
            element.volume = originalVolume + (
                easing(tick / ticks) * delta
            );
            if (++tick === ticks) {
                clearInterval(timer);
                resolve();
            }
        }, interval);
    });
}

export function swing(p: number) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}
87
jedmao

Alte Frage, aber wenn jemand einen Vanilla JS-Weg sucht, um dies zu tun, habe ich einfach etwas für ein Projekt geschrieben und dachte, ich würde es hier posten, da meine Suche nach einer Lösung vergeblich war. Wenn Sie bereits mit einem Video- oder Audioelement arbeiten, besteht eine gute Chance, dass Sie jQuery überhaupt nicht verwenden müssen, um das Objekt zu steuern.

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

}

Diese Version erlaubt keine Bearbeitung der Fadeout-Zeit (auf 2 Sekunden eingestellt), aber Sie können sie ziemlich leicht argumentieren. Um dies vollständig zu generieren, wäre eine zusätzliche Logik erforderlich, um zuerst zu überprüfen, auf welche Lautstärke das Volume eingestellt wurde, um den Faktor zu ermitteln, um den es ausgeblendet werden soll. In unserem Fall ist die Lautstärke bereits auf 1 voreingestellt, und die Lautstärkeregelung des Browsers liegt nicht in der Hand des Benutzers, da es sich um eine Diaschau handelt, also nicht benötigt wurde.

Um zu einem bestimmten Teil des Audios zu gelangen, möchten Sie den durchsuchbaren Zeitbereich prüfen und die currentTime einfach zufällig einstellen, je nachdem, was verfügbar ist.

19
user801985

Ich habe eine einfache Bibliothek mit setTimeout () erstellt.

Der Quellcode ist hier verfügbar:

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

3
Mikko Ohtamaa

Hier sind ein paar Funktionen zum Ausblenden des aktuellen Songs und zum Einblenden des neuen Songs.

HTML:

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

Javascript:  

    function audioVolumeIn(q){
       if(q.volume){
          var InT = 0;
          var setVolume = 0.2; // Target volume level for new song
          var speed = 0.005; // Rate of increase
          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;  // Target volume level for old song 
          var speed = 0.005;  // Rate of volume decrease
          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);
       };
   };
1
user3126867

Dies ist eine einfache Timeout-Funktion zum Einblenden des Audios (von 0 bis 100 in diesem Fall). Es verwendet eine globale Variable. Immer noch mit einem ganzen Paket zu kämpfen. Ich werde auf jeden Fall den jQuery-Weg von sfjedi überprüfen.

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

    }
}
0
jibbon