magazine off

wavesurfer.jsを動的に使う

投稿日 : 2018年3月19日(月曜日)

やりたいこと

備忘録なので細かい説明は省きます。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>

Categories

Recent Posts

【2021年】React入門本 おすすめ書籍 初心者向け人気本15選を紹介【初心者向け】

 【2021年】React入門本 おすすめ書籍 初心者向け人気本5選を紹介 こん…

投稿日 : 2021年2月9日(火曜日)

GReeeeNが紅白に初出場「顔出し?!」反響呼ぶ

 GReeeeNが紅白に初出場「顔出し?!」反響呼ぶ 2020年の年末、紅白…

投稿日 : 2021年1月1日(金曜日)

FirebaseのデータベースでPermission Deniedとなるときの対処法

  一般的に、Firebaseのデータベース接続でPermission Deni…

投稿日 : 2021年6月27日(日曜日)

PythonがC++より断然早いことが証明された動画がSNSで話題

   ネタです。   早いというのは速度ではなく、コード…

投稿日 : 2021年10月10日(日曜日)