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>