html5/js audio停止時にフェードアウトを追加したい

Question

やりたいこと

以前解決いたしました下記(「inview.jsを使用して可視範囲に入ったらaudio再生、出たら停止」)のコード　↓　に、

<div class="bgmbox">
<audio src="BGM.mp3"></audio>

/*可視範囲に入ったらaudio再生、出たら停止*/
$(function() {
$('.bgmbox').on('inview', function(event, isInView) {
if(event.target !== this){
return;
}
 var audio = $('audio', this)[0];
  if (isInView) {
      audio.play();
  } else {
      audio.pause();
      audio.currentTime = 0;
    }
  });
})

「audio停止時にフェードアウト」を追加したいです。
また、複数audio要素を使うので、毎回0になったボリュームを次要素再生の度に1に戻したいです。

試したこと

こちらのページを参考に、下記のようなコードを書いてみましたが、audioが再生されなくなりました。

/*可視範囲に入ったらaudio再生、出たらフェードアウトして停止*/

$(function() {
$('.bgmbox').on('inview', function(event, isInView) {
if(event.target !== this){
return;
}

 var audio = $('audio', this)[0];
 /*ボリュームに関する宣言*/
 var media = document.getElementById(".bgmbox");
 var vl = media.volume;

  if (isInView) {
      media.volume = 1 　
      audio.play();
      
  } else {

  function fadeout()
{
  var vl = media.volume;
  if (vl > 0)
  {
    /*フェードアウトの記述*/
    media.volume = Math.floor((vl-0.1)*10)/10;
    setTimeout("fadeout()",200);

    /*オーディオ停止の記述*/
      audio.pause();
      audio.currentTime = 0;
    }
  });
  })

挿入する場所や書き方が間違っていると思うのですが、ご教授いただけますと幸いです。

Comments

[x_x]

fadeout はどこにあるのでしょうか？

[uzurazura]

ご回答ありがとうございます。

分からないながら、
一応function fadeout()を追記いたしました。
朱書きいただきたいです。

プロゲートにてjsの勉強をしておりますが、
このように複数の関数や宣言を組み合わせる場合など応用的な書き方/概念が理解できず困っております…。

何卒よろしくお願いいたします。

Answer 1

こちらで自己解決いたしました。
ご協力いただきまして、ありがとうございました。

var audios = [];
  var fadeinTimer = [];
  var fadeoutTimer = [];
   var fadeSpeed = 20;

 //フェードアウト関数
  function fadeout(index) {
    var audioItem = audios[index];
    var vl = audioItem.volume;
    //console.log('fadeout: ' + vl);

    if (vl > 0) {
      audioItem.volume = Math.floor((vl-0.01)*100)/100;
      clearTimeout(fadeinTimer[index]);
      fadeoutTimer[index] = setTimeout('fadeout('+index+')',fadeSpeed);
    } else {
      audioItem.pause();
      audioItem.currentTime = 0;
    }
  }

/*inviewに入ったらBGM再生、出たら停止*/
  $(function() {
    $('.bgmbox').each( function(i) {
      audios[i] = new Audio();
      audios[i].src = $(this).find('.msc').attr('src');
      audios[i].volume = 0;

      $(this).on('inview', function(event, isInView) {
        if(event.target !== this){
        return;
        }
        if (playFlag) {
          if (isInView) {
            audios[i].play();
          } else {
            fadeout(i);
          }
        }
      });
    });
  });