メディア - 音楽の記事一覧
WAAX - Webブラウザ上で音楽を奏でよう
HTML5によってWebの表現力が高まっていますが、それは何もビジュアルに限りません。他の魅力として今回は音楽を挙げます。MP3のような音楽もありますが、今回はWebブラウザ上で音楽を奏でられるWAAXを紹介します。## WAAXの使い方WAAXはGoogle Chromeなどで確認してください。Webブラウザ上にキー...
radicast - radikoをPodcasting化
radikoはそれまでラジオをほとんど聞かなかった人も利用するようになっており、スマートフォンを使って朝夕に聞いている人も多いのではないでしょうか。そんなradikoはその時しか番組を聞けないのですが、後で振り返って聞きたいと思う人も多いでしょう。そこで使ってみたいのがradicast、radikoをPodcastin...
APlayer - 歌詞表示に対応したHTML5音楽プレイヤー
ついにFlashが歴史の幕を閉じようとしています（Flash Playerはまだ残っていますが）。つまりこれまでWeb上で使われきたメディアがHTML5によって扱われるようになるのです。対応しているからといって、単純に動画、音声ファイルをリンクするだけでは誰も再生しません。やはり見栄えのいい再生プレイヤーがあってこそで...
Cumulus - メニューバー常駐型Sound Cloudクライアント
Sound Cloudには多くの音楽がアップロードされています。仕事中などのBGMにちょうど良く、使っている人も多いのではないでしょうか。そしてBGM代わりとなると普段使っているWebブラウザで聞いているとおいそれと終了しづらくなります。そこで使ってみたいのがCumulusです。メニューバー常駐型のSound Clou...
Gapless 5 - JavaScript/CSS製のギャップレスプレーヤー
音楽には間が大事な要素になると思いますが、コンサートや連続した曲が続く場合、間が邪魔に感じることがあります。そんな時のためにギャップレス再生と呼ばれる技術があります。Webにおいても音楽コンテンツが増えていますので、Gapless 5のようなギャップレスプレーヤーはニーズがありそうです。## Gapless 5の使い方...
Peaks.js - JavaScriptで波形を表示
SoundCloudでは音楽の波形を表示しています。音楽の変化するポイントが分かりやすく、何より見ていて格好良いのではないでしょうか。単純に音楽プレーヤーで再生するだけでは得られない楽しさがあります。同じように音楽ファイルを読み込んで波形を描画してくれるのがPeaks.js
Vine MV – Vine動画を使ってミュージックビデオを生成
好きな音楽をただ聴くだけでも楽しいですが、MV（ミュージックビデオ）も面白いです。バーやレストランに行って流れているとついつい目を向けてしまうのではないでしょうか。単に音楽だけでは惹かれなかったのに、MVを合わせてみたらすごく良い音楽に感じたなんて経験もあるかも知れません。そんなMVを自動で生成してくれるのがVine ...
karaoke-telop – カラオケのテロップをWeb上で表現
カラオケでよく見かけるのがテロップです。言葉の流れに合わせて文字の色が変わる仕組みですが、あのシンプルさで歌が歌えるようになるというのはとても面白い仕組みです。そんな仕組みをWeb上で実現したのがkaraoke-telop
kyoku - iTunesで再生中の音楽をメニューバーに表示
Mac OSXでiTunesの音楽を聴いている人は多いでしょう。多くの曲を入れているのでランダムで流していると、ふと耳に入った音楽の題名が分からないことがよくあります。そんな時に作業を中断してiTunesを表示するのは面倒です。そこでインストールしておきたいのがkyoku
wavesurfer.js - HTML5で音楽の波形を表示
Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaSc...
Vesper - 格好良いデザインのHTML5音楽プレイヤー
HTML5になって、audio/videoなどマルチメディアを操作するタグが追加されました。それによってFlashなどのプラグインを使わなくともWebブラウザだけで音楽や動画が再生できるようになっています。問題はそれらのタグは最低限の表現しか提供しておらず、より使いやすくしようと思うと独自の実装が必要と言うことでしょう...
MusicStoreLite – iTunesの音楽を連続視聴
最近のiTunesは多くの曲が視聴でも1分30秒流れるようになっています。従来の30秒に比べると歌の感じが十分に分かるようになっている反面、買わないかなと思っている曲でも楽しめるくらいになっています。そこで試してみたいのがMusicStoreLiteです。iTunesのミュージックストアにあるランキング上位の曲を自動再...
RiceKaraoke – JavaScriptでカラオケの歌詞表示
カラオケは日本はもちろん、海外でもとても人気です。しかし日本ほどカラオケ店が多い国はない訳で、それでもカラオケがしたいとなれば自作するほかありません。カラオケのためにはボーカルの音声を消した音楽と、歌詞の表示が必要です。さらにRiceKaraokeを使えば一歩進んだ歌いやすさを提供できるでしょう。## RiceKara...
おしえて！恋のプロトコル – プログラミングができるアイドル“ハックガールズ”デビュー曲
筆者はテレビを見ないのでアイドルなどは全然分かっていないのですが、皆さんはどのアイドルが好きでしょうか。自分の手の届かない存在としてのアイドルが好きな人も多いですが、最近ではAKB48のように会いにいけるアイドルというのが人気を集めています。そんな中、さらに自分たちと同じ話ができてしまうアイドル、ハックガールズが誕生し...
beeplay – JavaScript×ビープ音で音楽を奏でよう
HTML5のWebAudio APIは使ったことがありますか？あるということは知っていても、なかなか機会もきっかけも見つからないものですよね。とは言え折角の新機能を使わないのは勿体ないものです。そこで紹介したいのがbeeplay、ビープ音で音楽を奏でるJavaScriptライブラリです。## beeplayの使い方!メ...
Boombox.js – HTML5のオーディオ系APIを一つに集約
HTML5は多彩な機能をWebにもたらしてくれますが、機能が多彩でブラウザによってサポートされている機能が異なるなどまだまだ課題も多いのが実情です。しかしその課題こそプログラミングによって解決できる余地がある部分でもあります。今回はオーディオ系APIを一つにまとめて提供してくれるライブラリBoombox.jsを紹介しま...
audioSprite - オーディオファイルでスプライト！
ほほー技術的に面白い！一つの画像に複数のアイコンを入れてスタイルシートを使って切り出すことで複数画像をダウンロードするネットワークコストを低減してくれる技術がCSSスプライトですが、画像以外でも使うと便利そうです。Web Fontsをアイコン代わりに使ったケースも似ていますが、今回はなんと音楽でやってしまおうというライ...
WebAudioControls – WebAudioと一緒に使えるUIコントロール
HTML5の新しい機能として知られているWebAudioですが、音楽という特性上これまでのWeb UIとは全く異なる使われ方をします。そんなWebAudioを使いこなすためのUIコンポーネントとしてWebAudioControlsを紹介します。デジタル系の楽器にあったデザインのコントロールを提供してくれます。!まさに楽...
Cozic - YouTubeも使えるnode製のクラウドミュージックプレイヤー
CozicはCoffeeScript/node製のオープンソース・ソフトウェア（MIT License）です。音楽コンテンツはいつだって人気です。デスクトップ、スマートフォン、タブレット…どこでも音楽を楽しみたいと思うはずです。そこで紹介したいのがCozic、Webベースのミュージックサーバです。トップページです。音楽...
Web Audio APIをラッピングして使いやすく「Band.js」
Band.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。Web Audio APIを使えばWebブラウザ上で音楽を奏でられると分かっていますが、そうそう簡単にできるという訳ではありません。APIをそのまま使うのではなくラッピングされたAPIが必要でしょう。そこで紹...