SoundCloudのプレーヤーをアドオンバーから操作できるFirefoxアドオン作りました

追記: このアドオンは現在公開していません

SoundCloud でいろんなトラック聴きまわってると、いつの間にかタブが増えて、今どのタブで再生してるんだ？ってことがよくあったので作りました。

機能概要

• プレーヤー: インストールするとアドンバーにプレーヤーボタン一式が追加される
• 再生ボタン: SoundCloud が開かれてるとそのタブで再生/一時停止
• タイトル: 再生中のタイトルが表示される。押すとタブがアクティブになりトラックページに行く
• ボリューム: ミュートとボリューム調節
• イモムシみたいなボタン: 雲っぽくしようとしたらできなかった。SoundCloud タブがアクチブになる
• アクティブな SoundCloud タブを優先します

アクティブな SoundCloud タブのプレーヤー部分をアドオンバーにもってきた感じです

Install

• Download: SoundCloudPlayer :: Add-ons for Firefox

先日書いた SoundCloudでQueueを使えるようにするUserScript だけでは物足りずアドオンにしてしまいました。 まだ公開されてるのは 0.0.2 で、いま 0.0.3 あたりを作っています。 バグフィックスというより1個のObjectに関数全部突っ込んでるだけの構成になってしまってるのが悲しいので直し中です。 ミュートしても一瞬音が出てしまう不具合は 0.0.3 (現レポジトリ) で直ってます。
何かあれば下のレポジトリの Issues などからお願いします

レポジトリ

• https://github.com/polygonplanet/SoundCloudPlayer

よくある Back to Top ボタンの作成例

ブログとかでページ右下あたりによくある 「Back to Top」 ボタンを作ってみました。

DEMO

• http://jsfiddle.net/polygonplanet/fFJzq/show/

ページを開いてスクロールすると、右下に「Back to Top」ボタンが現れます。 ボタンをクリックしてページ上部までスクロールします。 今回は jQuery を使ってみたら、ごくありがちなボタンになってしまいました。 もしかしたら多少クリックしずらいかもしれません。

サンプルコード

※以下はDEMOを簡略化するため多少コード変更しています

HTML:

view plainprint?

1. <div class="back-to-top">Back to Top</div>  

<div class="back-to-top">Back to Top</div>

JavaScript:

view plainprint?

1. $(function() {  
2.   var backToTop = $('.back-to-top');  
3.   
4.   // クリックでページ上部までスクロール  
5.   backToTop.hide().on('click', function() {  
6.     $('html,body').animate({  
7.       scrollTop: 0  
8.     }, 800);  
9.     return false;  
10.   });  
11.   
12.   // スクロール位置がページ上部じゃなかったら表示  
13.   $(window).on('scroll', function() {  
14.     if ($(this).scrollTop() < 10) {  
15.       backToTop.hide();  
16.     } else {  
17.       backToTop.show();  
18.     }  
19.   });  
20.   
21. });  

$(function() {
  var backToTop = $('.back-to-top');

  // クリックでページ上部までスクロール
  backToTop.hide().on('click', function() {
    $('html,body').animate({
      scrollTop: 0
    }, 800);
    return false;
  });

  // スクロール位置がページ上部じゃなかったら表示
  $(window).on('scroll', function() {
    if ($(this).scrollTop() < 10) {
      backToTop.hide();
    } else {
      backToTop.show();
    }
  });

});

CSS:

view plainprint?

1. .back-to-top {  
2.   display: none;  
3.   position: fixed;  
4.   bottom: 10px;  
5.   right: 10px;  
6.   width: 100px;  
7.   height: 40px;  
8.   background: rgba(255, 64, 64, 0.7);  
9.   color: rgba(255, 255, 255, 0.9);  
10.   line-height: 3;  
11.   text-align: center;  
12.   font-size: 13px;  
13.   font-weight: bold;  
14.   font-family: verdana, sans-serif;  
15.   cursor: pointer;  
16.   z-index: 9999;  
17. }  
18.   
19. .back-to-top:hover {  
20.   background: rgba(255, 16, 16, 0.8);  
21.   color: rgba(255, 255, 64, 0.8);  
22. }  

.back-to-top {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  background: rgba(255, 64, 64, 0.7);
  color: rgba(255, 255, 255, 0.9);
  line-height: 3;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  font-family: verdana, sans-serif;
  cursor: pointer;
  z-index: 9999;
}

.back-to-top:hover {
  background: rgba(255, 16, 16, 0.8);
  color: rgba(255, 255, 64, 0.8);
}

お好みで変更してください。

まとめ

真面目なページに突然こんなんがあったら嬉しくなりそう

/show/ じゃないほうの jsFiddle:

• http://jsfiddle.net/polygonplanet/fFJzq/

Contact

• http://twitter.com/polygon_planet
• http://polygonpla.net/