So-net無料ブログ作成
» スポンサーリンク
2011年01月 | 2011年02月 |2011年03月
- | 次の10件

Lightbox系の画像スライドショーとYouTubeのiframe版埋め込みプレイヤーが重なるのを回避するには
» 雑記・その他 

YouTube が iframe 形式の埋め込みコードの提供を先月から正式開始してから、このブログで使っている画像のスライドショーの jQuery プラグイン Colorbox の表示が、YouTube のプレイヤーと重なって表示されているのに今頃になって気付きました。(気付くの遅っw)

↓こんな感じで重なって表示されてしまいます

奥が jQuery プラグインの Colorbox、手前が iframe 版 YouTube

 object/embed タグで Flash を表示する古い形式では、object の param に wmode を追加して transparent を指定 (embed の属性にも追加)してやれば良いのは知っていて、Colorbox のトップページの下にあるヘルプ項目にも同様の対策方法が書かれていたのですが、iframe 版の場合どうすればいいかまでは書かれてませんでした。

<param name="wmode" value="transparent" ></param>

 ちょっと困りつつ、URL に渡すパラメータのほうにも同じようなものがあるんじゃないかと、Google Code のYouTube の埋め込みプレイヤーのパラメータ一覧を見てみたのですが、それらしいものは見当たらず。

 何か解決方法はあるはずと思ってしつこくいろいろ調べていると、海外の見知らぬ掲示板 (URL 失念)で同じことで悩んでいる人の書き込みと解決策を発見。

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/XXXXXXXXXX?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

 その方法が「URLの後ろのパラメータに &wmode=transparent を追加する」というもので、さっそく試してみたところ効果がありました。



このパラメータが Google が公式に発表しているものかどうかまでは確認してないのですが、とりあえず上手くいったので記事にしてみました。

同じことで悩んでいる方の参考になれば幸いです。

[追記] 2011/05/04
wmode=transparent が指定されると再生処理が若干重くなるのか、IE では映像のコマ落ちが発生する場合があるかもしれません。
(他のブラウザでは問題ないようです)

[追記] 2012/02/21
楽天アフィリエイトのモーションウィジェットでも同様のことが発生しますが、こちらは JavaScript の埋め込みコードの最後に rakuten_wmode="on"; を追加すれば回避できます。

↓楽天モーションウィジェットの JavaScript 埋め込みコードの例
<script type="text/javascript">
<!--
rakuten_design="slide";
rakuten_affiliateId="楽天アフィリエイトID";
rakuten_items="ranking";
rakuten_genreId="112493";
rakuten_size="160x600";
rakuten_target="_blank";
rakuten_theme="gray";
rakuten_border="off";
rakuten_auto_mode="off";
rakuten_genre_title="off";
rakuten_recommend="on";
rakuten_ver="20100708";
rakuten_wmode="on";
//-->
</script>


[関連サイト]
 YouTube
 Colorbox - customizable lightbox plugin for jQuery 1.3 and 1.4
 Google Code - YouTube 埋め込みプレーヤーのパラメータ
nice!(1)  コメント(4)  トラックバック(0)   » カテゴリー:雑記・その他
permalink
trackback
このエントリーをはてなブックマークに追加


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク

パソコン上のあらゆる音声をワイヤレス経由でiPhoneで再生 : WiFi2HiFi
» ソフトウェア(iOS/Android) 

スイス・チューリヒの Clever & Son2011年2月21日にリリース予定のワイヤレスオーディオレシーバー WiFi2HiFi を紹介。
App Store 価格は115円。

