web-dev-qa-db-ja.com

フェードインおよびフェードアウトを使用したHTML5 <audio>再生

リスニングエクスペリエンスをスムーズにするために、フェードインとフェードアウトの期間を持つHTML5再生をランダムな位置で開始および停止したいと思います。

これにはどのようなメカニズムがありますか？ setTimeout（）でボリュームを手動でランプアップしますか？

javascripthtml5audiovolume
30
Mikko Ohtamaa

JQueryの方法...

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

編集：$ audioはjQueryでラップされたオーディオ要素で、newVolumeは0と1の間のdoubleです。

編集：要素の有効なメディアボリュームは、0.0〜1.0の範囲に対して解釈されるボリュームです。0.0は無音、1.0は最大音量設定で、その間の音量は増加します。範囲は線形である必要はありません。 http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#effective-media-volume

編集：人々はバニラJavaScript実装を投稿しているので、jQueryスイングアニメーションを保持するVanilla TypeScriptを投稿します（JavaScriptでこれを実行する場合は、型情報を削除します）。 免責事項、これは完全にテストされていません：

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

古い質問ですが、誰かがこれを行うためのバニラJSの方法を探しているなら、私はちょうどプロジェクトのために何かを書き上げ、ソリューションの検索が無駄だったのでここに投稿すると思いました。ビデオ要素またはオーディオ要素を既に使用している場合は、jQueryを使用してオブジェクトを制御する必要はほとんどありません。

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

}

このバージョンでは、フェードアウト時間（2秒に設定）を編集することはできませんが、かなり簡単に議論できます。これを完全に一般化するには、ボリュームがフェードアウトする要因を知るために、最初にボリュームが何に設定されているかをチェックするための追加のロジックが必要になります。私たちのケースでは、すでにボリュームを1にプリセットしており、ブラウザのボリュームコントロールはスライドショーのものであるため、ユーザーの手に渡らないため、必要ありませんでした。

オーディオの特定の部分に到達するには、シーク可能なタイムレンジを確認し、利用可能なものに基づいてcurrentTimeをランダムに設定します。

19
user801985

SetTimeout（）を使用して、このためのシンプルなライブラリを作成しました。

ソースコードは次の場所にあります。

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

3
Mikko Ohtamaa

現在の曲をフェードアウトし、新しい曲をフェードインするための機能がいくつかあります。

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

これは、オーディオをフェードアウトするための単純なタイムアウト機能です（この場合は0〜100）。グローバル変数を使用します。それでも、パッケージ全体で苦労しています。私は間違いなくsfjediのjQueryの方法をチェックしています。

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