Fading out audio of a video or audio using jQuery

Question

I have a page that uses both the video and audio tag. The video first plays and then after that video has ended the audio starts playing.

I am trying to get the audio from each of them to stop with a fade out. I've tried using the animate function but nothing is changing. Below is my code:

The fade out code should be placed within case 119 (When W pressed). The audio has a ID tag of 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";
    }

any help will be awesome!

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You must use a jQuery Object:

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

video variable is a plain JavaScript object which is not recognized by a jQuery method (in this instance, .animate())

Reference

SNIPPET

$(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>

score 0 · Answer 2 · answered Nov 10 '16 at 03:57

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/>

Fading out audio of a video or audio using jQuery

2 Answers2

SNIPPET