SoundCloudの音量調節

[tkrkt]

SoundCloudの音量調節をさっくり書いてみました。
245CloudでSoundCloud再生中に以下のスクリプトをコンソールにぶち込んだら、
プレーヤーの上にボリュームスライダーが挿入される、はず。

実際に入れるならもうちょいきれいに書けるかと。
ちなみにプルリクは良く知らないんで勉強中...

//SoundCloud APIをインジェクション
function injectAPI(loadHandler){
  if(window.SC){
    loadHandler();
  } else {
    $('<script>')
      .attr('src', 'https://w.soundcloud.com/player/api.js')
      .appendTo(window.document.head);
      //.on('load', loadHandler); //does not work
    checkLoaded(loadHandler);
  }
}

//onloadがうまく動かないかもなので、ごりっと監視
function checkLoaded(loadHandler){
  setTimeout(function(){
    if(window.SC){
      loadHandler();
    } else {
      checkLoaded(loadHandler);
    }
  }, 100);
}

//SoundCloudのiframeを探す
function findSoundCloudPlayer(){
  var player = null;
  $('iframe').each(function(){
    var src = $(this).attr('src');
    if(src.indexOf('https://w.soundcloud.com/player') === 0){
      player = $(this)[0];
    }
  });
  return player;
}

//ボリュームバーを作成
function createVolumeBar(playerElement){
  var player = SC.Widget(playerElement);
  var input = $('<input>').attr({
    type: 'range',
    min: 0,
    max: 100,
    value: 100
  }).on('change', function(){
    player.setVolume($(this).val() / 100);
  });

  player.getVolume(function(volume){
    input.val(volume * 100);
  });

  return input;
}

//245クラウドにボリュームバー挿入
function insertTo245Cloud(input, player){
  input.insertBefore(player).wrap(
    $('<label>')
      .text('Volume')
      .css({
        'float': 'right',
        'margin-right': '2%',
        'width': '10%'
      })
  );
}

injectAPI(function(){
  var player = findSoundCloudPlayer();
  if(player){
    var input = createVolumeBar(player);
    insertTo245Cloud(input, player);
  }
});

[tkrkt]

適当書いたけど、こんな感じでいいはず。

#soundcloud.coffee
#API読込み前提
@play: (sc_id, client_id, $dom, is_autoplay=true) ->
  container = $dom.html("""
    <div>
       <label>
          Volume <input type="range" min=0 max=100 value=100>
       </label>
       <iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F#{sc_id}&show_artwork=true&client_id=#{client_id}&auto_play=#{if is_autoplay then 'true' else 'false'}&t=3000"></iframe>
    </div>
  """)

  widget = SC.Widget($('iframe', container)[0]);
  $("input", container).on("change", ->
    widget.setVolume($(this).val() / 100)
  )

  widget.getVolume((volume) ->
    $("input", container).val(volume * 100)
  )

  container

[pandeiro245]

@tkrkt さんこちら、色んな方から要望頂いていたのでめちゃくちゃ嬉しいです！
取り急ぎ下記で対応してみたのですが
#57

こなります。。。

ちなみにこの状態で元の生JSをコンソールで実行してみると

こんな感じでみぎがわ右側にいい感じにでました！

以上が取り急ぎの共有になります！

[pandeiro245]

あ、#API読込み前提の部分見落としてました。。。
今からやります！

[pandeiro245]

@tkrkt さんAPI埋め込みって
<script src="https://w.soundcloud.com/player/api.js"></script>
を読み込むだけではダメってことですよね。

tkrkt さんRailsはお使いですか？
もーしよろしければ
Rails化は無事masterブランチに取り込みましたので
そこに対してPullRequest頂けると幸いでございます...！

[tkrkt]

API埋め込みはその一行でいいはずです。（実際はサーバにおいて使ったほうがよさそうですが）
スクリプト適当に書きすぎて間違ってたっぽいですね。

[tkrkt]

出来てるっぽいのでCloseですね。ちょいアイコンがずれてますが。うーん。

[tkrkt]

勝手にCloseしない方が良かったかも。

[pandeiro245]

@tkrkt closeしてもらって大丈夫ですよ！
別チケット化する運用でいければと思いますー！