audioの停止時にフェードアウト機能を追加したい

前提

jQueryライブラリ「inview」を使い画面可視範囲に入ると
audioが再生されるサイトを作っています

実現したいこと

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

試したこと

こちらのサイトを参考にしてフェードアウト機能を付け足そうとしましたが
うまくいきませんでした(やり方はこちらのサイトのフェードアウトの方法でなくても構いません。)

フェードアウト記入前のコード

html
1<body>
2
3        <p>文章1</p>
4        <p>文章2</p>           
5        <p>文章3</p>
6    <div class="bgmbox">
7        <audio class="msc" src="audio.mp3"></audio>
8        <p>文章4</p>
9        <p>文章5</p>
10        <p>文章6</p>
11    </div>
12        <p>文章7</p>
13        <p>文章8</p>
14
15        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
16        <script src="script.js"></script>
17        <script type="text/javascript" src="jquery.inview-master/jquery.inview.js"></script>
18
19</body>

jQuery
1/*inviewに入ったらBGM再生、出たら停止*/
2
3$(function() {
4$('.bgmbox').on('inview', function(event, isInView) {
5  var audio = $('audio', this)[0];
6  if (isInView) {
7      audio.play();
8
9  } else {
10      audio.pause();
11      audio.currentTime = 0;
12    }
13  });
14  })
15
16```### フェードアウト記入後のコード
17```jQuery
18//mediaオブジェクトの取得
19var media = document.getElementById("msc");
20
21
22//フェードイン関数
23function fadein()
24{
25  var vl = media.volume;
26  if (vl < 1.0)
27  {
28    media.volume = Math.ceil((vl+0.1)*10)/10;
29    setTimeout("fadein()",200);
30  }
31}
32
33
34//フェードアウト関数
35function fadeout()
36{
37  var vl = media.volume;
38  if (vl > 0)
39  {
40    media.volume = Math.floor((vl-0.1)*10)/10;
41    setTimeout("fadeout()",200);
42  }
43}
44
45
46
47/*inviewに入ったらBGM再生、出たら停止*/
48
49$(function() {
50$('.bgmbox').on('inview', function(event, isInView) {
51  var audio = $('audio', this)[0];
52  if (isInView) {
53      audio.play();
54      fadein();
55
56
57  } else {
58      fadeout();
59      audio.pause();
60      audio.currentTime = 0;
61    }
62  });
63  })

oikashinoa

2019/05/04 12:35

ソースにフェードイン、アウトの部分が見当たりません。うまく行かなかった方法で良いので記載してください。このままだと作成依頼のように見えます

rakorako

2019/05/04 13:08

ソースにフェードイン、アウトのコードを追記しました。見当違いの記述かもしれませんが、修正の程よろしくお願い致します。参考URLのやり方以外の方法でも構いません。よろしくお願い致します。

oikashinoa

2019/05/09 15:41

そもそもinviewはちゃんと機能しているのでしょうか？また音楽は鳴るのでしょうか？その上でChromeやIEのデバッガーで問題点を見つけて下さい。 - XXXの部分が実行するはずが実行しないとか yyyy でZZZZなエラーが出るとか。可能ならCodepen（ググって下さい）とかである程度動くように組んでみて下さい。 - inviewプラグインの組み込み方が間違っているとか、根本を間違っているか判断つかないので。

rakorako

2019/05/10 06:17

”そもそもinviewはちゃんと機能しているのでしょうか？また音楽は鳴るのでしょうか？” 「フェードアウト記入前のコード」の段階では、inviewは機能しており音楽は鳴ります。 consoleでエラーも出ておりません。 ”その上でChromeやIEのデバッガーで問題点を見つけて下さい。 - XXXの部分が実行するはずが実行しないとか yyyy でZZZZなエラーが出るとか。” 「フェードアウト記入後のコード」の段階では、一つ一つ書くには多すぎる量のエラーが出ているのですが、 ①var vl = media.volume;(8行目) ②var vl = media.volume;(20行目) ③audio.play(); の3箇所に関してエラーが出ているようです。「/*inviewに入ったらBGM再生、出たら停止*/」の中の fadeout()のところで、再生されているBGMがフェードアウトするはずが、そもそも音楽自体鳴らなくなってしまっているという状況です。 ”可能ならCodepen（ググって下さい）とかである程度動くように組んでみて下さい。” inviewで音が再生、停止の段階までは動きますが、フェードアウトの機能に関してはある程度動く段階まで組むことが不可能だったため質問させていただきました。

oikashinoa

2019/05/10 09:38

inviewの動作がOkなら、まずはinview無し&ボタンでfadein/outするようにしてください。デバッグしやすくなります。その後で3箇所で出ているエラーについて調べていけば解決に近づきますよ。エラーが分かれば半分は問題解決してますください。まずは出来るだけシンプルなコードで問題箇所を特定&エラーを確認してください。