レシーバーアプリは iOS 3.1 以降の iPhone、iPod touch、iPad (互換表示)に対応。
ホストアプリは無料で Windows Vista/7、OS X 10.6 以降に対応しています。



 WiFi2HiFi はホストマシン(PC/Mac) 側で再生している全てのオーディオ音声を無線 LAN 経由で iPhone/iPod touch/iPad で受信して再生できるワイヤレスオーディオアプリです。
 iTunes のようなミュージックプレイヤーだけでなく、ブラウザ上で再生している音声など、パソコン上で再生している音声ならなんでも聴くことができます。

 ホスト側、レシーバー側双方のアプリを立ち上げて、iPhone から聴きたいステーション(ホスト)を選択するだけで、あっけないほど簡単に繋がります。

レシーバーアプリ


 メイン画面はでっかいボリュームダイヤルがあるだけのシンプルなレイアウト。あくまでレシーバーなのでホスト側のオーディオソースになっているアプリケーション (iTunes とか)をリモート操作する機能はありません。



 メイン画面右下の「i」ボタンを押すと設定画面が表示されて、複数のステーション(ホスト)から選択することができます。
 テストではレシーバーが iPad 1台しかなかったので確認してませんが、公式サイトの FAQ によると、1つのステーションを複数の iPhone で聴くこともできるようです。

ホストアプリ WiFi2Hifi Station

» Windows Vista/7 版


 Windows 版はインストールするとスタートアップに登録されて、タスクトレイに常駐します。タスクトレイのアイコンを右クリックすると管理パネルが開きます。



 スタンバイ中のレシーバーが自動的に検索されて IP アドレスがリストアップされます。リストに出てこなかった場合は、レシーバーの IP アドレスを直接指定して繋いでやることも可能。

公式デモ

[ここに YouTube プレイヤーが表示されます]
http://www.youtube.com/watch?v=JPrLWbtnYOs
http://www.youtube.com/watch?v=IWzoDLEAF2s


iOS 3.1 から対応しているので、買い替えで眠っていた古い iPhone や iPod touch を使って、ドック端子スピーカーをワイヤレスオーディオ化したりとか、アイディア次第でいろいろ活用できそうですね。


[関連サイト]
 WiFi2HiFi
 Clever & Son


iTunes App Store からダウンロード Clever & Son WiFi2HiFi
カテゴリー: ミュージック
リリース: 2011/02/21
価格: 115円

nice!(2)  コメント(0)  トラックバック(0)   » カテゴリー:ソフトウェア(iOS/Android)
permalink
trackback
このエントリーをはてなブックマークに追加


iPhone4用のコンパクトなアコースティックホーンスピーカー : ARKCANARY II
» ハードウェア(オーディオ) 

カリフォルニアの ARKWHAT がリリースした iPhone4 に装着するコンパクトなアコースティックホーンスピーカー ARKCANARY II を紹介。
価格は13ドルで、カラーはホワイト、ブラック、グリーン、パープル、ピンクの5色。




© ARKWHAT
一緒に写っている白い分厚いカバーは同社の ARKHIPPO I です。

[ここに YouTube プレイヤーが表示されます]
http://www.youtube.com/watch?v=BAtJ1jyQ7gA

ポップなデザインとカラーがいい感じ。
そのうち類似品が出てきそうな・・・

[関連サイト]
 ARKWHAT
 HaA Design
nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:ハードウェア(オーディオ)
permalink
trackback
このエントリーをはてなブックマークに追加


HTML5 AudioとJavaScriptで作ったドラムマシンにjsfxで音色編集機能を追加
» 音楽ネタ全般 

先月末に作った HTML5 Audio オブジェクトと JavaScript で作った簡易ドラムマシン の音源部に、JavaScript で波形を生成して再生できるサウンドエフェクト・ライブラリ jsfx を組み込んでメモリ上で音声データを生成・編集できるようにしてみました。

 ↓テストページはこちら
 HTML5 AudioとJavaScriptで作った簡易ドラムマシン (jsfx バージョン)




 HTML5 の Audio オブジェクトが実装されていて、WAV 形式の再生が可能なブラウザ(Firefox 3.6、Chorme 9、Safari 5 など)で実行可能です。
 快適に遊びたい人は Windows/OS X 双方とも Firefox 3.6 以上を推奨します。

 IE 6~8 は HTML5 非対応なので動きません。
 IE 9 beta は HTML5 Audio オブジェクトが生成できないので動きません。

