使用 jQuery 淡出视频或音频的音频

Posted 2023-02-25

【中文标题】使用 jQuery 淡出视频或音频的音频

【英文标题】：Fading out audio of a video or audio using jQuery

【发布时间】：2016-11-10 03:16:17

【问题描述】：

我有一个同时使用视频和音频标签的页面。视频首先播放，然后在视频结束后开始播放音频。

我正在尝试让他们每个人的音频停止淡出。我试过使用动画功能，但没有任何改变。以下是我的代码：

淡出代码应放在 case 119 内（按下 W 时）。音频的 ID 标签为 audio

    $(document).keypress(function(event)

    // This variable holds the video ID
    var video = document.getElementById('video');

    // This variable holds the value of the key pressed
    var keycode = (event.keyCode ? event.keyCode : event.which);

    switch(keycode) 
        // Opening Page - This page features the fashion show poster
        case 113:
            window.location.href = "Opening.html";
            break;

        // Fade Volume
        case 119:
            $('body').fadeOut(1000);
            video.animate(volume: 0.0, 1000);
            break;

        // This will open the media for Lana's walk
        case 101:
            window.location.href = "Lana.html";
            break;

        // This will open the media for Eden's walk
        case 114:
            window.location.href = "Eden.html";
            break;

        // This will open the media for Laura's walk
        case 116:
            window.location.href = "Laura.html";
            break;

        // This will open the media for the first media performance
        case 121:
            window.location.href = "MediaOne.html";
            break;

        // This will open the media for Kathleen's walk
        case 117:
            window.location.href = "Kathleen.html";
            break;

        // This will open the media for Jazzy's walk
        case 105:
            window.location.href = "Jazzy.html";
            break;

        // This will open the media for Flora's walk
        case 111:
            window.location.href = "Flora.html";
            break;

        // This will open the media for the second media performance
        case 112:
            window.location.href = "MediaTwo.html";
            break;

        // This will open the media Illiana's walk
        case 97:
            window.location.href = "Illiana.html";
            break;

        // This will open the media for Anna's walk
        case 115:
            window.location.href = "Anna.html";
            break;

        // This will open the media for Estelte's walk
        case 100:
            window.location.href = "Estelle.html";
            break;

        // This will open the media for the fianle
        case 102:
            window.location.href = "Finale.html";
            break;

        // This will play or pause the video that is currently playing
        case 32:
            if (video.paused) 
                video.play();
             else 
                video.pause();
            
            break;

        // This default case will return to the opening page in case of an error
        default:
            window.location.href = "Opening.html";
    

任何帮助都会很棒！

【参考方案1】：

您必须使用 jQuery 对象：

      $('#video').animate(
        volume: 0.0
      , 1000);

video 变量是一个普通的 javascript 对象，无法被 jQuery 方法识别（在本例中为 .animate()）

Reference

片段

$(document).keypress(function(event) 

      // This variable holds the video ID
      var video = document.getElementById('video');

      // This variable holds the value of the key pressed
      var keycode = (event.keyCode ? event.keyCode : event.which);

      switch (keycode) 
        // Opening Page - This page features the fashion show poster
        case 113:
          window.location.href = "Opening.html";
          break;

          // Fade Volume
        case 119:
          $('body').fadeOut(1000);
          $('#video').animate(
            volume: 0.0
          , 1000);
          break;

          // This will open the media for Lana's walk
        case 101:
          window.location.href = "Lana.html";
          break;

          // This will open the media for Eden's walk
        case 114:
          window.location.href = "Eden.html";
          break;

          // This will open the media for Laura's walk
        case 116:
          window.location.href = "Laura.html";
          break;

          // This will open the media for the first media performance
        case 121:
          window.location.href = "MediaOne.html";
          break;

          // This will open the media for Kathleen's walk
        case 117:
          window.location.href = "Kathleen.html";
          break;

          // This will open the media for Jazzy's walk
        case 105:
          window.location.href = "Jazzy.html";
          break;

          // This will open the media for Flora's walk
        case 111:
          window.location.href = "Flora.html";
          break;

          // This will open the media for the second media performance
        case 112:
          window.location.href = "MediaTwo.html";
          break;

          // This will open the media Illiana's walk
        case 97:
          window.location.href = "Illiana.html";
          break;

          // This will open the media for Anna's walk
        case 115:
          window.location.href = "Anna.html";
          break;

          // This will open the media for Estelte's walk
        case 100:
          window.location.href = "Estelle.html";
          break;

          // This will open the media for the fianle
        case 102:
          window.location.href = "Finale.html";
          break;

          // This will play or pause the video that is currently playing
        case 32:
          if (video.paused) 
            video.play();
           else 
            video.pause();
          
          break;

          // This default case will return to the opening page in case of an error
        default:
          window.location.href = "Opening.html";
      
  
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【参考方案2】：

const audio = document.querySelector("audio");

audio.play();
if(audio.paused === false)
  
  var fadeOut = setInterval(function()

    audio.volume = audio.volume -= 0.1;
    
    if(audio.paused === true)
      clearInterval(fadeOut);
    

  ,500);
  

<audio src="https://f001.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=4_z21ba257aafcf0ce2568a021f_f114c19c5768b55e7_d20161029_m042628_c001_v0001019_t0022" controls autoplay/>