HTML5 / Audio

Video同様ブラウザごとに違いがある模様。下記を参考にしながら試してみた。
ブラウザーのネイティブなオーディオ – html5doctor – HTML5.JP
ASCII.jp:HTML5 Audioで作るiTunes風音楽プレイヤー|古籏一浩のJavaScriptラボ

まずはファイルのサポート形式が違うので、Firefox, Opera 用に ogg、Safari 用に mp3 を用意します。Chrome は両方OK。
※試したバージョンは Chrome 12.0.742.122, Safari 5.1, Firefox 5.0.1, Opera 11.50

<audio> タグと <video> タグは src の指定を複数できるけど、これに未対応な(1個目しか読まない) Firefox を優先して下記のように記述。

1
2
3
4
5
<audio controls autobuffer>
    <source type="audio/ogg" src="audio.ogg" />
    <source type="audio/mpeg" src="audio.mp3" />
    <p>非対応です</p>
</audio>

controls で再生ボタンなどのインターフェイスが表示され、autobuffer でバッファしてくれます。他にも autoplay でOpera以外は自動再生、loop でFirefox以外はルーブ再生します。

それから、source は type を指定しとくと、ファイルを読み込む前に再生可能か判断してくれるそうです。指定しないと読み込んでから判断するみたいなので、やった方がイイよね。

controls 指定しないと画面に何も表示されんけどどうすんのと思うけど、ちゃんと JavaScript で制御できます。getElementById とかで取得して play() や stop() が使えます。
※例は jQuery で onload 時に再生

1
2
3
4
5
6
<script>
jQuery(function($){
    var audio = $('#audio')[0];
    audio.play();
});
</script>

他にも JavaScript で生成できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
try {
    var audio = new Audio('');
    if (audio.canPlayType('audio/ogg')) {
        audio.src = 'audio.ogg';
    } else if (audio.canPlayType('audio/mpeg')) {
        audio.src = 'audio.mp3';
    } else {
        throw '非対応です';
    }
    audio.play();
} catch(e) {
    alert('非対応です');
}

Opera が引数なしの new Audio() だとNGなので、Audio(”) のようにします。あとは、ブラウザの差異があるので canPlayType で再生できるか判断する必要があります。
音声ファイルが大きい時は Image() の時と同様に preload した方がイイみたい。

サンプル

音は下記サイトのものを使用しました。
音楽素材/魔王魂

Transform / 回転・拡大縮小

2012.05.31 追記
ブラウザ判定がうまく動かなくなってたので、transform が使用できるかで判定するように変更しました。
機能の判定はブラウザのバージョンアップで変わってくので別の用途には使うべきじゃないね…

CSS3どころかCSSも普段あまりいじらないけど、回転・拡大縮小できる transform があるというコトなのでやってみる。
んでも、まだまだブラウザごとに実装が異なるらしく、jquery-css-transform.jsjquery-animate-css-rotate-scale.js っていう jQuery プラグイン使いましょうってのが多かったので、これを参考にしてみた。

CSS3では、transform: rotate(30deg) で要素を時計回りに30度回転、transform: scale(1.5) で要素を1.5倍とかいった指定が可能。んで、これが今んとこブラウザによって違ってて Chrome/Safari なら -webkit-transform、Firefox なら -moz-transform という具合。

これを jQuery で設定するには下記の感じ。JavaScript と CSS でパラメータ名が若干違うのに注意。

1
2
3
4
5
6
7
8
// Chrome / Safari (webkit) の場合
$('#target').css({ WebkitTransform: 'rotate(30deg) scale(1.5)' });
// firefox の場合
$('#target').css({ MozTransform: 'rotate(30deg) scale(1.5)' });
// Opera の場合
$('#target').css({ OTransform: 'rotate(30deg) scale(1.5)' });
// IE9 の場合
$('#target').css({ msTransform: 'rotate(30deg) scale(1.5)' });

rotate だけ、scale だけでもよいす。座標移動の translate もあるけど割愛。
これをブラウザ判定して使い分けます。jquery-css-transform.js だと transform, WebkitTransform, MozTransform,… と順にプロパティがあるかループで調べて判定してます。正式に tranform に対応したらそちらで処理するようにって事だと思う。(※2012.05.31追記 jquery-css-transform.jsのやり方がベンダープレフィックスが取れた時にも対応できるのでよりイイです)

パラメータの指定方法見ると、値に数値以外の文字もあるので jQuery の animate メソッドが使えないんよね。それで、jquery-animate-css-rotate-scale.js も別途用意されてる模様。

んで、試しに画像に適用したのが下記サンプルです。一応、プラグイン使わずにやってみた。
サンプル

もやもや – jsdo.it – share JavaScript, HTML5 and CSS

jQueryゼロから / slideToggle

クリックで開いたり閉じたりするのをサクっとつくるのに slideToggle 使うと便利。
slideUp, slideDown 組み合わせてもいいんだけど、こっちのが楽ね。

1
2
<span id="slide">ここをクリック</span>
<p id="target">なんか表示</p>

slideToggle にも引数でアニメーションの速度指定できます。
ただ、slideUp, slideDown の速度を使い分けるとかは出来ないんかな。

1
2
3
$('#slide').click(function(){
    $('#target').slideToggle('slow');
});

サンプル

jQuery Toggle Slide – jsdo.it – share JavaScript, HTML5 and CSS

jQueryゼロから / BlackOutふたたび

前回のがウィンドウサイズに追従しなくて恥ずかしい感じだったので、やり直し。WordPressのプラグインアップデートの画面がそんなんだったので、見て真似しました。(Thickbox使った方が早いって話だな)

まずはブラックアウト用に <div id=”layer”> ってのを用意、画面を覆うようにCSS設定します。
前回との主な違いは position: fixed; にして、width & height を100%にしてます。

1
2
3
4
5
6
7
8
9
10
11
12
#layer {
    position: fixed;
    z-index: 100000;
    background: #000000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0.0;
    display: none;
}

あとは前回同様に <a class=”blackout”> をクリックで先の <div id=”layer”> を表示させます。(classだと画面内に複数置けるので)
CSSで width, height を 100% にしてるので、前みたいにいちいち Window サイズ拾わないので楽です。実質 show, hide と fadeIn, fadeOut だけ。

1
2
3
4
5
6
7
8
9
10
11
jQuery(function($){
    $('a.blackout').click(function(){
        $('#layer').show()
                   .fadeTo('slow', 0.8);
    });
    $('#layer').click(function(){
        $(this).fadeTo('fast', 0, function(){
            $(this).hide();
        });
    });
});

サンプル

blackout – jsdo.it – share JavaScript, HTML5 and CSS