テスト結果

BPM 120、パターンは初期表示でセットしているパターンでテストしました。

 OS  ブラウザ 結果 備考
 Windows
 (7/XP)
 Firefox 3.6 ほぼ問題なし?
 Chrome 9.0 間引きあり。テンポ落としたらOK?
 Safari 5.0 起動が重い。GATEモードなら再生OK
 IE9 beta × Audio オブジェクト生成できず
 OS X
 (10.6.4)
 Firefox 3.6 ほぼ問題なし?
 Chorme 9.0 × ひどい音割れ発生 (原因未調査)
 Safari 5.0 ほぼ問題なし?
 iOS 4.2
 (iPad)
 Safari × 音がでない (原因未調査)

 Chrome は 9 から WAV 形式の再生に対応していたので大丈夫かと思っていたら、OS X 版は波形生成の段階で何か問題が起こっていて波形がつぶれているのか、デジタルノイズのような音割れが発生して動きませんでした。
 Windows 版のほうはテンポを落とせばなんとかギリギリ動いてくれました。

 iOS 4.2 (iPad) では、再生ボタンを押すとインジケーターが淡々と動くだけで、音がまったく出ませんでした。iPad の画面右上に出てくるはずの再生アイコン(►)がでてなかったので、再生自体がキャンセルされているようでした。

使用方法

 パネル上部にあるタブで16ステップシーケンサーの画面と、5つのパートの音色編集画面の切り替えができます。


 シーケンサーの部分は前作のメイン画面とほぼ同じです。今回はハイハットの役目以外にも使用できるようにオープン/クローズドの排他処理は外しました。

 今回新たに単独で鳴らせるパッドボタンを追加しました。マウスでクリックするか、Z X C V B のキーで発音します。

 音色編集画面のパラメータは jsfx と同じ構成で並び順も同じにしてあります。普通のアナログシンセと若干構成が違うので最初はちょっと取っ付きにくいかもしれません。

 波形選択はラジオボタン、その他のパラメータはスライダーで調整できます。スライダーの微調整をしたいときは、スライダーをクリックしてフォーカスを与えた後に左右矢印キーで動かせます。


 編集画面の下にある機能ボタンは以下の6つで、マウスクリックとキーで操作できます。
 操作は全てパート単位で行います。
 音色を編集しても「Apply」ボタンを押さないとドラムセットには反映されません。

  • Apply : 編集中の音色ドラムパートにセットします
  • Play : 編集中の音色をテスト再生します
  • Random : ランダムにパラメータの値を設定して音色を作成します
  • Clear : プリセットの音色に戻します
  • Load: クッキーから音色パラメータをロードします
  • Save: クッキーに音色パラメータをセーブします
 クッキーに保存した音色は次回起動時に自動的にロードされます。
 プリセットに戻したい場合はパートごとに「Clear」ボタンを押してください。

 パラメータのスライダーはダブルクリックするとデフォルト値に戻ります。
 (プリセット音色の位置ではなく、jsfx がもつ初期値に戻ります)

音源は jsfx を使ってメモリ上に生成して合成

 jsfx は音色パラメータから音声波形を生成したものを WAV 形式に変換して HTML5 の Audio オブジェクトにオンメモリで割り当てることができるサウンドエフェクト・ライブラリです。

 ↓関連記事はこちら
 » JavaScript でチップチューン風サウンドエフェクトを生成するライブラリ : jsfx
 
 前作はステップごとの発音回数の負担を減らすために、1ステップ内で発音するパート数(例えばドラム、スネアが同時に鳴っていたら2回)の play() を呼ぶのではなく、あらかじめ全てのパターンを合成した音声ファイルを用意して、1ステップで1回だけ呼ぶ方法を使っていました。

 今回は音声ファイルは使ってませんが考え方は同じで、あらかじめパートの全ての組み合わせの波形をメモリ上で合成して Audio オブジェクトを生成しています。
  1. 5つのパートの音色パラメータを元に音声に変換
    → jsfx の jsfx.generate() を利用
  2. すべてのパートの組み合わせ(31パターン)の音声波形を合成
    → ここは自前で処理 (各パートをフレーム毎に足し算してるだけの簡単なもの)
  3. 音声データを WAV 形式に変換して Audio オブジェクトを生成
    → jsfx の audio.make() を利用


