作成した電子書籍にページごとに音声再生

Question

実現したいこと

デジタルカタログ作成ツールで作成した電子書籍にページごとに音声を組み込みたいです。

前提

デジタルカタログ作成ツールで作成した電子書籍にページごとに音声を組み込みたいです。
HTMLファイル内にボタンを設置し、JavaScriptにて再生一時停止までは可能になりましたがページごとに音声ファイルを変更、またはページ数だけHTMLでボタン設置を行いdisplay:noneをしたのち表示されたページに合わせて該当の音声ボタンを表示させるようにしたいです。
JavaScriptに関してはほとんど初心者なのでここからのアプローチ方法がわからないためご教授願います。

MutationObserverというものを利用して
要素の変化を監視しそれに合わせた処理を行うという方法も検討したのですがエラーが出てしまいうまくいきません。

上記の方法でなくても良い方法があれば知りたいです。

発生している問題・エラーメッセージ

audio.js:19 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

該当のソースコード

<div class="audio_wrap">
  <div class="audio_button"></div>
  <audio id="audio_01" src="https://prism-prism.jp/japell_catalog/sound/00.mp3" loop>
    あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
  </audio>
</div>

<div class="audio_wrap_02">
  <div class="audio_button_02"></div>
  <audio id="audio_02" src="https://prism-prism.jp/japell_catalog/sound/01.mp3" loop>
    あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
  </audio>
</div>

ソースコード	

var observer = new MutationObserver(function(){
  /** DOMの変化が起こった時の処理 */
  alert('DOMが変化しました');
});
 
/** 監視対象の要素オブジェクト */
const elem = document.getElementById('ps-info');
 
/** 監視時のオプション */
const config = { 
  attributes: true, 
  childList: true, 
  characterData: true 
};
 
/** 要素の変化監視をスタート */
observer.observe(elem, config);





window.addEventListener('DOMContentLoaded', function(){
  /** jQueryの処理 */

  var audioBtn = $('.audio_button'),
  audioWrap = $('.audio_wrap'),
  audio = document.getElementById('audio_01');

  audioBtn.on('click', function () {
    if( audioWrap.hasClass('play') ) {
      audio.pause();
      audioWrap.removeClass('play');
    } else {
      audio.play();
      audioWrap.addClass('play');
    }
  });
});




window.addEventListener('DOMContentLoaded', function(){
  var audioBtn = $('.audio_button_02'),
  audioWrap = $('.audio_wrap_02'),
  audio = document.getElementById('audio_02');

  audioBtn.on('click', function () {
    if( audioWrap.hasClass('play') ) {
      audio.pause();
      audioWrap.removeClass('play');
    } else {
      audio.play();
      audioWrap.addClass('play');
    }
  });
});```

```css
.audio_wrap {
    position: absolute;
    top: -1%;
    left: 20%;
    z-index: 9999;
    display: block;
}

.audio_button {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    background: url(https://prism-prism.jp/japell_catalog/btn/play_dog_1.png) no-repeat center center;
    background-size: contain;
}

.play .audio_button {
    background-image: url('https://prism-prism.jp/japell_catalog/btn/play_cat_1.png');
}




.audio_wrap_02 {
 position: absolute;
    top: 29%;
    left: 20%;
    z-index: 9999;
    display: block;
}


.audio_button_02 {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    background: url(https://prism-prism.jp/japell_catalog/btn/play_dog_1.png) no-repeat center center;
    background-size: contain;
}

.play .audio_button_02 {
    background-image: url('https://prism-prism.jp/japell_catalog/btn/play_cat_1.png');
}



@media(max-width:768px){

.audio_wrap {
    top: 0%;
    left: 0%;
}
.audio_button {
    .audio_button {
    width: 250px;
    height: 125px;
}
}


.audio_wrap_02 {
   top: 0%;
    left: 0%;
}

.audio_button_02 {
    .audio_button {
    width: 250px;
    height: 125px;
}
}

}

補足情報（FW/ツールのバージョンなど）

ebook5というもので電子書籍は作成しました

Answer 1

const elem = document.getElementById('ps-info');
observer.observe(elem, config);

の２行を

window.addEventListener('DOMContentLoaded', function(){

の内側に収めてください