wavesurfer.jsを動的に使う

やりたいこと

備忘録なので細かい説明は省きます。wavesurfer.jsをループで動的に使おうとしたのですがループでwavesurfer.jsを作ることができませんでした。原因は分かりませんが多分、ループの速度が早すぎて処理が追いつかないのでしょう。ajaxを使ってゆっくりループをするようにしたらうまく行きました

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.5/wavesurfer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="sample01"></div>

<script type="text/javascript">
$(function() {

var counter = 0;
var i = setInterval(function(){
// do your thing
console.log("a")
  $.ajax({
         type: 'GET',
         url: 'load.html',
         dataType: 'html',
         success: function(data) {
             $('#sample01').append(data);
         },
         error:function() {
             alert('問題がありました。');
         }
        });
counter++;
if(counter === 10) {
  clearInterval(i);
}
}, 200);
});

</script>
</body>
</html>

load.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.5/wavesurfer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<div id="body_waveform"> </div>
<div id="body_button"> </div>

  
<script language="JavaScript">

var make_waveform = $('<div id="waveform"> </div>');
$('#body_waveform').append(make_waveform);


var make_button = $('<button onclick="wavesurfer.playPause()">Play</button>');
$('#body_button').append(make_button);



var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'black',
  progressColor: 'purple'
});

wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

</script>
</body>
</html>

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！