今回、シンセエンジンは jsfx の助けを借りたので比較的短時間で作ることができました。
JavaScript で音が扱えるのはすごく楽しいですね。

いつか自前で全部実装してみたいと思ってたりしますが、今の時点ではまだ勉強不足なので実現するのはもう少し先のことになりそうです。


[関連サイト]
 jsfx - Javascript Sound Effect Generator
 HTML5 - W3C Editor's Draft - Audio Element
 jQuery UI


Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

  • 作者: 羽田野 太巳
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2010/09/16
  • メディア: 単行本(ソフトカバー)
JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

  • 作者: Stoyan Stefanov
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2011/02/16
  • メディア: 大型本
nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:音楽ネタ全般
permalink
trackback
このエントリーをはてなブックマークに追加


フロッピーディスクドライブ4台でバッハのトッカータとフーガを演奏
» 音楽系動画ネタ 

Synthtopia から。
USB 経由で MIDI 制御される4台のフロッピーディスクドライブを使って J.S.バッハの「トッカータとフーガ ニ短調」を演奏している動画。

[ここに YouTube プレイヤーが表示されます]
http://www.youtube.com/watch?v=dmoDLyiQYKw

いろんな意味でオーバードライブ。

[関連サイト]
 Synthtopia


世界を変えた1枚のディスク  3.5インチフロッピーディスク開発物語

世界を変えた1枚のディスク 3.5インチフロッピーディスク開発物語

  • 作者: 中山 正之
  • 出版社/メーカー: 角川学芸出版
  • 発売日: 2010/12/01
  • メディア: 単行本
トッカータとフーガ / バッハ : オルガン作品集

トッカータとフーガ / バッハ : オルガン作品集

  • アーティスト: アラン(マリー=クレール),バッハ
  • 出版社/メーカー: ワーナーミュージック・ジャパン
  • 発売日: 2000/06/21
  • メディア: CD
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:音楽系動画ネタ
permalink
trackback
このエントリーをはてなブックマークに追加


JavaScriptでチップチューン風サウンドエフェクトを生成するライブラリ : jsfx
» 音楽コンテンツ(作曲/演奏) 

JavaScript でチップチューン風のシンセサウンド波形を生成して再生できる効果音ジェネレータライブラリ jsfx を紹介。

ソースファイルは GitHub で公開されています。
MIT ライセンスなので再利用・改変の際は著作権表示が必要。



 HTML5 の Audio オブジェクトで WAV 形式の再生をサポートしているブラウザ(Firefox 3.6、Chrome 9、Safari 5 など)で実行可能です。

 IE9 beta は HTML5 の Audio タグには対応していますが、JavaScript から Audio オブジェクトが生成できないため利用できません。(IE6~8 は HTML5 非対応なので利用不可)

デモページ

» デモはこちら (Firefox 3.6~、Chrome 9~、Safari 5~ 推奨)


 スタンドアローンのチップチューン効果音作成アプリ sfxr がベースになっていて、JavaScript で音色パラメータを元に動的に波形を生成して WAV 形式の生データに変換したものを HTML5 の Audio オブジェクトで再生するようになっています。

 参考までに、同じコンセプトで ActionScript3 で書かれた Flash ベースの as3sfxr というのもあったりしますが今回は説明省略。

ライブラリの構成

