0

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!

2 Answers 2

1

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>

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.