September 27, 2013

JSでSoundCloudの曲を再生して、duration(総再生時間)を自動で取得、position(現在再生時間)も自動で取得する

前回、簡単な再生、一時停止、停止等のサンプルを書きました。
http://madroom-project.blogspot.jp/2013/09/javascriptsoundcloud.html

今回は、duration(総再生時間)とposition(現在再生時間)を自動で取得するメモです。先にサンプルです。
SC.stream('/tracks/293', {
    autoPlay: true,
    onload: function() {
        console.log(this.duration);
    },
    whileplaying: function() {
        console.log(this.position);
    }
});
autoPlayは、その名の通り自動再生フラグです。上記のソースをそのまま書いてしまうと、完全に自動で再生されてしまいます。再生ボタン押下イベントのコールバック等にすると良いと思います。

autoPlayをtrueにすると曲のローディングは自動で開始され、ローディング完了と思われるタイミングでonloadの処理が行われました。前回の記事で、ローディングに合わせてdurationが増えているようだと書きましたが、onloadで取得すれば一定でした。

whileplayingは、再生中、何度もコールされます。ですのでpositionは増えていきます。autoPlay、onload、whileplayingを組み合わせると、再生時間のプログレスバーを作成できそうです。尚、再生開始のタイミングとローディング完了のタイミングは全く別であることには注意が必要で、実は上記のサンプルだとonloadよりも先にwhileplayingが実行されました。(この辺はうまく調整しないと。。。)


ドキュメント(SoundManager 2)
http://www.schillmania.com/projects/soundmanager2/doc/


--
追記:
autoPlayフラグではなくautoLoadフラグを用いてローディングだけ自動で開始させ、onloadでdurationを取得しつつ再生(this.play()です。)できました。この方法であれば、whileplayingの初回実行は必ずonloadよりも後になります。

No comments:

Post a Comment