ライブラリのソースコードは以下の4つのファイルで構成されています。

 js ファイル機能の概要
 jsfx.js 音色パラメータから音声波形データを生成
 audio.js 波形を WAV 形式データに変換して Audio オブジェクトに準備
 jsfxlib.js 複数の音色のシンセパラメータを渡して Audio オブジェクトを生成
 jsfxgui.js デモページと同じ GUI が使えるフロントエンド

 パラメータを内部でセットして再生する場合は、GUI の jsfxgui.js は必要なく、以下のような手順で利用することができます。

<script src="../lib/audio.js"></script>
<script src="../lib/jsfx.js"></script>
<script src="../lib/jsfxlib.js"></script>
<script>
// 注: 全てのパラメータを含んでいません
audioLibParams = {
  test : ["saw",0.0000,0.4000,0.5810,0.2640,2.1270......],
  explosion : ["noise",0.0000,0.4000,0.0000,0.2040......]
};

samples = jsfxlib.createWaves(audioLibParams);
samples.test.play();
samples.explosion.play();
</script>

 上の例は test と explosion の2つの音色をセットアップして再生する単純なサンプルで、音色に対応したオブジェクトの samples.test と samples.explosion は play() の他にも HTML5 の Audio オブジェクトの関数やプロパティが利用できるようになっています。

 2年ほど前に「JavaScript で動的に WAV データを生成して Data URI スキームに変換したものを embed 要素で再生させる方法」というのを紹介したことがあったのですが、こちらのほうがより複雑な音色が作成できて簡単に利用できるので、アイディア次第でいろいろ使えそう?

そのうちもっと本格的な JavaScript シンセ を作る人が出てきたりして。
自分はそこまでノウハウないから今は無理ですけど…

[関連サイト]
 jsfx
 sfxr
 as3sfxr


JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

  • 作者: Stoyan Stefanov
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2011/02/16
  • メディア: 大型本
permalink
trackback
このエントリーをはてなブックマークに追加


オンラインストレージのDropboxと連携するMP3検索エンジン : mP3
» 音楽Webサービス(楽曲再生) 

オンラインストレージの Dropbox と連携する MP3 ファイル検索エンジン mP3 を紹介。
HTML5 Audio の mp3 形式の再生に対応しているブラウザで利用可能です。

 Firefox と Opera は検索と Dropbox 連携機能は利用できますが、HTML5 Audio 要素が MP3 形式の再生に対応していないため、埋め込みプレイヤーでは直接再生できません。
 また、Internet Explorer 6~8 は HTML5 に対応していないので利用できません。



 使い方はシンプルで、曲名、アーティスト名、YouTube の URL などを入れると該当する曲をリストアップして再生できます。プレイヤーは HTML5 Audio に対応したブラウザ独自の埋め込みプレイヤーが表示されます。

 Dropboxのアカウントをもっている人は Dropbox のアイコンをクリックして mp3 ファイルを自分の Dropbox へ転送することができます。



 連携機能の利用は mP3 (mppp) が自分の Dropbox にアクセスする許可を与える必要があります。連携機能を初めて使うときに表示される Dropbox の確認ページで、右下にある「Allow」を押すと連携が有効になります。

 後になって連携を無効にしたいときは、Dropbox のアカウント管理ページの「My Apps」で mP3 (mppp) の項目を削除すれば OK です。


くれぐれも利用は自己責任でお願いします。

[関連サイト]
 mP3
 Dropbox


Dropboxハンドブック

Dropboxハンドブック

  • 作者: 田口 和裕
  • 出版社/メーカー: 秀和システム
  • 発売日: 2010/12
  • メディア: 単行本
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:音楽Webサービス(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


Ableton Live用コントローラ AKAI APC 40とAPC 20を合体させて「APC 80」
» 音楽系動画ネタ 

delamar の「Akai APC 80 Do-It-Yourself」より。
Ableton Live 用のコントローラ AKAI APC 40APC 20 を DIY でニコイチに。

[ここに YouTube プレイヤーが表示されます]
http://www.youtube.com/watch?v=7lD1rL-ions
http://www.youtube.com/watch?v=7Dt37HBERIs

なんともナイスな仕上がり。

[関連サイト]
 delamar
 AKAI professional
 Ableton


AKAI APC-20+APC-40 TWIN SET

AKAI APC-20+APC-40 TWIN SET

  • 出版社/メーカー: AKAI
  • メディア:
nice!(1)  コメント(2)  トラックバック(0)   » カテゴリー:音楽系動画ネタ
permalink
trackback
このエントリーをはてなブックマークに追加


ワイングラス、下着など身の回りのモノでサンプリングミュージック : Sampled Room
» 音楽系動画ネタ 

Synthtopia 経由のネタ。
Mateusz Zdziebko 氏による身の回りのモノで作られたサンプリングミュージック。
素材選びにセンスを感じます。

[ここに Vimeo プレイヤーが表示されます]
http://vimeo.com/18929809

使われてるマイクは Shure SM48 です。

[関連サイト]
 Mateusz Zdziebko
 Synthtopia
 Shure


SHURE 単一指向性ダイナミック型マイクロホン SM48S-LC

SHURE 単一指向性ダイナミック型マイクロホン SM48S-LC

  • 出版社/メーカー: SHURE
  • メディア: Personal Computers
nice!(2)  コメント(0)  トラックバック(0)   » カテゴリー:音楽系動画ネタ
permalink
trackback
このエントリーをはてなブックマークに追加


YMOの旧作アルバムがついにiTunes Storeで配信開始
» アーティスト関連 

今日から iTunes Storeイエロー・マジック・オーケストラ (YMO) のオリジナルアルバムが配信が始まっています。

iTunes で開く

 新たに追加されたのはオリジナルアルバム8タイトルとライブ盤(パブリック・プレッシャー、アフター・サーヴィス)にベスト盤2つを含めた12タイトル。iTunes Plus 形式で1曲は200円。ベスト盤はアルバム単位の配信はなく曲単位のみとなっています。

 タイトル 価格
 イエロー・マジック・オーケストラ 2,000円
 イエロー・マジック・オーケストラ(US版) 1,800円
 ソリッド・ステート・サヴァイヴァー 1,600円
 パブリック・プレッシャー 1,800円
 増殖 ×∞Multiplies 2,000円
 BGM 2,000円
 テクノデリック 2,000円
 浮気なぼくら&インストゥルメンタル 2,400円
 サーヴィス 2,000円
 アフター・サーヴィス 2,400円
 YMO Go Home! 曲単位のみ
 UC YMO (Ultimate Collection) 曲単位のみ
 ここから下は既に配信されている再結成後のタイトル
 RYDEEN 79/07 400円
 RESCUe / RYDEEN 79/07 400円
 GIJONYMO - LIVE IN GIJON 19/6 08 2,400円
 LONDONYMO - LIVE IN LONDON 15/6 08 2,400円


ようやく配信開始されたこと自体は喜ばしいことではあるんですが、iTunes Store US だと半額以下で買えてしまう価格設定はちょっと・・・
あと、1993年再結成のテクノドン関連がないのはレコード会社の関係?

入門用には 1st の US 盤と 2nd のソリッド・ステート・サヴァイヴァーがおすすめ。
個人的に好きなのは BGM、テクノデリック が同率、その次に 1st (US)、ソリッド・ステート・サヴァイヴァーかな。

買いそびれていた人はぜひこの機会に。


iTunes Store で YMO のアルバムを検索する

Amazon で YMO のアルバムを検索する
nice!(3)  コメント(2)  トラックバック(0)   » カテゴリー:アーティスト関連
permalink
trackback
このエントリーをはてなブックマークに追加


- | 次の10件
2011年01月 |2011年02月 |2011年03月

customizeBlog2(); //]]>